<img src="/img/vue-lightbox.jpg" alt="Vue Lightbox Gallery" title="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:-
<ul>
<li>Gallery title</li>
<li>Image</li>
<li>Image thumbnail</li>
<li>Image caption</li>
</ul>
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 <a href="https://github.com/matt-harris/vue-lightbox">Lightbox gallery on GitHub</a>.
<a href="http://vue-lightbox.surge.sh">Take a look!</a>
<h2>Technical Sheet</h2>
Technologies &#x26; methodologies I used on this project.
<ul>
<li>Vue.js</li>
<li>Javascript</li>
<li>API's</li>
<li>Bulma CSS Framework</li>
</ul>

Vue Lightbox Gallery

Technical Sheet

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

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