Vue It Bigger!
A simple image / video lightbox component for Vue.js. Based on vue-image-lightbox.
Features
- Unobtrusive interface that disappears after a few seconds, reappears on mouse activity
- Optional thumbnail strip with all of the gallery’s media
- Can show an HTML enabled caption under each image or video
- Can play the slideshow automatically
- All of the graphics (previous, next and close buttons) can be customized via slots
- Can skip to next / previous media programatically
Improvements over vue-image-lightbox
- Lightbox opens and closes with a short fade
- Media’s width is no longer limited
- When opening the lightbox the media doesn’t flicker
- Moved caption bar and image counter off the media to the bottom of the screen
- Moved thumbnails to the top of the screen
- All interface elements have a background for better visibility
- Simpler CSS
Installation
NPM / Yarn
Install the package:
npm install vue-it-bigger
yarn add vue-it-bigger
Then import it in your project at your entry point (main.js normally)
import Vue from 'vue'
JavaScript
and use the lightbox:
import LightBox from 'vue-it-bigger'
export default {
components: {
LightBox,
},
}
JavaScript
Browser global
<script src="path/to/vue.js"></script>
<script src="path/to/dist/vue-it-bigger.js"></script>
HTML
Usage
You can simply view App.vue to see how to use vue-it-bigger
Import CSS style
require('vue-it-bigger/dist/vue-it-bigger.min.css')
// Use only when you are using Webpack
JavaScript
How to use:
<LightBox :media="media"></LightBox>
HTML
Structure of the media prop:
[
{ // For image
thumb: 'http://example.com/thumb.jpg',
src: 'http://example.com/image.jpg',
caption: 'caption to display. receive <html> <b>tag</b>', // Optional
srcset: '...' // Optional for displaying responsive images
},
{ // For video
thumb: 'https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg',
sources: [
{
src: 'https://www.w3schools.com/html/mov_bbb.mp4',
type: 'video/mp4'
}
],
type: "video",
caption: '<h4>Monsters Inc.</h4>',
width: 800, // Required
height: 600, // Required
autoplay: true, // Optional: Autoplay video when the lightbox opens
}
]
#lightbox #images #vue #vue.js #programming
63.20 GEEK