Responsive & Touch-Friendly jQuery Gallery Lightbox Plugin - lightGallery
File Size: | 2.76 MB |
---|---|
Views Total: | 72865 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

lightGallery is a lightweight, elegant, responsive, mobile-friendly jQuery JavaScript plugin for displaying an image/video gallery in a fullscreen lightbox with CSS3 transition effects.
The Vanilla JavaScript Version is available here.
More features:
- 20+ transition animations.
- Auto play when images loaded.
- Infinite looping.
- Supports youtube & vimeo videos, not just images.
- Touch swipe support.
- Pinch to zoom.
- Virtual slides.
- Image captions & descriptions support.
- Arrows, thumbnails and keyboard navigation.
- Cross browser. Supports all major browsers.
- Easing options support.
- Multiple instances on one page.
- Works with React, Angular, and Vue.js.
- And much more.
Table Of Contents:
How to use it:
1. Load the latest version of jQuery library together with jQuery lightGallery plugin's CSS and javascript in the document.
<link rel="stylesheet" href="/path/to/dist/css/lightgallery.min.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/js/lightgallery-all.min.js"></script>
2. Or load the core JavaScript and optional extensions of your choice in the document.
<!-- Core --> <script src="/path/to/dist/js/lightgallery.min.js"></script> <!-- Autoplay --> <script src="/path/to/modules/lg-autoplay.js"></script> <!-- Fullscreen --> <script src="/path/to/modules/lg-fullscreen.js"></script> <!-- Hashtag --> <script src="/path/to/modules/lg-hash.js"></script> <!-- Pager --> <script src="/path/to/modules/lg-pager.js"></script> <!-- Rotate --> <script src="/path/to/modules/lg-rotate.js"></script> <!-- Social share --> <script src="/path/to/modules/lg-share.js"></script> <!-- Thumbnail --> <script src="/path/to/modules/lg-thumbnail.js"></script> <!-- HTML5/YOUTUBE/VIMEO Video --> <script src="/path/to/modules/lg-video.js"></script> <!-- Zoom --> <script src="/path/to/modules/lg-zoom.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. Available data-*
attributes.
- data-src: the large version of your image/video
- href: the large version of your image/video
- data-sub-html: id or class name of an object(div) which contain your sub html.
- data-sub-html-url: url of the file which contain your sub html.
- data-html: id or class name of an object(div) which contain your html. used for inserting html5 videos
- data-poster: Poster image for your video
- data-responsive: List of images and viewport's max width separated by comma.Ex: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757.
- data-srcset: srcset values
- data-sizes: srcset sizes
- data-iframe: Set true is you want to open your url in an iframe
- data-download-url: Download url for your image/video. Pass false if you want to hide the download button.
- data-width: Actual size of the image in px. used in zoom plugin to see the actual size of the image when you doubleclick on the image.
- data-facebook-share-url: Facebook share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
- data-tweet-text: Tweet text
- data-twitter-share-url: Twitter share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
- data-googleplus-share-url: GooglePlus share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
- data-pinterest-share-url: Pinterest share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken. Note: Pinterest requires absolute URL
- data-pinterest-text: Description for Pinterest post
4. Initialize the gallery lightbox with default settings.
$(document).ready(function() { $("#lightGallery").lightGallery(); });
5. The plugin comes with lots of options/callbacks to customize your lightbox gallery.
mode: 'lg-slide'
: Type of transition between images: 'lg-slide', 'lg-fade', 'lg-zoom-in', 'lg-zoom-in-big', 'lg-zoom-out', 'lg-zoom-out-big', 'lg-zoom-out-in', 'lg-zoom-in-out', 'lg-soft-zoom', 'lg-scale-up', 'lg-slide-circular', 'lg-slide-circular-vertical', 'lg-slide-vertical', 'lg-slide-vertical-growth', 'lg-slide-skew-only', 'lg-slide-skew-only-rev', 'lg-slide-skew-only-y', 'lg-slide-skew-only-y-rev', 'lg-slide-skew', 'lg-slide-skew-rev', 'lg-slide-skew-cross', 'lg-slide-skew-cross-rev', 'lg-slide-skew-ver', 'lg-slide-skew-ver-rev', 'lg-slide-skew-ver-cross', 'lg-slide-skew-ver-cross-rev', 'lg-lollipop', 'lg-lollipop-rev', 'lg-rotate', 'lg-rotate-rev', 'lg-tube'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).height & width
: Height and width of the gallerygalleryId: 1
: Gallery IDaddClass: ''
: Add custom class for gallery.startClass: 'lg-start-zoom'
: Starting animation class for the gallery.backdropDuration: 150
: Backdrop transtion durationhideBarsDelay: 6000
: Delay for hiding gallery controls in ms. If 0 is passed via hideBarsDelay, lightGallery will not hide the toolbar and controls.useLeft: false
: Force lightgallery to use css left property instead of transform.ariaLabelledby & ariaDescribedby
: For Accessibilitypreload: 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.controls: 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.escKey: true
: Whether lightGallery should be closed when user presses "Esc".keyPress: true
: Enable keyboard navigationslideEndAnimatoin: true
: Enable slideEnd animationmousewheel: true
: Change slide on mousewheelgetCaptionFromTitleOrAlt: true
: Option to get captions from alt or title tags.appendSubHtmlTo: true
: You can specify where the sub-html should be appended. '.lg-sub-html' or '.lg-item'.subHtmlSelectorRelative
: Set to true if the selector in "data-sub-html" should use the current item as its origin.selectWithin: ''
: By default selectror element is taken from only inside the gallery element. Instead of that you can tell lightgallery to select element within a specific element.nextHtml: ''
: Custom html for next controlprevHtml: ''
: Custom html for prev controliframeMaxWidth: '100%'
: Set maximum width for iframe.download: true
: Enable download button. By default download url will be taken from data-src/href attribute but it supports only for modern browsers. If you want you can provide another url for download via data-download-url. Pass false in data-download-url if you want to hide download button for the particular slide.closable: true
: allows clicks on dimmer to close gallerycounter: false
: Shows total number of images and index number of current image.appendCounterTo: '.lg-toolbar'
: Where the counter should be appendedenableSwipe: true
: Enables swipe supportenableDrag: true
: Enables desktop mouse drag supportswipeThreshold: 50
: How far user must swipe for the next/prev image (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.supportLegacyBrowser
: Whether to support legacy browsers
$("#lightGallery").lightGallery({ mode: 'lg-slide', // Ex : 'ease' cssEasing: 'ease', //'for jquery animation' easing: 'linear', speed: 600, height: '100%', width: '100%', addClass: '', startClass: 'lg-start-zoom', backdropDuration: 150, // Set 0, if u don't want to hide the controls hideBarsDelay: 6000, useLeft: false, // aria-labelledby attribute fot gallery ariaLabelledby: '', //aria-describedby attribute for gallery ariaDescribedby: '', closable: true, loop: true, escKey: true, keyPress: true, controls: true, slideEndAnimatoin: true, hideControlOnEnd: false, mousewheel: true, getCaptionFromTitleOrAlt: true, // .lg-item || '.lg-sub-html' appendSubHtmlTo: '.lg-sub-html', subHtmlSelectorRelative: false, /** * @desc number of preload slides * will execute 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.. ... ... * */ preload: 1, showAfterLoad: true, selector: '', selectWithin: '', nextHtml: '', prevHtml: '', // 0, 1 index: false, iframeMaxWidth: '100%', download: true, counter: true, appendCounterTo: '.lg-toolbar', swipeThreshold: 50, enableSwipe: true, enableDrag: true, dynamic: false, dynamicEl: [], galleryId: 1, supportLegacyBrowser: true });
6. Default options of optional extensions.
// autoplay addon autoplay: false, pause: 5000, progressBar: true, fourceAutoplay: false, autoplayControls: true, appendAutoplayControlsTo: '.lg-toolbar' // hash addon hash: true, galleryId: 1, // fullscreen addon fullScreen: true, // pager addon pager: false, // social share addon share: true, facebook: true, facebookDropdownText: 'Facebook', twitter: true, twitterDropdownText: 'Twitter', googlePlus: true, googlePlusDropdownText: 'GooglePlus', pinterest: true, pinterestDropdownText: 'Pinterest', // thumbnail addon thumbnail: true, animateThumb: true, currentPagerPosition: 'middle', // 'left' or 'middle' or 'right' thumbWidth: 100, thumbContHeight: 100, thumbMargin: 5, exThumbImage: false, showThumbByDefault: true, toggleThumb: true, pullCaptionUp: true, enableThumbDrag: true, enableThumbSwipe: true, swipeThreshold: 50, loadYoutubeThumbnail: true, youtubeThumbSize: 1, loadVimeoThumbnail: true, vimeoThumbSize: 'thumbnail_small', // 'thumbnail_large' or 'thumbnail_medium' or 'thumbnail_small' loadDailymotionThumbnail: true, // video addon videoMaxWidth: '855px', autoplayFirstVideo: true, youtubePlayerParams: false, vimeoPlayerParams: false, dailymotionPlayerParams: false, vkPlayerParams: false, videojs: false, // uses video.js library videojsOptions: {}, // zoom addon scale: 1, zoom: true, actualSize: true, enableZoomAfter: 300, // rotate addon rotate: true, rotateLeft: true, rotateRight: true, flipHorizontal: true, flipVertical: true,
7. API Methods.
var $lg = $('#lightgallery'); $lg.lightGallery(); // go to the next slide $lg.data('lightGallery').goToNextSlide(); // go to the prev slide $lg.data('lightGallery').goToPrevSlide(); // go to a specific sldie $lg.data('lightGallery').slide(3);
8. Events.
var $lg = $('#lightgallery'); $lg.lightGallery(); $lg.on('onBeforeOpen.lg', function(e){ // do something }, false); $lg.on('onAfterOpen.lg', function(e){ // do something }, false); $lg.on('onAferAppendSlide.lg', function(e){ // event.detail.index - Index of the slide }, false); $lg.on('onAfterAppendSubHtml.lg', function(e){ // event.detail.index - Index of the slide }, false); $lg.on('onSlideItemLoad.lg', function(e){ // event.detail.index - Index of the slide }, false); $lg.on('onBeforeSlide.lg', function(e){ // event.detail.prevIndex - Index of the previous slide // event.detail.index - Index of the slide // event.detail.fromTouch - true if slide function called via touch event or mouse drag // event.detail.fromThumb - true if slide function called via thumbnail click }, false); $lg.on('onAfterSlide.lg', function(e){ // event.detail.prevIndex - Index of the previous slide // event.detail.index - Index of the slide // event.detail.fromTouch - true if slide function called via touch event or mouse drag // event.detail.fromThumb - true if slide function called via thumbnail click }, false); $lg.on('onBeforePrevSlide.lg', function(e){ // event.detail.index - Index of the slide // event.detail.fromTouch - true if slide function called via touch event or mouse drag }, false); $lg.on('onBeforeNextSlide.lg', function(e){ // event.detail.index - Index of the slide // event.detail.fromTouch - true if slide function called via touch event or mouse drag }, false); $lg.on('onDragstart.lg', function(e){ // do something }, false); $lg.on('onDragmove.lg', function(e){ // do something }, false); $lg.on('onDragend.lg', function(e){ // do something }, false); $lg.on('onSlideClick.lg', function(e){ // do something }, false); $lg.on('onBeforeClose.lg', function(e){ // do something }, false); $lg.on('onCloseAfter.lg', function(e){ // do something }, false);
About author:
Author: Sachin
Homepage: http://sachinchoolur.github.io/lightGallery/
Changelog:
2022-01-12
- Vanilla JS version updated. Download Here.
v1.10.0 (2020-11-07)
- Upgrad from frooglaloop to vimeo player.js
- Update video js error message
- Enhance autoplay support
- Add support for player.vimeo.com/video/<video_id>
v1.9.1beta (2020-10-29)
- Add option to turn off hiding toolbar and controls. If 0 is passed via hideBarsDelay, lightGallery will not hide the toolbar and controls.
- New supportLegacyBrowser option
- Better error messaging
- Minor bug fixes
- Add support for player.vimeo.com/video/<video_id>
2020-09-21
- Doc updated
2020-09-19
- v1.8.3
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.