Welcome folks today in this blog post we will be using the lightgallery.js
example to create responsive
lightbox image gallery in vue.js
with editor and controls in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js LightGallery.js Example in Browser</title> <link rel="stylesheet" href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css"> </head> <style> #lightgallery a img{ display: flex; float:left; width:100px; height:100px; border-radius: 50%; } </style> <body> <div id="app"> <div id="lightgallery"> <a href="https://procodestore.com/wp-content/uploads/2021/03/164508084_271381191136191_654097929788476286_n.jpg"> <img src="https://procodestore.com/wp-content/uploads/2021/03/164508084_271381191136191_654097929788476286_n.jpg" /> </a> <a href="https://plus.unsplash.com/premium_photo-1670249419881-b115ba63924a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y29tcHV0ZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"> <img src="https://plus.unsplash.com/premium_photo-1670249419881-b115ba63924a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y29tcHV0ZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" /> </a> <a href="https://images.unsplash.com/photo-1547394765-185e1e68f34e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Y29tcHV0ZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=600"> <img src="https://images.unsplash.com/photo-1547394765-185e1e68f34e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Y29tcHV0ZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=600" /> </a> <a href="https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGNvbXB1dGVyc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"> <img src="https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGNvbXB1dGVyc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" /> </a> </div> </div> </body> <script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script> <script src="https://cdn.rawgit.com/sachinchoolur/lg-thumbnail.js/master/dist/lg-thumbnail.js"></script> <script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script> <script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script> <script src="https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js"></script> <script src="https://cdn.rawgit.com/sachinchoolur/lg-rotate.js/master/dist/lg-rotate.js"></script> <script src="https://cdn.rawgit.com/sachinchoolur/lg-video.js/master/dist/lg-video.js"></script> <script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> </html> |
As you can see we are including all the libraries
cdn including the vue.js
and the lightgallery.js
we are including all the plugins that this library supports in the above code we have a series of images
inside the div to be displayed inside the responsive gallery. And we applied some custom css to the images
so that it looked good inside the browser
Vue.js Code
Now we need to add the vue.js
code inside the script
tag as shown below to initialize the gallery
and pass all the plugins as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
new Vue({ el: '#app', data: { }, mounted: function () { Vue.nextTick(function () { //console.log(lightGallery) lightGallery(document.getElementById('lightgallery'), { thumbnail: true, animateThumb: true, counter: true, download: true, share:true, rotate:true, video:true, autoplay:true }); }) } }) |