[slideshow] A Simple Module for jQuery That Display Your Image or Browse

jQuery-slideshow is a simple unit for JQUERY that makes it easy to display your image or browse your galleries/exhibitions.

jquery slideshow autoplay, jquery slider in modal popup, image slider in modal popup, jquery slideshow plugin, jquery image modal

jquery-slideshow-autoplay 

How to use it:

1. Include the 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 JQUERY.SLIDESHOW.CSS and JQUERY.SLIDESHOW.JS after the JQUEY Library.

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

3. Create one photo lamp box using the rel="slideshow:open".

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

4. Create a photo gallery and call manually with slices.

<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>

5. Options and assumptions.

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

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

// show close button
showClose:false

mobile compatible jquery slideshow modal, jquery-slideshow plugin/github


See Demo And Download

Developer Name: xylphid

Official Website: Click Here

Share

You may also like...

Leave a Reply

Your email address will not be published.