vue-lightbox-lite

1.2.3 • Public • Published

vue-lightbox-lite

A lightweight image, video and iframe lightbox gallery component for Vue. Supports slide, zoom, rotation, autoplay, captions and so on, based on Vue-cool-lightbox.

轻量级的图片/视频 预览器,支持自动播放、旋转、缩放、全屏、键盘及手势滑动切换等。

default screenshot

light screenshot

Features

  1. No external dependencies.
  2. Fully responsive.
  3. autoplay slides that play or pause
  4. Full screen support.
  5. Multiple zoom levels.
  6. Rotate images.
  7. YouTube Vimeo and html5 videos Support.
  8. Keyboard Navigation for desktop.
  9. And many more.

Installation

npm install vue-lightbox-lite

#

yarn add vue-lightbox-lite

Usage

1. Global import

In main.js:

// main.js
import Lightbox from 'vue-lightbox-lite'
import 'vue-lightbox-lite/dist/index.css'

Vue.use(Lightbox)

In component.vue

<template>
<div class="lightbox">
  <ul class="list">
    <li v-for="(item, key) in list" :key="key" @click="index = key">link - {{ key }}</li>
  </ul>

  <LightBox
    :index="index"
    :items="list"
  />
</div>
</template>

<script>
export default {
  data() {
    return {
      index: null,
      list: [
        'http://www.domain.com/image.jpg',
        'http://www.domain.com/video.mp4',
        {
          src: 'http://www.domain.com/playgame/',
          mediaType: 'video',
          ext: 'webm',
          title: '',
          description: ''
        },
        'https://www.youtube.com/watch?v=d0tU18Ybcvk',
        {
          src: 'https://www.youtube.com/watch?v=d0tU18Ybcvk',
          mediaType: 'webVideo'
        },
        {
          src: 'http://www.domain.com/file.pdf',
          mediaType: 'iframe'
        }
      ]
    }
  }
}
</script>

2. In Component

<template>
<div class="lightbox">
  <button @click="index = 0">preview</button>

  <Viewer
    :index="index"
    :items="list"
  />
</div>
</template>

<script>
import VueLightbox from 'vue-lightbox-lite'
import 'vue-lightbox-lite/dist/index.css'

export default {
  component: {
    Viewer: VueLightbox
  },
  data() {
    return {
      index: null,
      list: [
        'http://www.domain.com/image.jpg',
        'http://www.domain.com/video.mp4',
        'http://www.domain.com/file.pdf'
      ]
    }
  }
}
</script>

API

Items attributes

Name Type Default Description
src String Url of the image/video/iframe
mediaType String image media type, image, video, webVideo, iframe
ext String e.g. mp4, ogg, webm, pdf
thumb String
alt String
srcset String
sizes String
title String
description String
width String|Number auto Control width, video & iframe
height String|Number auto
maxWidth String|Number auto
maxHeight String|Number auto

props

Name Type Default Description
index Number null Index of items to open
items Array<Object | String> Array of images/videos
container Element | String document.body
theme String dark darklight
customClass String
zIndex Number 9999
highColor String #fa4242 progressbar color and thumbnails border-color
overlayColor String
navigator Boolean true
toolbar Array toolbar: counter, zoom, slide, rotate, gallery, fullscreen, download, close
loop Boolean true
slideDuration Number 3500
showGallery Boolean false
galleryPosition String rightbottom
video Object {autoplay: false, raito: 16/9} video parameter,autoplay, width,height,maxWidth,maxHeight
iframe Object width,height,maxWidth,maxHeight
enableWheelEvent Boolean false
enableScrollLock Boolean true
clickOutsideHide Boolean true

Slots

  • loading
  • icon-previous
  • icon-next

Events

  • open(index: number)
  • close
  • change(index: number)
  • change-end(index: number)

Methods

  • open(index)
  • close()
  • previous()
  • next()
  • change(index)

Package Sidebar

Install

npm i vue-lightbox-lite

Weekly Downloads

18

Version

1.2.3

License

none

Unpacked Size

181 kB

Total Files

7

Last publish

Collaborators

  • mengqing723