jQuery Script For Lightbox Display Of Gallery

A lightweight jQuery script for creating a gallery lightbox where your images will be opened in a modal popup with the ability to navigate between images by clicking next/prev buttons.

Fully responsive & flexible that automatically and smoothly adjusts the height/width of the image/lightbox depending on the screen size.

How to use it:

1. Load the latest Font Awesome iconic font for next/prev/close buttons.

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" 
      integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" 
      crossorigin="anonymous"
>

2. Load the main stylesheet in the head section of the webpage.

<link rel="stylesheet" href="assets/css/main.css">

3. Create the HTML for the gallery. Optionally, you can also specify the image captions in the data-text attribute that will be displayed at the bottom of the image when the lightbox is opened.

<div class="gallery">
  <!-- need a div for contains img tag -->
  <div class="galleryItem">
    <!-- just need a img tag. if you are want a text add data-text-->
    <img src="1.jpeg">
  </div>
  <div class="galleryItem card">
    <img src="2.jpeg" data-text="Image Caption2">
  </div>
  <div class="galleryItem card">
    <img src="3.jpeg" data-text="Image Caption3">
  </div>
  <div class="galleryItem card">
    <img src="4.jpeg" data-text="Image Caption4">
  </div>
  <div class="galleryItem card">
    <img src="5.jpeg" data-text="Image Caption5">
  </div>
  <div class="galleryItem card">
    <img src="6.jpeg" data-text="Image Caption6">
  </div>
  <div class="galleryItem card">
    <img src="7.jpeg" data-text="Image Caption7">
  </div>
  <div class="galleryItem card">
    <img src="8.jpeg" data-text="Image Caption8">
  </div>
  <div class="galleryItem card">
    <img src="9.jpeg" data-text="Image Caption9">
  </div>
  ...
</div>

4. Load jQuery library and the main JavaScript right before the closing body. Done.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="assets/js/main.js"></script>

---

This awesome jQuery plugin is developed by ibyzt. For more Advanced Usages, please check the demo page or visit the official website.