Responsive & Touch-Friendly jQuery Gallery Lightbox Plugin - lightGallery

File Size: | 2.7 MB |
---|---|
Views Total: | |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
lightGallery is a lightweight, elegant, responsive, mobile-friendly jQuery plugin for displaying an image/video gallery in a fullscreen lightbox with CSS3 transition effects.
More features:
- 2 transition animations: slide or fade.
- Auto play when images loaded.
- Infinite looping.
- Supports youtube & vimeo videos, not just images.
- Touch swipe support.
- Image captions & descriptions support.
- Arrows, thumbnails and keyboard navigation.
- Cross browser. Supports all major browsers.
- Easing options support.
- Multiple instances on one page.
Basic Usage:
1. Load the latest version of jQuery library together with jQuery lightGallery plugin's CSS and javascript in the document.
<link rel="stylesheet" href="lightGallery.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="lightGallery.js"></script>
2. Create an image/video gallery with Html5 data-*
attributes.
<ul id="lightGallery" class="gallery"> <li data-title="Title 1" data-desc="Description 1" data-responsive-src="mobile1.jpg" data-src="img1.jpg"> <a href="#"> <img src="thumb1.jpg" /> </a> </li> <li data-title="Title 2" data-desc="Description 2" data-responsive-src="mobile2.jpg" data-src="img2.jpg"> <a href="#"> <img src="thumb2.jpg" /> </a> </li> <li data-title="Title 3" data-desc="Description 3" data-responsive-src="mobile3.jpg" data-src="img3.jpg"> <a href="#"> <img src="thumb3.jpg" /> </a> </li> ... </ul>
3. data-*
attributes.
<!-- the title of your image/video --> data-title="Title 1" <!-- the description of your image/video --> data-desc="Description 1" <!-- the image/video source for mobile devices --> data-responsive-src="mobile1.jpg" <!-- the large version of your image/video --> data-src="img1.jpg"
4. Initialize the gallery lightbox with default settings.
<script> $(document).ready(function() { $("#lightGallery").lightGallery(); }); </script>
5. The plugin comes with lots of options/callbacks to customize your lightbox gallery.
mode : 'slide'
: Type of transition between images. Either 'slide' or 'fade'.useCSS : true
: Whether to always use jQuery animation for transitions or as a fallback.cssEasing: 'ease'
, //'cubic-bezier(0.25, 0, 0.25, 1)',//easing : 'linear'
: Value for CSS "transition-timing-function" prop. and jQuery .animate().speed : 1000
: Transition duration (in ms).addClass : ''
: Add custom class for gallery.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
: Show Content once it is fully loaded.selector : null
: Custom selector property insted of just child.index : false
: Allows to set which image/video should load when using dynamicEl.counter: false,
thumbnail : true
: Whether to display a button to show thumbnails.exThumbImage : false
: Name of a "data-" attribute containing the paths to thumbnails.animateThumb : true
: Enable thumbnail animation.currentPagerPosition : 'middle'
: Position of selected thumbnail.thumbWidth : 100
: Width of each thumbnailsthumbMargin : 5
: Spacing between each thumbnailscontrols : true
: Whether to display prev/next buttons.hideControlOnEnd : false
: If true, prev/next button will be hidden on first/last image.loop : false
: Allows to go to the other end of the gallery at first/last img.auto : false
: Enables slideshow mode.pause : 4000
: Delay (in ms) between transitions in slideshow mode.escKey : true
: Whether lightGallery should be closed when user presses "Esc".closable : true
: allows clicks on dimmer to close gallerycounter : false
: Shows total number of images and index number of current image.lang : { allPhotos: 'All photos' }
: Text of labels.mobileSrc : false
: If "data-responsive-src" attr. should be used for mobiles.mobileSrcMaxWidth : 640
: Max screen resolution for alternative images to be loaded for.swipeThreshold : 50
: How far user must swipe for the next/prev image (in px).vimeoColor : 'CCCCCC'
: Vimeo video player theme color (hex color code).videoAutoplay : true
: Set to false to disable video autoplay option.videoMaxWidth : 855
: Limits video maximal width (in px).dynamic : false
: Set to true to build a gallery based on the data from "dynamicEl" opt.dynamicEl : []
: Array of objects (src, thumb, caption, desc, mobileSrc) for gallery els.onOpen : function(plugin) {}
: Executes immediately after the gallery is loaded.onSlideBefore : function(plugin) {}
: Executes immediately before each transition.onSlideAfter : function(plugin) {}
: Executes immediately after each transition.onSlideNext : function(plugin) {}
: Executes immediately before each "Next" transition.onSlidePrev : function(plugin) {}
: Executes immediately before each "Prev" transition.onBeforeClose : function(plugin) {}
: Executes immediately before the start of the close process.onCloseAfter : function(plugin) {}
: Executes immediately once lightGallery is closed.
About author:
Author: Sachin
Homepage: http://sachinchoolur.github.io/lightGallery/
Change logs:
2016-01-05
- v1.2.13: Fixed zoom module issues..
2016-01-03
- v1.2.12: Added double tap support for touch devices.
2015-12-30
- v1.2.11: minor update.
2015-12-18
- v1.2.9: update.
2015-12-13
- v1.2.8: update.
2015-10-03
- v1.2.5: update.
2015-09-26
- v1.2.4: bugfix
2015-09-23
- v1.2.3: fixed an issue when use video gallery with only one video.
2015-09-08
- v1.2.1: bugfix.
2015-09-03
- Improved zoom plugin
2015-08-26
- Version 1.2.0 release.
2015-03-30
- Version 1.1.5 release.
2015-03-29
- Support for youtube player parameters
2014-11-04
- v1.1.4
2014-11-03
- Fixed: Escape does not close the gallery when it contains only one image
2014-10-02
- Fixed for IE8.
2014-09-25
- Fixed Escape does not close the gallery when it contains only one image
2014-09-17
- Fixed position problem #lightGallery-action
2014-09-16
- v1.1.3
2014-09-02
- Fixed issue 'Add options to include hyperlinks in caption and description
2014-07-22
- Fixed doesnt work on ios
2014-07-01
- Fixed 'hideControlOnEnd' issues..
2014-06-27
- Fixed slide preload issue..
2014-06-13
- Improve youtube/vimeo regex
2014-05-07
- Equal height thumbnails
2014-04-22
- Navigation arrows on iOS skipping 2 slides instead of 1
2014-04-11
- Fixed ie8 font icons issue 'Invisible buttons on IE8 #19'
2014-04-03
- fixed captionLinks and navigation for touch devices
2014-04-02
- Update lightGallery.js
2014-03-27
- Update lightGallery.js
2014-03-22
- fixed issue"Portrait Image Thumbnails"
2014-03-15
- Fixed issue.
2014-03-06
- Fixed issue "Slide effect at second opening"
This awesome jQuery plugin is developed by sachinchoolur. For more Advanced Usages, please check the demo page or visit the official website.