› › jQuery lightGallery

Responsive & Touch-Friendly jQuery Gallery Lightbox Plugin - lightGallery

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
   
Demo Download

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2018

Chrome, IE8+, FireFox, Opera, Safari#gallery lightbox

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 thumbnails
  • thumbMargin : 5: Spacing between each thumbnails
  • 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.
  • 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 gallery
  • counter : 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

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.