v-lightbox is a component of Vue that allows the first x (1-5) images of your gallery to be displayed in a retina view as you saw in the Facebook timeline. Clicking on the thumbnail will display all the images in full-screen mode, and a modal popup that is navigable just like a gallery view.

responsive vuejs lightbox image gallery, javascript image gallery with thumbnails, vue lightbox photo grid, vue3 image gallery

Simple Single Image Lightbox Popup Jquery Plugin

How to make use of it:

Install and download:

# NPM
$ npm i @morioh/v-lightbox --save

1. Import the necessary resources into your application.

import Vue from 'vue'
import Lightbox from '@morioh/v-lightbox'
// stylesheet
import '@morioh/v-lightbox/dist/lightbox.css';

2. Add the Lightbox component to the template.

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

3. Insert a list of photos in the photo grid.

export default {
  data() {
    return {
      images: [
        "1.jpg",
        "2.jpg",
        "3.jpg",
        // more images here
      ],
    }
  }
}

4. All props available to customize the photo grid and simplified box.

items: {
  type: Array,
  default: () => { return [] }
},
css: {
  type: String,
  default: () => 'h-250 h-md-400 h-lg-600'
},
cells: {
  type: Number,
  default: () => 5
}

Facebook Style Photo Grid & Image Lightbox Component, v-lightbox Plugin/Github

See Demo And Download

Official Website(Morioh-Lab): Click Here

This superior jQuery/javascript plugin is developed by Morioh-Lab. For extra Advanced usage, please go to the official website.