lightgallery
Advanced tools
JQuery lightGallery is a lightweight jQuery lightbox gallery for displaying image and video gallery
You can Install lightgallery using the Bower package manager.
$ bower install lightgallery
You can also find lightgallery on npm.
$ npm install lightgallery
add the Following code to the <head> of your document.
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/lightGallery.js"></script>
// Do not include both lightGallery.js and lightGallery.min.js
Create ul and li elements and add the path of the image or video inside the data-src attributes which you wish to open within the lightGallery.
<ul id="lightGallery">
<li data-src="img/img1.jpg">
<img src="img/thumb1.jpg" />
</li>
<li data-src="img/img2.jpg">
<img src="img/thumb2.jpg" />
</li>
...
</ul>
<!-- the image/video source for mobile devices -->
<li data-responsive-src="mobile1.jpg" > </li>
<!-- the large version of your image/video -->
<li data-src="img1.jpg" > </li>
<!-- Custom html5 video html (will be inserted same like youtube vimeo videos) -->
<li data-html="video html" /> </li>
<!-- id or class name of an object(div) which contain your html. -->
<li data-html="#inlineHtml" > </li>
<!-- Custom html (Caption description comments ...) -->
<li data-sub-html="<h3>My caption</h3><p>My description..</p>" /> </li>
<!-- id or class name of an object(div) which contain your html. -->
<li data-sub-html="#inlineSubHtml" > </li>
<!-- If true your src will be displayed in an iframe.. -->
<li data-iframe="true" data-src="http://www.w3schools.com/" > </li>
<script type="text/javascript">
$(document).ready(function() {
$("#lightGallery").lightGallery();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightGallery").lightGallery({
mode: 'slide',
useCSS: true,
cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
easing: 'linear', //'for jquery animation',//
speed: 600,
addClass: '',
closable: true,
loop: false,
auto: false,
pause: 4000,
escKey: true,
controls: true,
hideControlOnEnd: false,
preload: 1, //number of preload slides. will exicute only after the current slide is fully loaded. ex:// you clicked on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded.. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
showAfterLoad: true,
selector: null,
index: false,
lang: {
allPhotos: 'All photos'
},
counter: false,
exThumbImage: false,
thumbnail: true,
showThumbByDefault:false,
animateThumb: true,
currentPagerPosition: 'middle',
thumbWidth: 100,
thumbMargin: 5,
mobileSrc: false,
mobileSrcMaxWidth: 640,
swipeThreshold: 50,
enableTouch: true,
enableDrag: true,
vimeoColor: 'CCCCCC',
videoAutoplay: true,
videoMaxWidth: '855px',
dynamic: false,
dynamicEl: [],
// Callbacks el = current plugin
onOpen : function(el) {}, // Executes immediately after the gallery is loaded.
onSlideBefore : function(el) {}, // Executes immediately before each transition.
onSlideAfter : function(el) {}, // Executes immediately after each transition.
onSlideNext : function(el) {}, // Executes immediately before each "Next" transition.
onSlidePrev : function(el) {}, // Executes immediately before each "Prev" transition.
onBeforeClose : function(el) {}, // Executes immediately before the start of the close process.
onCloseAfter : function(el) {}, // Executes immediately once lightGallery is closed.
});
});
</script>
In-depth explanation of settings can be found on a separate page.
<script type="text/javascript">
$(document).ready(function() {
var gallery = $("#lightGallery").lightGallery();
gallery.isActive(); //check active state of lightGallery;
gallery.destroy(); //to destroy the plugin on the given element.
});
</script>
FAQs
lightGallery is a feature-rich, modular JavaScript gallery plugin for building beautiful image and video galleries for the web and the mobile
The npm package lightgallery receives a total of 64,910 weekly downloads. As such, lightgallery popularity was classified as popular.
We found that lightgallery demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.