Dynamic & Cumstomizable jQuery Any Content Slideshow Plugin - A Slideshow
| File Size: | 227KB |
|---|---|
| Views Total: | 1125 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
(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:
- Default configuration
- Custom configuration
- Auto Play (for banners and etc)
- Multi Slideshow with Auto Play
- Multi Slideshow with Auto Play (It's really slow)
- Start/Stop Slideshow on mouse click
- Start/Stop Slideshow on mouse hover
- 12 visual effects for transition
- Fullscreen
- Use callback function
- AJAX Slideshow
- Use Links
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.










