Dynamic & Cumstomizable jQuery Any Content Slideshow Plugin - A Slideshow
File Size: | 227KB |
---|---|
Views Total: | 1119 |
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.