jQuery lightGallery

JQuery lightGallery is a lightweight jQuery lightbox gallery for displaying image and video gallery

Main Features

  • 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

Example Click on any of the images to see lightGallery

How to use lightGallery?

The Code

add 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.js

HTML Structure

Create 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="lightGallery">
  <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>

Data attributes


<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="#inlineHtml" > </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="#inlineSubHtml" > </li>

Call lightGallery!

<script type="text/javascript">
  $(document).ready(function() {
    $("#lightGallery").lightGallery(); 
  });
</script>

Play with settings

<script type="text/javascript">
  $(document).ready(function() {
    $("#lightGallery").lightGallery({

      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',   // Value for CSS "transition-timing-function".
      easing    : 'linear', //'for jquery animation',//
      speed     : 600,      // 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.

      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.

      thumbnail            : true,     // Whether to display a button to show thumbnails.
      showThumbByDefault   : false,    // Whether to display thumbnails by default..
      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).
      enableTouch       : true,  // Enables touch support
      enableDrag        : true,  // Enables desktop mouse drag support

      vimeoColor    : 'CCCCCC', // Vimeo video player theme color (hex color code).
      videoAutoplay : true,     // Set to false to disable video autoplay option.
      videoMaxWidth : '855px',  // Limits video maximal width (in px).

      // Callbacks el = current plugin object
      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.

Public methods

<script type="text/javascript">
  $(document).ready(function() {
    var gallery = $("#lightGallery").lightGallery();
    gallery.isActive(); //check active state of lightGallery;
    gallery.destroy();  //to destroy the plugin on the given element.  
  });
</script>

Make All Things Great with LightGallery

jQuery lightGallery is a lightweight lightbox gallery plugin for displaying your photos and videos. It comes loaded with awesome features like touch support for mobile devices, support for YouTube, Vimeo and local html5 videos like MP4, WebM, Ogg etc, slide and fade effects, image captions and descriptions, CSS transitions with jQuery fallback, animated thumbnails and a whole lot more besides.

Responsive

lightGallery is fully responsive will support to any device such as desktop iPhone, iPad, Andorid windows phone etc. Not only is it responsive but carefully optimized to act appropriately on any screen size. To make your website faster in mobile devices you can load separate images (low quality) for Mobile devices. Add the path of the image which you wish to load in mobile devices inside data-responsive-src attribute. And You can define from which resolution the images for mobile devices should be loaded using the mobileSrcMaxWidth setting. lightGallery CSS-only approach for resizing the images and videos so it will be extremely flexible and super fast than using javascript approach.

Touch Swipe Navigation

lightGallery supports touch swipe navigation on touchscreen devices and mouse drag for desktops. it allows user to navigate between slides via swipe of their fingers or mouse drag . you can enable or disable these options from settings.

Smart preloading

Gallery loads nearby images and videos in background, so users don't need to wait each time and images are available instantly. You can set how many images or videos to be preloaded in the preload setting. this feature helps lightGallery to works well with large Galleries in any type of devices. Ex: if the 4th slide is active and preload is 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.

Video Support

lightGallery supports youtube, vimeo, and all HTML5 video formats like MP4, WebM, Ogg .. for displaying youtube or vimeo video just paste video URL or share URL which is provided by youtube in the data-src attribute same like how we display images in the gallery. lightGallery will check data-src attribute and if it is youtube or vimeo URL will open video in the gallery. So user no need to worry about it. lightGallery takes care of everything!

You can also display html5 videos in the gallery. It supports all html5 video formats. for displaying html5 video create your video content using html5 video tag inside a hidden div and just add id or class name of the object(hidden div) which contain your html inside the data-html attribute. data-src should not be provided when you use html5 videos . You can even provide video html directly inside data-html attribute. lightGallery will automatically check your content and if it is id or class name of your hidden div content will be fetched from the div and will be displayed as video otherwise direct content will be used to display video. (the future plane is just provide video URL in the data-src attribute and video should be created using the URL)

Animated thumbnails

This is one of the core feature of lightGallery. If you likes you can enable animated thumbnails from the settings otherwise normal thumbnail will be used. There are three options to position the active thumbnails left middle or right.

By default thumbnail image will be selected from the selector ($selector.find(img)). If you wish to provide separate image that is also possible. You can set external thumb image using setting exThumbImage . set name of the "data-" attribute containing the paths to thumbnails.

Autoplay and Infinitely looping

Enable Autoplay from the settings it will be stopped in the first user action. Enable loop from the settings to loop through your slides endlessly in both directions.

Iframe support

Set attribute data-iframe=”true” to open the given ‘data-src’ in an iframe. You can display google map, external website etc. using this method

Load Dynamically

LightGallery can be instantiated and launched programmatically by setting dynamic option to true and populating dynamicEl option by passing array of objects (src, mobileSrc, thumb, html, url, iframe) representing the gallery elements.

Super customizable via css and settings

LightGallery uses Hardware-Accelerated CSS3 for transitions faster animation performance. You can also enable regular jQuery transition instead. You can try different transition effects by customizing lightGallery.css

Not only for animations lightGallery uses css for vertically centering and resizing videos and images. So it will be super fast in any devices. You can easily customize the look and feel of gallery via css if you have css knowledge.

Email me (sachi77n@gmail.com) if you have any questions or feedbacks regarding lightGallery or lightSlider

Think you can improve this page? fork me on github