This time, we’ll thoroughly explain how to use the classic Lightbox2 to display images in a popup, from the basics to more advanced techniques.
You may already be familiar with Lightbox as it’s quite popular, but since we haven’t introduced it before, here it is.
Basic CSS Setup
First, we’ll set up the basic CSS to use Lightbox2. This section defines the styles applied to thumbnail images. The key point here is balancing visual appeal with usability.
Load the lightbox.min.css file. The following is the CSS description for the thumbnails (a[data-lightbox] img).
<style>
body {
margin: 20px 10px;
padding: 0;
font-size: 18px;
text-align: center;
}
h1{
text-align: center;
font-size: 22px;
line-height: 2em;
padding-bottom: 20px;
}
a[data-lightbox] img {
width: 150px;
}
</style>
<link rel="stylesheet" href="./css/lightbox.min.css">
Image Setup with HTML
Next, we’ll use HTML to set up the thumbnails and the images to be displayed in the popup (1–4.jpg). It’s important to correctly set the links and data attributes for each image. This ensures that the correct image is displayed when a user clicks a thumbnail.
Set the href in the anchor (a) tag to the image you want to display in the popup, along with data-lightbox=”thumbnail group name” and data-title=”caption”. Please modify these values as needed.
<h1>Display image popups using Lightbox. Click the thumbnails below.</h1>
<div>
<a href="1.jpg" data-lightbox="lbox" data-title="Image 1"><img src="1.jpg"></a>
<a href="2.jpg" data-lightbox="lbox" data-title="Image 2"><img src="2.jpg"></a>
<a href="3.jpg" data-lightbox="lbox" data-title="Image 3"><img src="3.jpg"></a>
<a href="4.jpg" data-lightbox="lbox" data-title="Image 4"><img src="4.jpg"></a>
</div>
JavaScript Setup
Finally, we’ll configure the JavaScript for Lightbox2. Simply load the lightbox-plus-jquery.min.js file. This determines how the popup behaves when a thumbnail is clicked and how images are displayed. While simple, this step greatly impacts user experience.
<script src="./js/lightbox-plus-jquery.min.js"></script>
Demo Page for Displaying Image Popups with Lightbox
In addition to theory, it’s important to see how it actually looks. The demo page below showcases an example of the image popup using Lightbox2 settings explained above.
Demo page displaying image popups with Lightbox
Reference Resources
You can find more information about Lightbox2 on the official website. It offers detailed explanations on advanced customization and various options.
Lightbox2
Conclusion
Lightbox2 is a widely used library known for its simplicity and elegance. Through this article, you’ve learned everything from the basic usage to more advanced settings. Try incorporating it into your website to provide a memorable visual experience for your visitors.
* If you reuse this content, please do so at your own discretion.
Do not reuse the Google Analytics tag in the head tag of the demo page.
