Responsive & Contact-Pleasant jQuery Gallery Lightbox Plugin – lightGallery

gentleGallery is a light-weight, elegant, responsive, mobile-friendly jQuery JavaScript plugin for displaying a picture/video gallery in a fullscreen lightbox with CSS3 transition results.

The Vanilla JavaScript Model is obtainable right here.

Extra options:

• 20+ transition animations.
• Auto play when photos loaded.
• Infinite looping.
• Helps youtube & vimeo movies, not simply photos.
• Contact swipe assist.
• Pinch to zoom.
• Digital slides.
• Picture captions & descriptions assist.
• Arrows, thumbnails and keyboard navigation.
• Cross browser. Helps all main browsers.
• Easing choices assist.
• A number of situations on one web page.
• Works with React, Angular, and Vue.js.
• And way more.

Desk Of Contents:

Tips on how to use it:

1. Load the newest model of jQuery library along with jQuery lightGallery plugin’s CSS and javascript within the doc.

<hyperlink 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 optionally available extensions of your selection within the doc.

<!-- 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 a picture/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. Out there data-* attributes.

• data-src: the massive model of your picture/video
• href: the massive model of your picture/video
• data-sub-html: id or class title of an object(div) which include your sub html.
• data-sub-html-url: url of the file which include your sub html.
• data-html: id or class title of an object(div) which include your html. used for inserting html5 movies
• data-poster: Poster picture on your video
• data-responsive: Checklist of photos 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 need to open your url in an iframe
• data-download-url: Obtain url on your picture/video. Go false if you wish to cover the obtain button.
• data-width: Precise dimension of the picture in px. utilized in zoom plugin to see the precise dimension of the picture once you doubleclick on the picture.
• data-facebook-share-url: Fb share URL. Specify solely if you wish to present separate share URL for the precise slide. By default, present browser URL might be taken.
• data-tweet-text: Tweet textual content
• data-twitter-share-url: Twitter share URL. Specify solely if you wish to present separate share URL for the precise slide. By default, present browser URL might be taken.
• data-googleplus-share-url: GooglePlus share URL. Specify solely if you wish to present separate share URL for the precise slide. By default, present browser URL might be taken.
• data-pinterest-share-url: Pinterest share URL. Specify solely if you wish to present separate share URL for the precise slide. By default, present browser URL might be taken. Notice: Pinterest requires absolute URL
• data-pinterest-text: Description for Pinterest publish

4. Initialize the gallery lightbox with default settings.

$(doc).prepared(operate() {
  $("#lightGallery").lightGallery();
});

5. The plugin comes with a number of choices/callbacks to customise your lightbox gallery.

