A modal gallery that slides images gives a strong visual impact to your website. However, beginners may find it difficult to set up.
This time, we will explain in an easy-to-understand manner how to use “lightgallery.js,” which even beginners can handle easily, to display multiple images in a modal.
The key point is that it does not require jQuery, making it a lightweight and efficient slide gallery.
CSS for setting up modal display with lightgallery.js
First, to display images in a modal, you need to load the CSS provided by lightgallery.js (lightgallery.min.css).
The following code allows you to create a thumbnail display area (#default) while setting styles that match your web page.
<style type="text/css">
body{
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
padding: 0;
margin: 0;
line-height: 1.8em;
}
h1{
font-size:16px;
text-align:center;
font-weight:normal;
padding:10px 0;
position: relative;
}
#default{
text-align: center;
}
</style>
<!-- lightgallery.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.2.0/css/lightgallery.min.css" />
This style adjusts text fonts and appearance while establishing the basic design for the modal gallery.
Build a thumbnail display area with HTML
Next, let’s create a thumbnail display area using HTML code. Here, we will prepare three thumbnail images, each with a link, so that clicking on the image will display a larger version in a modal.
<h1>Click on the thumbnail to display the slide gallery images in a modal</h1>
<div id="default">
<a href="https://dad-union.com/wp-content/uploads/2021/07/technology-1283624_1280-768x432.jpg"><img src="https://dad-union.com/wp-content/uploads/2021/07/technology-1283624_1280-768x432.jpg" width="300" height="210" /></a>
<a href="https://dad-union.com/wp-content/uploads/2021/09/cap210928-768x512.jpg"><img src="https://dad-union.com/wp-content/uploads/2021/09/cap210928-768x512.jpg" width="300" height="210" /></a>
<a href="https://dad-union.com/wp-content/uploads/2021/08/capwp210804-300x300.jpg"><img src="https://dad-union.com/wp-content/uploads/2021/08/capwp210804-300x300.jpg" width="300" height="210" /></a>
</div>
In this HTML structure, clicking on a thumbnail will display the image in a slide format because lightgallery.js is set up.
How to activate lightgallery.js with JavaScript
Once you have completed the preparations, you can activate lightgallery.js using JavaScript. Use the `lightGallery` function to enable the modal display for the specified ID.
You set `lightGallery(document.getElementById(“id of the thumbnail display area”))`. In this case, images within the thumbnail display area with id=”default” will be displayed in a modal.
<!-- lightgallery.js JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.2.0/js/lightgallery.min.js"></script>
<script type="text/javascript">
lightGallery(document.getElementById("default"));
</script>
By adding this code, the modal functionality of lightgallery.js will be enabled for the specified thumbnail area, allowing you to click and view the images as slides.
Demo page of lightgallery.js showing multiple slide images in a modal without jQuery
If you want to see an actual demo, you can access the lightgallery.js demo page from the following link. Even beginners can visually check how it works, which makes it useful for reference.
Demo of lightgallery.js showing multiple slide images in a modal without jQuery
Source of lightgallery.js
Here is the source link.
lightgallery.js
Summary
With lightgallery.js, you can easily implement a slide gallery that displays multiple images in a modal. Additionally, since it does not require jQuery, it is less likely to affect your site’s loading speed. If you need an image gallery, be sure to give lightgallery.js a try.
※ Please use this information at your own risk.
Do not copy the Google Analytics tag found in the head section of the demo page.
