Click on one of the image above to open a photo gallery in a lightbox.
This effect was made with GLightbox "A touchable Pure Javascript lightbox with mobile and video support".
Step 1
As I use the same lib as my other tutorial How to add a lightbox effect to your images, just visit the same page to see how to install the files.
Step 2
Add an image and assign a new class to it. Example: .lightboxgallery1
Note that it doesn't need to be an image. You can do the same effect with any element (text, icon...)
Step 3
In a Code Block, add this javascript, with the links of each image of your gallery:
const myGallery = GLightbox({
selector: '.lightboxgallery1',
elements: [{
'href': '/wp-content/uploads/2020/01/photo1.jpg',
'type': 'image',
},
{
'href': '/wp-content/uploads/2020/01/photo2.jpg',
'type': 'image',
},
{
'href': '/wp-content/uploads/2020/01/photo3.jpg',
'type': 'image',
},
{
'href': '/wp-content/uploads/2020/01/photo4.jpg',
'type': 'image',
},
{
'href': '/wp-content/uploads/2020/01/photo5.jpg',
'type': 'image',
},
],
});That's it. It couldn't be easier :)
Options
Don't forget that this library has some pretty sweet features.
You can add a description with each images, you can play videos inside the lightbox, you can change the opening effect and so on...
Example with the second lightbox at the top of this page, the code looks like this:
const myGallery2 = GLightbox({
selector: '.lightboxgallery2',
descPosition: 'right',
slideEffect: 'zoom',
elements: [{
'href': '/wp-content/uploads/2020/01/photo1.jpg',
'type': 'image',
'title': 'A Cool title',
'description': 'My super long description'
},
{
'href': '/wp-content/uploads/2020/01/photo2.jpg',
'type': 'image',
},
{
'href': '/wp-content/uploads/2020/01/photo3.jpg',
'type': 'image',
},
{
'href': '/wp-content/uploads/2020/01/photo4.jpg',
'type': 'image',
}
],
});More info about his awesome library: https://biati-digital.github.io/glightbox/