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

Dynamicaly Generate Page Contents

Today it is Sunday and i am a free for a Little while so i am here to share my experience.last week i decided to make a website totally jquery base.and retrieve data through json.i was thinking to have a single page in whole site and depending on user input different controls should be generated on run time.so here is a little start.

First of all add following libraries in my folder in root directory.

1)   <script src="inc/jquery-1.5.2.min.js" language="javascript"></script>

 2)   <script src="inc/jquery-ui-1.8.11.custom.min.js" language="javascript"></script>

1st one is the basic jquery minified library containing all the basic requirements to implement jQuery.
2nd is user interface library if you have to use draggable() droppable() like functionality the add this one.



 <script language="javascript" type="text/javascript">
        $(document).ready(function() {
 /////////animate images//////////
            $(".image").hover(function() {
                $(this).stop().animate({ height: "230px", width: "230px" }, "fast");
            }, function() { $(this).stop().animate({ height: "200px", width: "200px" }, "fast"); })
            $(".pd_photo").draggable({ containment: "#pd_container" });
            $(".pd_photo").css({ "left": Math.floor(Math.random() * 100) + 'px', "top": Math.floor(Math.random() * 50) + 'px' });
            $(".pd_photo").droppable();

 ///////bring image front/////////
            var highest = 0;
            function findHighestZIndex() {
                var photos = $container.find('.pd_photo');

                photos.each(function() {
                    var $photo = $(this);
                    var zindex = $photo.css('z-index');
                    if (parseInt(zindex) > highest) {
                        highest = zindex;
                    }
                    alert(highest);
                });
                return highest;
            }

var maxz = highest;
            $(".pd_photo").click(function() {
                $(this).css("z-index", maxz);
                maxz = maxz + 1;
            });


all of the above is simply animating my divs containing photos and setting their z-index on click.
now in the following code i have a string containing all the names of photos against a specific user from database.and in a method i split it on , base and then pass each img control a src property.

<script type="text/javascript">
                    function getimage()
                    {                       
                        var imagearray =new Array();
                        function getImages() {
                            for (i = 0; i < getImages.arguments.length-1; i++) {
                                                    imagearray[i] = getImages.arguments[i];
                               
                            }
                        }
                        getImages(<%=imagestr%>);
                       
                        $.each(imagearray, function() {
                            $("#pd_container").append('<div class="pd_photo"><div  style="position: relative"><img id="image" class="image" src="' + this + '" alt="" /><img id="close" src="Images/close.png" alt="Close" class="Close" /></div></div>');                   
                        }
                     )}
                     getimage();
                    
            </script>


in .append the number of div would depend on the images from database.
i don't know here what to explain so if you consider it according to your requirement and you feel it confusing post .then i would feel pleasure on your question in the way of comments.i am not something like master or expert in jquery so if you feel me wrong somewhere then i shall b thank full on your correctness.

Thanks,

Muhammad Khalil

First Publish

wel commmmmmmm to all......Today while i was taking tea and thought about to share my daily work experince as i get much help by the post of my profession felllows.so why not should i...so here is my first one not informative post but starting point.I have to leave for office now after that i will share my daily work experince.