Tuesday 26 April 2011

Sliding Banner with Jquery

It is very common to have a sliding banner in flash.I do try same with jquery.Here is a sample code with explanations:
My cenario is that if there are 5 pages in an application.then on each page, banner should be according to that page.Now first of all i get pageId on page_load and then according to this pageId i get image names from database.these images are stored in image folder in my root directory.if there is some href against a banner then the cursor get chang when it is on the banner.otherwise not.
all of these name are concatenated in a string.and then this strin is passed to client side.

<div id="divSlideShow" runat="server" style="display: none;">
<a id="banner1href"><img id="banner1" style="display: none;" /></a>
<a id="banner2href"><img id="banner2"style="display: none;" /></a>
</div>

In the above code i have declared two img controls.one of them is displayed at a time and other is display:none.
Here is my Jquery Code

<script type="text/javascript" language="javascript">
        var ImageToggle = "1";
        var slideimages=new Array(); //string of image name is splitted and stored in this array.
        var slideURLs=new Array(); // string of image url is splitted and stored in this array.
        var slideshowspeed = 10000; //this variable is used in setTimeout method as time interval.
        var whichimage = 0;             //this variable is used to assign specific image in array.
        var staticUrl='<%=StaticURLsString %>' //stores static url.
//this function set default cursor depending on  above variable 'StaticUrl'.
 function staticDivCursor()
        {
        if(staticUrl=='#')
            {
               $("#staticBanner").attr('style', "cursor:default;");
            }  
        }

        //this function fill image array 'slideimages'.

        function slideShowImages()
        {
            for (i=0;i<slideShowImages.arguments.length;i++)
            {
                slideimages[i]=new Image();
                slideimages[i].src=slideShowImages.arguments[i];
            }
        }
        //set URL according to image.
        function slideShowURLs()
        {
            for (i=0;i<slideShowURLs.arguments.length;i++)
            {
                slideURLs[i]=slideShowURLs.arguments[i];
            }
        }
//this is main function which slide images.
        function slideit()
        {
            if (!document.images)
            {
                return
            }
            if(ImageToggle=="1")
            {             
                $("#banner2").fadeOut("fast",function()
                                                    {
                                                    $("#banner1").fadeIn("fast",function(){
                                                    if(slideURLs[whichimage]=='#')
                                                    {
                                                    $("#banner1").attr('style', "cursor:default;");
                                                    }                                                   
                                                    });
                                                    });               
                $("#banner1").attr('src', slideimages[whichimage].src);
                $("#banner1href").attr('href', slideURLs[whichimage]);
                ImageToggle="2";
            }
            else if(ImageToggle=="2")
            {            
               $("#banner1").fadeOut("fast",function(){
                                                  $("#banner2").fadeIn("fast",function(){
                                                  if(slideURLs[whichimage]=='#')
                                                  {
                                                  $("#banner2").attr('style', "cursor:default;");
                                                  }
                                                  });
                                                  });
               $("#banner2").attr('src', slideimages[whichimage].src);
               $("#banner2href").attr('href', slideURLs[whichimage]);
                ImageToggle="1";
            }
            if (whichimage < slideimages.length - 1)
            {
                whichimage++;
            }
            else
            {
                whichimage = 0;
            }
            setTimeout("slideit()", slideshowspeed);
        } 
//as all the function are defined they are called here on documetn.ready stage.     
        $(document).ready(function()
        {       
            slideShowImages(<%=ImageString%>);
            slideShowURLs(<%=URLsString%>);
            slideit();
            staticDivCursor();               
        });
    </script>

if you feel me not a good explainer.then sorry for that but you may query where you feel confusing.and if there is something wrong and you have a effecient approach then i will appriciat if you share with me.
Thanx
Muhammad Khalil

No comments:

Post a Comment