Dynamic & Cumstomizable jQuery Any Content Slideshow Plugin - A Slideshow

File Size: 227KB
Views Total: 1116
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Dynamic & Cumstomizable jQuery Any Content Slideshow Plugin - A Slideshow

(a) Slideshow is a jquery plugin for creating dynamic and controllable slideshows that supports any html elements and comes with a lot of options to customize.

Features:

  • 12 visual effects for transition.
  • Autoplay on load.
  • Fullscreen mode.
  • Multiple slideshows on one page.
  • 8 control elements.
  • Start/Stop Slideshow on mouse click or hover.
  • Supports sliding any html elements (DIV, image, text, ajax content, etc...)
  • Callback events supported.

More examples:

Basic Usage:

1. Include the latest jQuery javascript library and jquery.aslideshow.js script on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.aslideshow.js"></script>

2. Choose and include a theme CSS on your web page.

<link href="js/jquery.aslideshow/shadow/styles.css" media="screen" rel="stylesheet" type="text/css" />

3. Create the html.

<div id="demo">
<a href="1.jpg" title="Title 1">Slide no.1</a>
<a href="2.jpg" title="Title 2">Slide no.2</a>
<a href="i3.jpg" title="Title 3">Slide no.3</a>
</div>

4. Call the plugin with all default options.

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){    
$('#demo').slideshow();
});
//]]>
</script>

5. Available options.

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#demo').slideshow({
width:320,  // width in px
height:240, // height in px
index:0,// start from frame number N
time:3000,  // time out beetwen slides
history:false,  // change/check location hash 
title:true, // show title
titleShow:false,// always show title
panel:true, // show controls panel
play:false, // play slideshow
loop:true,  // looping
effect:'fade',  // aviable fade, scrollUp/Down/Left/Right, zoom, zoomFade, growX, growY
effectTime:1000,// aviable fast,slow,normal and any valid fx speed value
filter:true,// remove <br/>, empty <div>, <p> and other stuff
nextClick:false,  // bind content click next slide
playClick:false,  // bind content click play/stop
playHover:false,  // bind content hover play/stop
playHoverr:false, // bind content hover stop/play (reverse of playhover)
playFrame:true,   // show frame "Play Now!"
loadFrame:true,   // show frame with "loading"
fullScreen:false, // in full window size
imageResize:false,  // resize image to slideshow window
imageZoom:true, // zoom image to slideshow window (for smaller side)
imageCenter:true,   // set image to center
imageAjax:true, // load images from links
imageLink:true, // go to external link by click
linkAjax:false,   // load html from links
controls :{ // show/hide controls elements
'hide':true,// show controls bar on mouse hover
'first':true,   // goto first frame
'prev':true,// goto previouse frame (if it first go to last)
'play':true,// play slideshow
'next':true,// goto next frame (if it last go to first)
'last':true,// goto last frame
'help':true,// show help message
'counter':true  // show slide counter
}
});
});
//]]>
</script>

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