Lightgallery.js only uses CSS to resize pictures and videos. It will be very flexible, and much faster than using the JavaScript approach.
Light gallery JS supports touch and swipe navigation on touchscreen devices, as well as mouse drag for desktop devices. This allows users to move between slides either by dragging or dragging with the mouse.
Browser support
light gallery supports all major browsers including IE 9 and above.
Main features
- Fully responsive.
- Modular architecture with built-in plugins.
- Touch support for mobile devices.
- Mouse drag supports for desktops.
- Double-click/Double-tap to see the actual size of the image.
- Animated thumbnails.
- Social media sharing.
- YouTube, Vimeo, Dailymotion, VK, and HTML5 video support.
- 20+ Hardware-Accelerated CSS3 transitions.
- Dynamic mode.
- Full-screen support.
- Supports zoom.
- Browser history API.
- Responsive images.
- HTML iframe support.
- Multiple instances on one page.
- Easily customizable via CSS (SCSS) and Settings.
- Smart image preloading and code optimization.
- Keyboard Navigation for desktop.
- Font icon support.
- Rotate, and flip images.
- And many more.
Must Read: Responsive Image Gallery & Lightbox Plugin using Bootstrap
How to make use of it:
Installation:
npm install lightgallery.js
1. First of all, add lightgallery.css in the <head> of your document.
<head>
<link rel="stylesheet" href="css/lightgallery.css">
</head>2. Then include lightgallery.min.js in your document. If you want to include any lightgallery plugin, you can include it after lightgallery.min.js.
<body>
...
<script src="js/lightgallery.min.js"></script>
<!-- lightgallery plugins -->
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
</body>3. Lightgallery also supports AMD, CommonJS, and ES6 modules. When using AMD, be sure to load lightgallery.js before the light gallery modules.
require(['./lightgallery.js'], function() {
require(["./lg-zoom.js", "./lg-thumbnail.js"], function(){
lightGallery(document.getElementById('lightgallery'));
});
});4. The markup:
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg">
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg">
</a>
...
</div>5 Finally, you need to start the gallery by adding the following code.
<script>
lightGallery(document.getElementById('lightgallery'));
</script>Demos
Must Read: A simple Pure CSS Image Gallery lightbox | CSSBox
- Thumbnails
- Gallery with animated thumbnails
- Gallery without animated thumbnails
- YouTube, Vimeo Video Gallery
- YouTube, Vimeo Video Gallery
- Video Gallery Without Poster
- Video Player Parameters
- Automatically load thumbnails
- HTML5 Video Gallery
- HTML5 Video Gallery
- HTML5 video gallery with videojs
- Transitions
- Dynamic
- Events
- Methods
- Iframe. External websites, Google map, etc.
- Captions
- Responsive images
- Responsive images
- Responsive images with HTML5 srcset
- Gallery with fixed size
- HTML Markup
- Facebook comments
- Easing
- History/hash plugin
- Social media share
Built-in modules
- Thumbnail
- Autoplay
- Video
- Fullscreen
- Pager
- Zoom
- Hash
- Share
- Rotate
See Demo And Download
Official Website(sachinchoolur): Click Here
This superior jQuery/javascript plugin is developed by sachinchoolur. For extra Advanced Usage, please go to the official website.
