Introduction
The main purpose of this article is to present a slide show for web form projects.
Using the code
You need to reference the jQuery script in your HTML page:
<script src="jquery-1.9.1.min.js"></script>
also the script for this plug-in:
<script src="slideshow.js"></script>
so you need an Array of objects as the following for slide show
var mySlides = new Array(
{ image: 'images/1.jpg', title: 'Tooltip for slide 1',url:'http://www.google.com' },
{ image: 'images/2.jpg', title: 'Tooltip for slide 2', url: 'http://www.codeproject.com' }
);
Note : Name of members must be as the example.
* mySlides can fill with an AJAX response
Now you can invoke slideshow on any DIV
element
$('#div_SlideShow').slideshow({slides:mySlides});
This is the default call, you can also use these options to have more compatible slideshow:
delay
: Delay between two slides [Default=5000] effect
: jQuery effect name to show and hide slides [Default='blind'] effectDuration
: Duration of effect [Default=500] autostop
: To stop automatically on mousemove and start again on mouseout [Default=true] effectDetail
: Detail of JQuery effects such as : direction , etc. [Default=direction:'right']
A customized call would look like this:
$('#div_SlideShow').slideshow({
slides: Slides,
delay:2000,
effect: 'blind',
effectDuration: 400,
autostop:true,
effectDetail: {
direction:'up'
}
});
And you can Stop and Start slideshow manually like this:
$('#div_SlideShow').stop();
$('#div_SlideShow').start();