https://github.com/sachinchoolur/lightGallery
https://www.lightgalleryjs.com/demos/thumbnails/
Animated thumbnails
HTML Structure
<div id="animated-thumbnails">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
JavaScript
lightGallery(document.getElementById('animated-thumbnails-gallery'), {
thumbnail: true,
});
Static thumbnails
HTML Structure
<div id="animated-thumbnails-gallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
JavaScript
lightGallery(document.getElementById('static-thumbnails'), {
animateThumb: false,
zoomFromOrigin: false,
allowMediaOverlap: true,
toggleThumb: true,
});
Inline Gallery
HTML
<div id="inline-gallery-container" class="inline-gallery-container"></div>
JavaScript
const lgContainer = document.getElementById('inline-gallery-container');
const inlineGallery = lightGallery(lgContainer, {
container: lgContainer,
dynamic: true,
// Turn off hash plugin in case if you are using it
// as we don't want to change the url on slide change
hash: false,
// Do not allow users to close the gallery
closable: false,
// Add maximize icon to enlarge the gallery
showMaximizeIcon: true,
// Append caption inside the slide item
// to apply some animation for the captions (Optional)
appendSubHtmlTo: '.lg-item',
// Delay slide transition to complete captions animations
// before navigating to different slides (Optional)
// You can find caption animation demo on the captions demo page
slideDelay: 400,
dynamicEl: [
{
src: 'img/img1.jpg',
thumb: 'img/thumb1.jpg',
subHtml: `<div class="lightGallery-captions">
<h4>Caption 1</h4>
<p>Description of the slide 1</p>
</div>`,
},
{
src: 'img/img2.jpg',
thumb: 'img/thumb2.jpg',
subHtml: `<div class="lightGallery-captions">
<h4>Caption 2</h4>
<p>Description of the slide 2</p>
</div>`,
},
...
],
});
// Since we are using dynamic mode, we need to programmatically open lightGallery
inlineGallery.openGallery();
|
Download
