Are you looking for a light box image thumbnail gallery to display multiple images with navigation and lightbox popup. you can click on any image and it’ll display big size of image in lightbox popup. The lightbox plugin is easy to integrate on your website just follow the below steps. A lightbox module for Bootstrap that supports images, YouTube videos, and galleries – built around Bootstrap’s Modal plugin.

Libraries
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script> |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>
HTML
<div class="container">
<div class="row">
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid rounded">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
<img src="https://unsplash.it/600.jpg?image=252" class="img-fluid rounded">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
<img src="https://unsplash.it/600.jpg?image=253" class="img-fluid rounded">
</a>
</div>
<div class="row">
<a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
<img src="https://unsplash.it/600.jpg?image=254" class="img-fluid rounded">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
<img src="https://unsplash.it/600.jpg?image=255" class="img-fluid rounded">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="gallery" class="col-md-4">
<img src="https://unsplash.it/600.jpg?image=256" class="img-fluid rounded">
</a>
</div>
</div> |
<div class="container"> <div class="row"> <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="gallery" class="col-md-4"> <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid rounded"> </a> <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="gallery" class="col-md-4"> <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid rounded"> </a> <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="gallery" class="col-md-4"> <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid rounded"> </a> </div> <div class="row"> <a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="gallery" class="col-md-4"> <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid rounded"> </a> <a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="gallery" class="col-md-4"> <img src="https://unsplash.it/600.jpg?image=255" class="img-fluid rounded"> </a> <a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="gallery" class="col-md-4"> <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid rounded"> </a> </div> </div>
CSS
JS
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
}); |
$(document).on("click", '[data-toggle="lightbox"]', function(event) { event.preventDefault(); $(this).ekkoLightbox(); });
Options
Name | type | default | description | data-* |
leftArrow / rightArrow | html | ❮ / ❯ | HTML for the arrows | |
wrapping | boolean | true | Whether the gallery should loop or not | |
width / height | integer | | Force the width / height | data-(width|height)="[0-9]+" |
maxWidth / maxHeight | integer | 9999 | Limit the container width / height | data-(max-width|max-height)="[0-9]+" |
alwaysShowClose | boolean | false | Always show the close button, even if no title is present | |
loadingMessage | html | A fancy loader | HTML injected for loading | |
showArrows | bool | true | Disable the navigation overlay | |
See live demo and download source code.
This awesome script developed by nsom. Visit their official repository for more information and follow for future updates.
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
Related