Simple jQuery Slideshow

• Download slideshow.zip - 994 B

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();