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> |
HTML
CSS
JS
$(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.
