Here is the first look of lightgallery1.2. Watch this space i will be releasing soon!.
JQuery lightGallery is a lightweight jQuery lightbox gallery for displaying image and video gallery
- Animated thumbnails.
- Local html5 video support
- Custom Html inseted of caption and description.
- Custom selector property insted of just child.
- destroy() method.
- isActive() to check gallery active state.
- iframe support.
- showAfterLoad settings to show content once it is fully loaded
- Callback parameter(plugin).
- HTML support. inline and external.
- currentPagerPosition setting to set Position of selected thumbnail.
- Show Thumbnail by default option.
- Added support for youtube player parameters to modify player appearance and functionality
- Responsive layout.
- Touch support for mobile devices.
- Animated thumbnails.
- CSS transitions with jQuery fallback
- Youtube Vimeo Video and html5 videos Support
- Slide and Fade Effects
- Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone.
- HTML iframe support.
- Multiple instances on one page
- Easily customizable via CSS and Settings
- Lightweight (7kb) (minified)
- Separate images for mobile devices
- Can be extended with callbacks
- Smart image preloading and code optimization
- Keyboard Navigation for desktop
- Font icon support
You can Install lightgallery using the Bower package manager.
$ bower install lightgalleryYou can also find lightgallery on npm.
$ npm install lightgalleryAdd 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.jsCreate 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="light-gallery"> <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="#inline-html" > </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="#inline-sub-html" > </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() { $("#light-gallery").lightGallery(); }); </script> <script type="text/javascript"> $(document).ready(function() { $("#light-gallery").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', youtubePlayerParams: false, // See: https://developers.google.com/youtube/player_parameters, 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 = $("#light-gallery").lightGallery(); gallery.isActive(); //check active state of lightGallery; gallery.destroy(); //to destroy the plugin on the given element. }); </script>If you think you might have found a bug or if you have a feature suggestion please use github issue tracker. Also please try to add a jsfiddle that demonstrates your problem
If you need any help with implementing lightGallery in your project or if have you any personal support requests i requset you to please use stackoverflow instead of github issue tracker
If you like lightGallery support me by staring this repository or tweet about this project. @sachinchoolur