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