Simple Slideshow Plugin For jQuery - fadeSlideShow
File Size: | 409KB |
---|---|
Views Total: | 2961 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

fadeSlideShow is a lightweight and fast slidershow plugin built with jQuery that makes it easier to create an images slideshow with image fade effect and auto play function. It is highly customizable with javascript/HTML/CSS and either can work with any element of your page.
How to use it:
1. Include jQuery and fadeSlideShow.js
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="fadeSlideShow.js"></script>
2. Call the plugin with options
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#slideshow').fadeSlideShow(); }); </script>
3. Markup
<div id="slideshowWrapper"> <ul id="slideshow"> <!-- This is the last image in the slideshow --> <li><img src="images/4.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the last image in the slideshow --> <li><img src="images/3.jpg" width="640" height="480" border="0" alt="" /></li> <li><img src="images/2.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the first image in the slideshow --> <li><img src="images/1.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the first image in the slideshow --> </ul> </div>
4. The CSS
#slideshowWrapper { position: relative; width: 646px; margin: auto; } #fssPrev { position: absolute; top: 169px; left: -67px; background: url(arrows.png) -67px 0px; width: 67px; height: 143px; text-indent: -999999px; } #fssNext { position: absolute; top: 169px; left: 646px; background: url(arrows.png) no-repeat; width: 67px; height: 143px; text-indent: -999999px; } #fssPlayPause { position: absolute; top: 435px; right: 20px; background: url(white.png) repeat; padding: 4px 0 5px 0; -moz-border-radius: 5px; border-radius: 5px; width: 60px; text-align: center; display: block; color: #333; text-decoration: none; } ul#slideshow { list-style: none; border: 1px solid #999; padding: 2px; margin: auto; margin-top: 5%; width: 640px; height: 480px; overflow: hidden; } p { text-align: center; } #fssList { list-style: none; width: 646px; margin: auto; padding: 5px 0 0 45%; } #fssList li { display: inline; padding-right: 10px; } #fssList li a { color: #999; text-decoration: none; } #fssList li.fssActive a { font-weight: bold; color: #333; }
5. Options (Edit in fadeSlideShow.js)
width: 640, // default width of the slideshow height: 480, // default height of the slideshow speed: 'slow', // default animation transition speed interval: 3000, // default interval between image change PlayPauseElement: 'fssPlayPause', // default css id for the play / pause element PlayText: 'Play', // default play text PauseText: 'Pause', // default pause text NextElement: 'fssNext', // default id for next button NextElementText: 'Next >', // default text for next button PrevElement: 'fssPrev', // default id for prev button PrevElementText: '< Prev', // default text for prev button ListElement: 'fssList', // default id for image / content controll list ListLi: 'fssLi', // default class for li's in the image / content controll ListLiActive: 'fssActive', // default class for active state in the controll list addListToId: false, // add the controll list to special id in your code - default false allowKeyboardCtrl: true, // allow keyboard controlls left / right / space autoplay: true // autoplay the slideshow
\
Change Log:
v2.2.0 (2013-02-25)
- Fixed a Problem with the KeyboardCtrl function
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.