Repository files navigation

A simple image / (YouTube) video lightbox component for Vue.js 2. Based onvue-image-lightbox.

Click on the screenshot above for ademo.

• 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

• Allows embedding YouTube videos
• Lightbox opens and closes with a short fade
• Media's width is no longer limited (stretches to the full width / height of the window)
• 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 (as the bottom is now used by the caption bar)
• All interface elements have a background for better visibility
• Simplified CSS

You know the drill:

npm install vue-it-bigger# oryarn add vue-it-bigger

You can viewApp.vue orthe demo for an usage example.

In the<script> section of your component import it:

importLightBoxfrom'vue-it-bigger'import('vue-it-bigger/dist/vue-it-bigger.min.css')// when using webpack

Add it to the list of used components:

exportdefault{components:{    LightBox,},}

And use it in the<template> section:

<LightBox:media="media"></LightBox>

Themedia prop has the following structure:

[{// For an imagetype:'image',// Can be omitted for imagethumb:'http://example.com/thumb.jpg',src:'http://example.com/image.jpg',caption:'Caption to display. HTML <b>enabled</b>',// Optionalsrcset:'...'// Optional for displaying responsive images},{// For a YouTube videotype:'youtube',thumb:'https://img.youtube.com/vi/WsptdUFthWI/hqdefault.jpg',id:'WsptdUFthWI',caption:'HTML <b>enabled</b> caption to display'// Optional},{// For a video that can be played in the <video> tagtype:'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'}],caption:'<h4>Monsters Inc.</h4>',width:800,// Requiredheight:600,// Requiredautoplay:true// Optional: Autoplay video when the lightbox opens}]

Create a file namedlightbox.js under theplugins directory with following contents:

importVuefrom'vue'importLightBoxfrom'vue-it-bigger'import('vue-it-bigger/dist/vue-it-bigger.min.css')constplugin={install(){Vue.component('LightBox',LightBox)},}Vue.use(plugin)

Add the plugin innuxt.config.js:

plugins:[{src:'~/plugins/lightbox.js',ssr:false}]

Use it in any of your components:

<no-ssrplaceholder="Loading..."><!-- this component will only be rendered on client-side --><LightBox:media="lightBoxMedia"></LightBox></no-ssr>

The content of the close button.

The content of the footer under the image.

The previous button on the main image.

The next button on the main image.

The caption of the current image.

Usage example:

<LightBoxref="customCaptionLightbox"  :media="media"  :show-caption="true"><templatev-slot:customCaption="slotProps">{{ slotProps.currentMedia.caption}}<br>    There could be some description here.</template></LightBox>

The Icon used for videos

• onOpened: Emit when the lightbox is opened.
• onClosed: Emit when the lightbox is closed.
• onLastIndex: Emit when the current image is the last one of the list.
• onFirstIndex: Emit when the current image is the first one of the list.
• onStartIndex: Emit when the current image is at thestartAt index (specified in the properties).
• onLoad: Emit when there arelengthToLoadMore images left in the array (specified in the properties). For example, iflengthToLoadMore = 2 and there are 7 images in your array, when you reach index 4 (which means there are 2 images left which are not discovered yet), this event will be emitted. After that, if the image array are updated and there are totally 15 images, the event will be emitted at index 12.

Clone the repository, cd into it and run:

npm run devyarn dev

After you add or modify something make sure the tests still pass:

npm run testyarn test

1. Make sure everything works locally by runningyarn dev
2. Bump the version inpackage.json
3. Draft a new release on thereleases page
   • Create a tag with the prefixv and the version, eg:v0.3.0
   • Prefix the release title with the tag, eg:v0.3.0 - An awesome release
4. Publish the release

• Thanks@anavsv for helping with the YouTube embed styling
• Original CSS was based onreact-images
• vue-image-lightbox authored by@pexea12
• Other contributors

This project is licensed under the theApache License, Version 2.0.