Vue Lightbox Gallery

Vue Lightbox Gallery

This time in my quest of Vue.js knowledge I decided to build a lightbox gallery component. It started off as an image gallery with the options via props for:-

  • Gallery title
  • Image
  • Image thumbnail
  • Image caption

Then "...It would be cool to add YouTube videos as well". Also "...can we automatically grab a video thumbnail?".

This was fairly straight forward. I added a 'type' property and created the embed iframe and thumbnail with the YouTube video id.

And then finally "...what about Vimeo videos and thumbnails as well?".

This was a little more complex as I had to fetch the thumbnails via the oembed API and Vimeo video id.

So all in all an excellent Vue project to get stuck into and I'm very happy with the result.

You can view Lightbox gallery on GitHub.

Take a look!

Technical Sheet

Technologies & methodologies I used on this project.

  • Vue.js
  • Javascript
  • API's
  • Bulma CSS Framework

Interested in doing a project together?
Want to know more about what I do?

Lets chat