Configuring the Lightbox

The lightbox plugin used for displaying images is glightbox. You can customize its settings in the script.js file.

// For Images
const lightboxImg = GLightbox({
  touchNavigation: true,
  loop: true,
  selector: ".popup_img",
  zoomable: false,
  height: "auto",
  draggable: false,
});

In the provided code snippet, the lightboxImg variable initializes the glightbox plugin with specific settings. You can modify these settings according to your requirements. For example, the selector property determines which elements trigger the lightbox effect when clicked, and the zoomable property controls whether users can zoom in on the images.

Here is the HTML code for the basic usage of the image popup:

<a class="img-fluid popup_img" href="img/blog/2.jpg">
  <img src="img/bg/2.jpg" class="gallery_popup" alt="gallery" />
</a>

If you want to add a gallery for the image popup, you can include the data-gallery attribute in the HTML code. Here is an example code snippet:

<a
  class="img-fluid popup_img"
  href="img/blog/2.jpg"
  data-gallery="bgallery"
  data-width="90%"
>
  <img src="img/bg/2.jpg" class="gallery_popup" alt="gallery" />
</a>

In the example code, the data-gallery attribute is set to "bgallery" to create a gallery group. Additionally, the data-width attribute is used to specify the width of the image popup, which is set to "90%". Feel free to adjust these values according to your specific needs.

To display YouTube videos in a lightbox, you can use the following code in your script.js file:

// For Videos
const lightbox = GLightbox({
  touchNavigation: true,
  loop: true,
  autoplayVideos: true,
  selector: ".popup_video",
  zoomable: false,
  height: "auto",
  draggable: false,
});

This code initializes the glightbox plugin with specific settings for video lightbox functionality. When an element with the class popup_video is clicked, it will trigger the video popup.

Here is an example HTML code snippet for using the YouTube video lightbox:

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

In the example code, the href attribute of the <a> element contains the YouTube video URL. When clicked, the video will open in a lightbox.

For more detailed information and additional settings for the glightbox plugin, you can refer to the plugin's official documentation.

Configuring the Lightbox

Image Lightbox

YouTube Lightbox