jQuery Script For Lightbox Display Of Gallery
File Size: | 5.97 KB |
---|---|
Views Total: | 3942 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.