Skip to content

Setting Lightbox

Image lightbox

The plugin that used for the lightbox is glightbox. You can set the setting in script.js

/* gallery  popup script */
const lightbox = GLightbox({
    touchNavigation: true,
    loop: true,
    autoplayVideos: true,
    selector: '*[data-gallery]',
    zoomable: false,
    height: 'auto'
});

Those script is telling the lightbox to trigger when the element with data-gallery is clicked. So the HTML code will be like this:

<a href="img/background/1.jpg" data-gallery="gallery" data-width="90%" data-title="Enjoy the ride."
    data-description="Riders from all over country have registered for the inaugural event.">
    <img src="img/background/1.jpg" class="gallery_popup" alt="gallery" />
</a>

Youtube lightbox

For video/youtube lightbox, this is the script.js code

/* video  popup script */
const popupVideo = GLightbox({
    touchNavigation: true,
    loop: true,
    autoplayVideos: true,
    selector: '.popup_video',
    zoomable: false,
    height: 'auto',
    draggable: false,
    skin: 'body_popupvideo'
});

And those script will trigger video popup when the class popup_video is clicked. Here is the example HTML code for that:

<a href="https://www.youtube.com/watch?v=H55W1NhAbQo" class="popup_video">
    <i class="fa fa-play"></i>
</a>

For more detail and setting for this plugin, you can see in this plugin site

Back to top