How to create a Vue.js lightbox 📸

Create a Vue Js lightbox…

Complete project code here. To learn how to create keep on reading…

Let’s think about what data we will be passing to the lightbox component. We need thumbnails, larger images for the lightbox, the image paths and image captions.

For this, we should set up a lightbox object that holds all of this data inside our app.vue (any parent page).

Create the data in parent page for lightbox inside app.vue

We can see above the data for the lightbox, now we need to create the lightbox component so we can pass this data in.

We can now pass all of this data into the LightBox component which we will create further down:

pass the data to the component inside app.vue

We can see above the data for the lightbox, now we need to create the lightbox component so we can pass this data in.

Create the lightbox component template basic code inside lightbox.vue

For the above

The click on the first image is the click on the thumbnail, here we get the current index of the image. From this click, we can get the index number of the thumbnail.

click method on the thumbnail inside lightbox.vue

lightboxEffect(curr) {
this.currentImage = curr;
this.bg = !this.bg;
}

Above we also toggle data bg, this shows the whole lightbox gallery with the background.

Why do we need the index?

To pass into the image.large inside app.vue

lightbox: {
        images: {
          thumbnails: ["1.jpg", "2.jpg", "3.jpg"],
          large: ["1.jpg", "2.jpg", "3.jpg"]
       },

From the click of the thumbnail, we have the current index number, now we can store this data.

Now we can create the large imag path based on the current thumbnail.

this is our lightbox image inside lightbox.vue

<img :src="largePath + [currentImage + 1] +'.jpg'" class="light-box__container__img">

Now we have a current image and index being be used, we can easily create a slider. By checking the number of images in the array and creating next() prev() methods.

next/prev lightbox methods

next() {
if (this.currentImage < this.largeImages.length - 1) {
 this.currentImage++;
} else {
 this.currentImage = 0;
}
},
prev() {
 if (this.currentImage > 0) {
  this.currentImage--;
} else {
 this.currentImage = this.largeImages.length - 1;
}
}

We also have the option to have captions.

inside app.vue

lightbox: {
images: {
thumbnails: ["1.jpg", "2.jpg", "3.jpg"],
large: ["1.jpg", "2.jpg", "3.jpg"]
},
captions: ["surfing", "swimming", "running"],
thumbnailsPath: "/img/waves/thumbnails/",
largePath: "/img/waves/large/"
},

Captions should match the number of images, we can also configure to display or not by having a setting inside the lightbox component and using v-if on the caption div. The same for the image count this can be configured inside the lightbox.vue set both to false to hide, the default is to show.

showing option for caption and image counts inside lightbox.vue

<div class="light-box__caption" v-if="caption">
<p v-if="captions[currentImage]">{{ captions[currentImage]}}</p>
</div>
<p class="light-box__count" v-if="count">
{{currentImage + 1 }}/
<span>{{ thumbnails.length}}</span>
</p>

showing data for caption and image counts inside lightbox.vue

data() {
 return {
  bg: false,
  currentImage: 0,
  count: true,
  caption: true
 };
}

The full working version below, feel free to download the source code here.

app.vue file complete

lightbox.vue file complete