• mode: 'lg-slide': Kind of transition between photos: ‘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': Worth for CSS “transition-timing-function” prop. and jQuery .animate().
• velocity: 1000: Transition length (in ms).
• peak & width: Top and width of the gallery
• galleryId: 1: Gallery ID
• addClass: '': Add customized class for gallery.
• startClass: 'lg-start-zoom': Beginning animation class for the gallery.
• backdropDuration: 150: Backdrop transtion length
• hideBarsDelay: 6000: Delay for hiding gallery controls in ms. If 0 is handed through hideBarsDelay, lightGallery won’t cover the toolbar and controls.
• useLeft: false: Pressure lightgallery to make use of css left property as an alternative of rework.
• ariaLabelledby & ariaDescribedby: For Accessibility
• preload: 1: variety of preload slides. will exicute solely after the present slide is absolutely loaded. ex:// you clicked on 4th picture and if preload = 1 then third slide and fifth slide might be loaded within the background after the 4th slide is absolutely loaded.. if preload is 2 then 2nd third fifth sixth slides might be preloaded.
• showAfterLoad: true: Present Content material as soon as it’s absolutely loaded.
• selector: null: Customized selector property insted of simply little one.
• index: false: Permits to set which picture/video ought to load when utilizing dynamicEl.
• controls: true: Whether or not to show prev/subsequent buttons.
• hideControlOnEnd: false: If true, prev/subsequent button might be hidden on first/final picture.
• loop: false: Permits to go to the opposite finish of the gallery at first/final img.
• escKey: true: Whether or not lightGallery needs to be closed when person presses “Esc”.
• keyPress: true: Allow keyboard navigation
• slideEndAnimatoin: true: Allow slideEnd animation
• mousewheel: true: Change slide on mousewheel
• getCaptionFromTitleOrAlt: true: Choice to get captions from alt or title tags.
• appendSubHtmlTo: true: You’ll be able to specify the place the sub-html needs to be appended. ‘.lg-sub-html’ or ‘.lg-item’.
• subHtmlSelectorRelative: Set to true if the selector in “data-sub-html” ought to use the present merchandise as its origin.
• selectWithin: '': By default selectror factor is taken from solely contained in the gallery factor. As an alternative of you could inform lightgallery to pick factor inside a selected factor.
• nextHtml: '': Customized html for subsequent management
• prevHtml: '': Customized html for prev management
• iframeMaxWidth: '100%': Set most width for iframe.
• obtain: true: Allow obtain button. By default obtain url might be taken from data-src/href attribute however it helps just for fashionable browsers. If you’d like you may present one other url for obtain through data-download-url. Go false in data-download-url if you wish to cover obtain button for the actual slide.
• closable: true: permits clicks on dimmer to shut gallery
• counter: false: Reveals whole variety of photos and index variety of present picture.
• appendCounterTo: '.lg-toolbar': The place the counter needs to be appended
• enableSwipe: true: Allows swipe assist
• enableDrag: true: Allows desktop mouse drag assist
• swipeThreshold: 50: How far person should swipe for the following/prev picture (in px).
• dynamic: false: Set to true to construct a gallery based mostly on the info from “dynamicEl” choose.
• dynamicEl: []: Array of objects (src, thumb, caption, desc, mobileSrc) for gallery els.
• supportLegacyBrowser: Whether or not to assist legacy browsers

$("#lightGallery").lightGallery( '.lg-sub-html'
  appendSubHtmlTo: '.lg-sub-html',

  subHtmlSelectorRelative: false,

  /**
   * @desc variety of preload slides
   * will execute solely after the present slide is absolutely loaded.
   *
   * @ex you clicked on 4th picture and if preload = 1 then third slide and fifth
   * slide might be loaded within the background after the 4th slide is absolutely loaded..
   * if preload is 2 then 2nd third fifth sixth slides might be preloaded.. ... ...
   *
   */
  preload: 1,
  showAfterLoad: true,
  selector: '',
  selectWithin: '',
  nextHtml: '',
  prevHtml: '',

  // 0, 1
  index: false,

  iframeMaxWidth: '100%',

  obtain: true,
  counter: true,
  appendCounterTo: '.lg-toolbar',

  swipeThreshold: 50,
  enableSwipe: true,
  enableDrag: true,

  dynamic: false,
  dynamicEl: [],
  galleryId: 1,
  supportLegacyBrowser: true
);

6. Default choices of optionally available 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,
fb: true,
facebookDropdownText: 'Fb',
twitter: true,
twitterDropdownText: 'Twitter',
googlePlus: true,
googlePlusDropdownText: 'GooglePlus',
pinterest: true,
pinterestDropdownText: 'Pinterest',

// thumbnail addon
thumbnail: true,
animateThumb: true,
currentPagerPosition: 'center', // 'left' or 'center' or 'proper'
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, // makes use of 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 Strategies.

var $lg = $('#lightgallery');
$lg.lightGallery();
 
// go to the following slide
$lg.knowledge('lightGallery').goToNextSlide();

// go to the prev slide
$lg.knowledge('lightGallery').goToPrevSlide();

// go to a selected sldie
$lg.knowledge('lightGallery').slide(3);

8. Occasions.

var $lg = $('#lightgallery');
$lg.lightGallery();

$lg.on('onBeforeOpen.lg', operate(e){
  // do one thing
}, false);

$lg.on('onAfterOpen.lg', operate(e){
  // do one thing
}, false);

$lg.on('onAferAppendSlide.lg', operate(e){
  // occasion.element.index - Index of the slide
}, false);

$lg.on('onAfterAppendSubHtml.lg', operate(e){
  // occasion.element.index - Index of the slide
}, false);

