|
Create a SlideShow with ASP.NET Panels using jQuery
|
|
Rating: 2 user(s) have rated this article
Posted by: Suprotim Agarwal,
on 5/5/2010,
in category "jQuery and ASP.NET"
Views: this article has been read 21560 times
Abstract: This article demonstrates how to display ASP.NET Panels one after the other, and after a fixed duration, like a slide show.
Create a SlideShow with ASP.NET Panels using jQuery
This article demonstrates how to display Panels one after the other, and after a fixed duration, like a slide show. The Panels should have a sliding effect.
Note that for demonstration purposes, I have included jQuery code and css in the same page. Ideally, these resources should be created in separate folders for maintainability. The code shown below has been tested on IE7, IE8, Firefox 3, Chrome 2 and Safari 4
Let us quickly jump to the solution and see how create a SlideShow with ASP.NET Panels
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.divNoBorder
{
background-color:White;
font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial;
font-size:12px;
color:#000000;
width:510px;
margin-left:auto;
margin-right:auto;
padding:10px;
}
</style>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $divSlide = $("div.slide");
$divSlide.hide().eq(0).show();
var panelCnt = $divSlide.length;
setInterval(panelSlider, 3000);
function panelSlider() {
$divSlide.eq(($divSlide.length++) % panelCnt)
.slideUp("slow", function() {
$divSlide.eq(($divSlide.length) % panelCnt)
.slideDown("slow");
});
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="divNoBorder">
<h2>Slide Show with Panels.
Each Panel is Visible for 3 seconds.</h2>
<br /><br />
<asp:Panel ID="panelOne" runat="server" class='slide'>
Panel 1 Content Panel 1 Content Panel 1 Content
Panel 1 Content Panel 1 Content Panel 1 Content
Panel 1 Content Panel 1 Content Panel 1 Content
Panel 1 Content Panel 1 Content Panel 1 Content
</asp:Panel>
<asp:Panel ID="panelTwo" runat="server" class='slide'>
Panel 2 Content Panel 2 Content Panel 2 Content
Panel 2 Content Panel 2 Content Panel 2 Content
Panel 2 Content Panel 2 Content Panel 2 Content
Panel 2 Content Panel 2 Content Panel 2 Content
</asp:Panel>
<asp:Panel ID="panelThree" runat="server" class='slide'>
Panel 3 Content Panel 3 Content Panel 3 Content
Panel 3 Content Panel 3 Content Panel 3 Content
Panel 3 Content Panel 3 Content Panel 3 Content
Panel 3 Content Panel 3 Content Panel 3 Content
Panel 3 Content Panel 3 Content Panel 3 Content
</asp:Panel>
<asp:Panel ID="panelFour" runat="server" class='slide'>
Panel 4 Content Panel 4 Content Panel 4 Content
Panel 4 Content Panel 4 Content Panel 4 Content
</asp:Panel>
<asp:Panel ID="panelFive" runat="server" class='slide'>
Panel 5 Content Panel 5 Content Panel 5 Content
</asp:Panel>
</div>
</form>
</body>
</html>
The first step is to cache the selector in a variable as shown below:
var $divSlide = $("div.slide");
The example then starts off by hiding all the panels except the first one using
$divSlide.hide().eq(0).show();
We then use the JavaScript setInterval() function to delay the execution of a function (panelSlider) for a specified time, in our case 3000 millisecond (3 seconds).
setInterval(panelSlider, 3000);
The advantage of a setInterval() function is that it continues to repeat the process of triggering the function at the specified interval, thereby giving it a loop effect.
Note: To pause the slideshow, use the clearInterval() function.
The number of panels is stored in a variable panelCnt
var panelCnt = $divSlide.length;
In the panelSlider() function, we use a simple expression ($divSlide.length++) % panelCnt that calculates the index to be supplied to the eq() selector and applies the fadeout/fadeIn() animations on the current panel. eq(0) refers to the first panel, eq(1) to the second and so on.
function panelSlider() {
$divSlide.eq(($divSlide.length++) % panelCnt)
.slideUp("slow", function() {
$divSlide.eq(($divSlide.length) % panelCnt)
.slideDown("slow");
}
The chart shown below helps you understand what happens at every loop
|
Loop Number
|
Value of $divSlide.length
|
Value of ($divSlide.length++) % panelCnt
|
|
1
|
5
|
5mod5 = 0
|
|
2
|
6
|
6mod5 = 1
|
|
3
|
7
|
7mod5 = 2
|
|
4
|
8
|
8mod5=3
|
|
5
|
9
|
9mod5=4
|
|
6
|
10
|
10mod5=0
|
|
and so on….
|
The entire source code of this article can be downloaded over here