Simple Image SlideShow using jQuery

 have seen a lot of users requesting for simple jQuery scripts for SlideShows. I saw a couple of them, but the scripts assumed that the number of image tags has to be fixed beforehand.
The code given below is taken from my eBook “51 Recipes with jQuery and ASP.NET Controls”.
Note: This code was written when jQuery 1.3.2 was the latest version available. Currently we have jQuery 1.4.2 available.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Simple Image SlideShow</title>
    <link href="../CSS/Demos.css" rel="stylesheet" type="text/css" />
    <script type='text/javascript'
        src='../Scripts/jquery-1.3.2.min.js'>
    </script>
  
    <script type="text/javascript">
        $(function() {    
                
            var imgs = [
                '../images/1.jpg',
                '../images/2.jpg',
                '../images/3.jpg',
                '../images/4.jpg'];
            var cnt = imgs.length;

            var $imageSlide = $('img[id$=imageSlide]');
            // set the image control to the last image
            $imageSlide.attr('src', imgs[cnt-1]);

            setInterval(Slider, 3000);

            function Slider() {
                $imageSlide.fadeOut("slow", function() {
                    $(this).attr('src', imgs[(imgs.length++) % cnt])
                    .fadeIn("slow");
                });
            }
        });
  
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="smallDiv">
        <h2>Image Slide Show - Image Changes Every 3 Seconds</h2><br />
        <asp:Image ID="imageSlide" runat="server" class="imgdiv" />
    </div>      
    </form>
</body>
</html>

This recipe shows you how to create a simple image slideshow that works in modern browsers. This example starts by declaring an array containing image paths. We have declared an image control on the page. When the page loads, the image path of this control is set to the last element of the array. I will explain shortly why this is needed.
var $imageSlide = $('img[id$=imageSlide]');
// set the image control to the last image$imageSlide.attr('src', imgs[cnt-1]);
We then use the JavaScript setInterval() function which delays execution of the Slider function for a specific time, in our case 3000 millisecond(3 seconds). The advantage of a setInterval() function is that it continues to repeat the process of triggering the function at a specified interval, thereby sliding the images in a cycle. If you want to pause the slideshow, use the clearInterval() function.
Note: Since the Slider function is first called after a 3 seconds delay, hence we explicitly set the image control source to the last image path in the array. If we do not do so, the user does not see an image for the first 3 seconds.
With every loop, we set the image control source to the next element in the array using the expression imgs[(imgs.length++) % cnt] and apply the fadeIn() and fadeOut() effect.
function Slider() {
    $imageSlide.fadeOut("slow", function() {
        $(this).attr('src', imgs[(imgs.length++) % cnt])
        .fadeIn("slow");
    });
}
See a Live Demo

Comments

Post a Comment

Popular posts from this blog

GROUP BY, CUBE, ROLLUP and SQL SERVER 2005

Image
  I learn about CUBE and ROLLUP function today and I found it really usefull for generating reports. Let me give you one example where we can use ROLLUP and CUBE. Lets say you are developing the E-Commerce application and administrator wants the report which shows products purchased by all user group by product and buyer. You will say that’s really easy and can write the query as shown below, 1: SELECT CustomerName,CustomerName,SUM(Quantity*PricePerItem) 2: FROM Orders GROUP BY CustomerName,CustomerName Fig – (1) Group By clause.      Which will returns the result as shown below, Fig – (2) Result of GROUP BY clause     However what if you want result as display below, Fig – (3) Desire result        Here ROLLUP and CUBE comes into the picture and help us. The above result is generated using ROLLUP.  ROLLUP adds new row for each column used in GROUP BY clause. First have a look ...
Read more

How to get content of Ckeditor & Fckeditor using Javascript

CKEDITOR: To get content of ckeditor we will create object of ckeditor and then we will provide id of textarea that is replaced by ckeditor. Syntax: CKEDITOR.instances.textarea_id.getData();getData(); Where CKEDITOR.instances   :  gives all the instances of CKEDITOR; textarea_id   : it is ID of textarea that is containing data ; getData()       : return content of Ckeditor current instance. FCKEDITOR: To get content of Fckeditor we will create Instance of Fckeditor for textarea and then we will get data using GetHTML method. Syntax : FCKeditorAPI.GetInstance('textarea_id'). GetHTML(); Where textarea_id     :  it is ID of textarea that is containing data ; GetHTML()             :  This function returns content of textarea with id textarea_id.  
Read more

How to Fix Error- Sys.WebForms.PageRequestManagerTimeoutException - The server request timed out

To solve this problem we can increase the timeout. You can change the timeout time by adding a new property to the script manager control. This property is called AsyncPostBackTimeOut and it can help us to define the number of seconds before the request will throw a request timeout exception*. For example if you want that the timeout will take maximum 10 minutes your code should be look like this: < asp : ScriptManager ID ="ScriptManager1" runat ="server" AsyncPostBackTimeOut ="600" > </ asp : ScriptManager >       * The default value of the AsyncPostBackTimeOut property is 90 seconds.
Read more