Mobile Compatible jQuery Slideshow Modal Plugin

A lightweight and flexible jQuery gallery plugin which enables you to present images in a navigatable, touchable slideshow lightbox with several useful controls.

How to use it:

1. Include jQuery library and other required resources on the web page.

<script src="path/to/jquery.min.js"></script>
  ...
<link rel="stylesheet" href="path/to/jquery.modal.css">
<script src="path/to/jquery.modal.min.js"></script>
<script src="path/to/jquery.touchSwipe.min.js"></script>

2. Include the jquery.slideshow.css and jquery.slideshow.js after jQuery library.

<link rel="stylesheet" href="jquery.slideshow.css">
<script src="jquery.slideshow.js"></script>

3. Create a single image lightbox using rel="slideshow:open" attribute.

<a href="1.jpg" rel="slideshow:open"><img src="thumb-1.jpg"></a>

4. Create a photo gallery and manually invoke with slideshow.

<div id="gallery">
  <a href="1.jpg" class="slide" data-target="slideshow"><img src="thumbs-1.jpg"></a>
  <a href="2.jpg" class="slide" data-target="slideshow"><img src="thumbs-2.jpg"></a>
  <a href="3.jpg" class="slide" data-target="slideshow"><img src="thumbs-3.jpg"></a>
  <a href="4.jpg" class="slide" data-target="slideshow"><img src="thumbs-4.jpg"></a>
</div>

$('#gallery > .slide').on('click', function(){
  $(this).slideshow();
  return false;
});

5. Options and defaults.

// animation options
animationfadeDuration:200,
fadeDelay:0.80,

// class name for modal
modalClass: 'modal slide-show',

// show close button
showClose:false

---

This awesome jQuery plugin is developed by xylphid. For more Advanced Usages, please check the demo page or visit the official website.