Lightbox Photo Grid and Slideshow component for Vue.JS

v-lightbox is a Vue component which allows to display first x (1-5) images of your gallery in a grid view as you seen on Facebook timeline. Click on the thumbnail will display all images in a fullscreen, navigatable modal popup just like the gallery lightbox.

How to use

npm i @morioh/v-lightbox

import '@morioh/v-lightbox/dist/lightbox.css';

import Vue from 'vue'
import Lightbox from '@morioh/v-lightbox'

// global register
Vue.use(Lightbox);

Use CDN

<link href="https://cdn.jsdelivr.net/npm/@morioh/v-lightbox/dist/lightbox.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/@morioh/v-lightbox/dist/lightbox.min.js" type="text/javascript"></script>

<link href="https://unpkg.com/@morioh/v-lightbox/dist/lightbox.css" rel="stylesheet">

<script src="https://unpkg.com/@morioh/v-lightbox/dist/lightbox.min.js" type="text/javascript"></script>

Images

<script>

    export default {
        data() {
            return {

                images: [
                    "https://i.wifegeek.com/200426/f9459c52.jpg",
                    "https://i.wifegeek.com/200426/5ce1e1c7.jpg",
                    "https://i.wifegeek.com/200426/5fa51df3.jpg",
                    "https://i.wifegeek.com/200426/663181fe.jpg",
                    "https://i.wifegeek.com/200426/2d110780.jpg",
                    "https://i.wifegeek.com/200426/e73cd3fa.jpg",
                    "https://i.wifegeek.com/200426/15160d6e.jpg",
                    "https://i.wifegeek.com/200426/d0c881ae.jpg",
                    "https://i.wifegeek.com/200426/a154fc3d.jpg",
                    "https://i.wifegeek.com/200426/71d3aa60.jpg",
                    "https://i.wifegeek.com/200426/d17ce9a0.jpg",
                    "https://i.wifegeek.com/200426/7c4deca9.jpg",
                    "https://i.wifegeek.com/200426/64672676.jpg",
                    "https://i.wifegeek.com/200426/de6ab9c6.jpg",
                    "https://i.wifegeek.com/200426/d8bcb6a7.jpg",
                    "https://i.wifegeek.com/200426/4085d03b.jpg",
                    "https://i.wifegeek.com/200426/177ef44c.jpg",
                    "https://i.wifegeek.com/200426/d74d9040.jpg",
                    "https://i.wifegeek.com/200426/81e24a47.jpg",
                    "https://i.wifegeek.com/200426/43e2e8bb.jpg"

                ],
            }
        },

    }

</script>

Default config

 <lightbox :items="images"></lightbox>

Cells config

The default will automatically display from 1 to 5 images, but if you have more than 5 and want to display only 2, 3 or 4 you can configure the cells prop:

<lightbox cells="4" :items="images"></lightbox>

<div class="row mt-30">
  <div class="col-6">
    <lightbox css="h-200 h-lg-250" :items="images" :cells="3"></lightbox>
  </div>
  <div class="col-6">
    <lightbox css="h-200 h-lg-250" :items="images" :cells="3"></lightbox>
  </div>
</div>

<lightbox cells="2" :items="images"></lightbox>

Demo

☞ Lightbox Demo

Source Code

☞ https://github.com/Morioh-Lab/v-lightbox

#vue #vuejs #lightbox #slideshow #gallery