jQuery lightGallery – A lightweight lightbox gallery for displaying images and videos

Today, I’ve got a great new gallery jQuery plugin to share as it is one of the good ones I have seen. jQuery lightGallery is a very lightweight gallery with a great visual look.  

The main features include responsive layout, touch support for mobile devices, youtube and vimeo support, slide and fade effects, CSS transitions with jQuery fallback, image captions and descriptions, font icon support and many more.

It also looks good on Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and Windows phone. It is easily customizable via CSS and settings and it is 7kb in minified version. jQuery lightGallery also allows to have multiple sliders on the same page.

jQuery lightGallery – A lightweight lightbox gallery for displaying images and videos

Demos  Download

Main Features include:

  • Responsive layout.
  • Touch support for mobile devices.
  • CSS transitions with jQuery fallback
  • Youtube Vimeo Video Support
  • Slide and Fade Effects
  • Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone.
  • Image captions and descriptions
  • Multiple sliders on the same page
  • Easily customizable via CSS and Settings
  • Lightweight (7kb) (minified)
  • Thumbnail support
  • Separate images for mobile devices
  • Can be extended with callbacks
  • Smart image preloading and code optimization
  • Keyboard Navigation for desktop
  • Font icon support

Have a look how to use:

Start with adding the following code in theof 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


Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

	<ul id="lightGallery">
	<li data-src="img/img1.jpg">
	<img src="img/thumb1.jpg" />
	<li data-src="img/img2.jpg">
	<img src="img/thumb2.jpg" />

Call jQuery lightGallery

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

Use the settings to customize the gallery

<script type="text/javascript">
$(document).ready(function() {
// Elements
thumbnail : true, // Whether to display a button to show thumbnails.
caption : false, // Enables image captions. Content is taken from "data-title" attribute.
captionLink : false, // Makes image caption a link. URL is taken from "data-link" attribute.
desc : false, // Enables image descriptions. Description is taken from "data-desc" attr.
counter : false, // Shows total number of images and index number of current image.
controls : true, // Whether to display prev/next buttons.

// Transitions
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.
easing : 'linear', // Value for CSS "transition-timing-function" prop. and jQuery .animate().
speed : 1000, // Transition duration (in ms).

// Navigation
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".

// Mobile devices
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).

// Video
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).

// i18n
lang : { allPhotos: 'All photos' }, // Text of labels.

// Callbacks
onOpen : function() {}, // Executes immediately after the gallery is loaded.
onSlideBefore : function() {}, // Executes immediately before each transition.
onSlideAfter : function() {}, // Executes immediately after each transition.
onSlideNext : function() {}, // Executes immediately before each "Next" transition.
onSlidePrev : function() {}, // Executes immediately before each "Prev" transition.
onBeforeClose : function() {}, // Executes immediately before the start of the close process.
onCloseAfter : function() {}, // Executes immediately once lightGallery is closed.

// Dynamical load
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.

// Misc
rel : false, // Combines containers with the same "data-rel" attr. into 1 gallery.
exThumbImage : false, // Name of a "data-" attribute containing the paths to thumbnails.

In-depth explanation of settings can be found on a this page.

You may also like...

1 Response

  1. Mark says:

    I’d never come across something that complicated as LightGallery.
    Add to this that there is ZERO support to it, you’d better off writing your own, instead of trying to hack yourself through the coding and trying to figure out what was going on in the brain of the developers of LightGallery!

Leave a Reply

Your email address will not be published. Required fields are marked *