Fullscreen Image Gallery Lightbox Plugin For jQuery - Slide Show
File Size: | 7.76 KB |
---|---|
Views Total: | 2380 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Slide Show is a jQuery image viewer plugin that displays large versions of grouped thumbnails in a gallery lightbox popup just like a fullscreen slideshow.
How to use it:
1. Include the required CSS file in the header.
<link href="slideshow.css" rel="stylesheet">
2. Create a list of thumbnails on your web page and specify the sources of large images using a
tag. All the images in the list will be grouped and displayed in the fullscreen gallery lightbox.
<ul class="slides"> <li><a href="large-1.jpg"><img src="thumb-1.jpg" /></a></li> <li><a href="large-2.jpg"><img src="thumb-2.jpg" /></a></li> <li><a href="large-3.jpg"><img src="thumb-3.jpg" /></a></li> <li><a href="large-4.jpg"><img src="thumb-4.jpg" /></a></li> <li><a href="large-5.jpg"><img src="thumb-5.jpg" /></a></li> </ul>
3. Include jQuery library and the jQuery Slide Show plugin at the bottom of the web page.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="slideshow.js"></script>
4. Call the plugin on the list.
$('ul.slides').slideShow();
5. Advanced usage.
// Use custom child selector 'li' $('.slide').slideShow('li', {dataAttr: 'src'});
This awesome jQuery plugin is developed by mrcoles. For more Advanced Usages, please check the demo page or visit the official website.