JQuery lightGallery is a lightweight jQuery lightbox gallery for displaying image and video gallery
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
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>
<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>
In-depth explanation of settings can be found on a separate page.
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.
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.
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.
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)
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.
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.
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
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.
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.