Lightbox is the preferred jQuery plugin for images, galleries and media for webpages as it renders them in an elegant overlay. It improves the UI/UX of the website because the images can be viewed without leaving the page.
Following the below steps, you will learn how to set up jQuery Light Box on your website.
Reference site: Click Here
Step 1: Include jQuery and Lightbox Plugin:
Before using the Lightbox, you need to include jQuery and the Lightbox plugin files for CSS & JavaScript in your project. Or, you can also download the files and host them locally.
Step 2: How to use a CDN:
Add the following lines inside your <head> section:
<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Lightbox CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<!-- Lightbox JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
Step 3: Add Image Gallery:
Now, create an image gallery with anchor (<a>) tags linking to larger images. The data-lightbox attribute is used to group images.
<div class="gallery">
<a href="images/photo1_large.jpg" data-lightbox="mygallery">
<img src="images/photo1_thumb.jpg" alt="Photo 1">
</a>
<a href="images/photo2_large.jpg" data-lightbox="mygallery">
<img src="images/photo2_thumb.jpg" alt="Photo 2">
</a>
<a href="images/photo3_large.jpg" data-lightbox="mygallery">
<img src="images/photo3_thumb.jpg" alt="Photo 3">
</a>
</div>
Step 4: Customize Lightbox Settings:
You can configure the Lightbox plugin by adding JavaScript settings. Place this script inside your <script> tags.
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true,
'albumLabel': "Image %1 of %2"
});
</script>
Explanation:
- ‘resizeDuration’: Time (in milliseconds) for the transition effect.
- ‘wrapAround’: Allows looping through images in the gallery.
- ‘albumLabel’: Customizes the label for the images in the gallery.
Step 5: Style the Gallery:
You can add some CSS to style the gallery and make it look better.
.gallery img {
width: 150px;
height: auto;
margin: 5px;
border-radius: 5px;
transition: transform 0.3s;
}
.gallery img:hover {
transform: scale(1.1);
}
Step 6: Test Your Lightbox:
Save your HTML file and open it in a browser. Click on any thumbnail image, and the Lightbox effect should work smoothly.
Conclusion
Adding jQuery Lightbox to your website offers an easy and powerful way to improve how you show media. It gives users a clean and friendly way to look at pictures and galleries without making the page messy.