$lg.on('onSlideItemLoad.lg', operate(e){
  // occasion.element.index - Index of the slide
}, false);

$lg.on('onBeforeSlide.lg', operate(e){
  // occasion.element.prevIndex - Index of the earlier slide
  // occasion.element.index - Index of the slide
  // occasion.element.fromTouch - true if slide operate referred to as through contact occasion or mouse drag
  // occasion.element.fromThumb - true if slide operate referred to as through thumbnail click on
}, false);

$lg.on('onAfterSlide.lg', operate(e){
  // occasion.element.prevIndex - Index of the earlier slide
  // occasion.element.index - Index of the slide
  // occasion.element.fromTouch - true if slide operate referred to as through contact occasion or mouse drag
  // occasion.element.fromThumb - true if slide operate referred to as through thumbnail click on
}, false);

$lg.on('onBeforePrevSlide.lg', operate(e){
  // occasion.element.index - Index of the slide
  // occasion.element.fromTouch - true if slide operate referred to as through contact occasion or mouse drag
}, false);

$lg.on('onBeforeNextSlide.lg', operate(e){
  // occasion.element.index - Index of the slide
  // occasion.element.fromTouch - true if slide operate referred to as through contact occasion or mouse drag
}, false);

$lg.on('onDragstart.lg', operate(e){
  // do one thing
}, false);

$lg.on('onDragmove.lg', operate(e){
  // do one thing
}, false);

$lg.on('onDragend.lg', operate(e){
  // do one thing
}, false);

$lg.on('onSlideClick.lg', operate(e){
  // do one thing
}, false);

$lg.on('onBeforeClose.lg', operate(e){
  // do one thing
}, false);

$lg.on('onCloseAfter.lg', operate(e){
  // do one thing
}, false);

About creator:

Writer: Sachin

Homepage: http://sachinchoolur.github.io/lightGallery/

Changelog:

2024-11-29

2023-09-21

v1.10.0 (2020-11-07)

• Upgrad from frooglaloop to vimeo participant.js
• Replace video js error message
• Improve autoplay assist
• Add assist for participant.vimeo.com/video/<video_id>

v1.9.1beta (2020-10-29)

• Add possibility to show off hiding toolbar and controls. If 0 is handed through hideBarsDelay, lightGallery won’t cover the toolbar and controls.
• New supportLegacyBrowser possibility
• Higher error messaging
• Minor bug fixes
• Add assist for participant.vimeo.com/video/<video_id>

2020-09-21

2020-09-19

2016-01-05

• v1.2.13: Mounted zoom module points..

2016-01-03

• v1.2.12: Added double faucet assist for contact units.

2015-12-30

2015-12-18

2015-12-13

2015-10-03

2015-09-26

2015-09-23

• v1.2.3: fastened a problem when use video gallery with just one video.

2015-09-08

2015-09-03

2015-08-26

2015-03-30

2015-03-29

• Assist for youtube participant parameters

2014-11-04

2014-11-03

• Mounted: Escape doesn’t shut the gallery when it accommodates just one picture

2014-10-02

2014-09-25

• Mounted Escape doesn’t shut the gallery when it accommodates just one picture

2014-09-17

• Mounted place drawback #lightGallery-action

2014-09-16

2014-09-02

• Mounted difficulty ‘Add choices to incorporate hyperlinks in caption and outline

2014-07-22

2014-07-01

• Mounted ‘hideControlOnEnd’ points..

2014-06-27

• Mounted slide preload difficulty..

2014-06-13

• Enhance youtube/vimeo regex

2014-05-07

2014-04-22

• Navigation arrows on iOS skipping 2 slides as an alternative of 1

2014-04-11

• Mounted ie8 font icons difficulty ‘Invisible buttons on IE8 #19’

2014-04-03

• fastened captionLinks and navigation for contact units

2014-04-02

2014-03-27

2014-03-22

• fastened difficulty”Portrait Picture Thumbnails”

2014-03-15

2014-03-06

• Mounted difficulty “Slide impact at second opening”

This superior jQuery plugin is developed by sachinchoolur. For extra Superior Usages, please examine the demo web page or go to the official web site.