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
   
Fullscreen Image Gallery Lightbox Plugin For jQuery - Slide Show

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.