<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Slideshow.aspx.cs" Inherits="_Slideshow" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Slideshow...</title>
<link type="text/css" rel="stylesheet" href="AnimatedCollapsiblePanel.css" />
<script language="javascript" type="text/javascript" src="AnimatedCollapsiblePanel.js"></script>
<script language="JavaScript" type="text/javascript">
//for XML
var xmlDoc,
xmlDescription;
//for Slide
var slideHeight = "250",
slideWidth = "450",
appliedFielter = "blendTrans(duration=1)";
//for Images
var dimages=new Array(),
arrDesc=new Array();
//for Other
var starterKey,
currentPage=0;
//for Pagging
var strPaging,
containerPaging,
_previousPage=null,
_currentPage = null,
totalPages=0,
Loop=true,
slideSpeed = 5000,
pageStyle = "number",
pagecellpadding = "2px",
pagecellspacing = "2px",
pageBackground = "darkgray",
selectedpageBackground = "red",
pageFontcolor = "white",
pageCursor = "pointer",
pageAlign= "center";
//for description
var descTransparent = 40,
descLeft = 250,
descTop = 50,
descWidth = 290,
descHeight = 120,
deschFont = "verdana",
deschFontColor = "black",
deschFontSize = "12pt",
deschFontWeight = "bold",
descdFont = "verdana",
descdFontColor = "darkgray",
descdFontSize = "10pt",
backgroundIMG = "",
descdFontWeight = "normal";
var txtPaddingLeft = "4px",
txtPaddingRight = "4px",
txtPaddingTop = "4px",
txtPaddingBottom = "4px";
function getFielter()
{
appliedFielter = document.getElementById('drpFilter').value;
}
function preload()
{
//for Slide
var slide = document.getElementById("imgFilter");
slide.height = slideHeight;
slide.width = slideWidth;
var Description = document.getElementById("divDescription");
with(Description.style)
{
background="url("+ backgroundIMG +")";
left = descLeft;
top = descTop;
width = descWidth;
height = descHeight;
filter = "alpha(opacity="+ descTransparent +")";
}
var _head = document.getElementById('divsihead');
with(_head.style)
{
fontFamily = deschFont;
color = deschFontColor;
fontSize = deschFontSize;
fontWeight = deschFontWeight;
}
var _desc = document.getElementById('divsidesc');
with(_desc.style)
{
fontFamily = descdFont;
color = descdFontColor;
fontSize = descdFontSize;
fontWeight = descdFontWeight;
}
var _tblDescription = document.getElementById('tblDescription');
with(_tblDescription.style)
{
paddingTop = txtPaddingTop;
paddingRight = txtPaddingRight;
paddingBottom = txtPaddingBottom;
paddingLeft = txtPaddingLeft;
}
getFielter();
switch(pageStyle)
{
case "image":
containerPaging = document.getElementById('divPagingImg');
for (i=0; i<totalPages; i++)
{
dimages[i]=new Image();
dimages[i].src= arrDesc[i][1];
}
break;
default:
containerPaging = document.getElementById('divPagingNo');
var tblWidth = totalPages*15;
strPaging = "";
strPaging += "<table width='"+ tblWidth +"px' cellpadding='"+pagecellpadding+"' cellspacing='"+ pagecellspacing +"'>" ;
strPaging += "<tr>";
for (i=0; i<totalPages; i++)
{
dimages[i]=new Image();
dimages[i].src= arrDesc[i][1];
strPaging +="<td id='td"+ i +"' style='cursor:"+ pageCursor +"; background-color:"+ pageBackground +"'><a onclick='javascript:currentPage="+ i +"; transformPicture();' href='#' style='color:"+ pageFontcolor +"' title='Go to page: "+ (i+1) +"'>"+ (i+1) +"</a></td>"
}
strPaging +="</tr>";
strPaging += "</table>";
containerPaging.innerHTML = strPaging;
break;
}
containerPaging.style.display='';
containerPaging.align=pageAlign;
transformPicture(0);
}
function transformPicture()
{
if(Loop==false && totalPages<=currentPage)
{
window.clearInterval(starterKey);
return;
}
if (totalPages<=currentPage) currentPage=0;
var containerFilter = document.getElementById("imgFilter");
var target;
if (containerFilter && containerFilter.style && containerFilter.style.filters) target=containerFilter;
if (document.all && document.getElementById("imgFilter")) target= document.getElementById("imgFilter");
target.style.filter=appliedFielter;
if (target.filters && target.filters[0]) target.filters[0].Apply();
target.src=dimages[currentPage].src;
if (target.filters && target.filters[0]) target.filters[0].Play();
//Paging style
switch(pageStyle)
{
case "number":
if(_previousPage!=null)
{
_previousPage.style.background=pageBackground;
}
_currentPage = document.getElementById('td'+currentPage);
_currentPage.style.background=selectedpageBackground;
_previousPage = _currentPage;
break;
}
//Slide title
var title = document.getElementById('divTitle');
title.innerHTML = arrDesc[currentPage][2];
//alert(imdad);
var heading = document.getElementById('divsihead');
heading.innerHTML = arrDesc[currentPage][3];
var desc = document.getElementById('divsidesc');
desc.innerHTML = arrDesc[currentPage][4];
currentPage+=1;
starterKey = setTimeout("transformPicture("+ currentPage +")", slideSpeed);
}
function importXML()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDescription = document.implementation.createDocument("", "", null);
xmlDescription.onload = getDescription;
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = getData;
}
else if (window.ActiveXObject)
{
xmlDescription = new ActiveXObject("Microsoft.XMLDOM");
xmlDescription.onreadystatechange = function ()
{
if (xmlDescription.readyState == 4) getDescription()
};
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function ()
{
if (xmlDoc.readyState == 4) getData()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDescription.load("details.xml");
xmlDoc.load("settings.xml");
}
function getData()
{
var i = (xmlDoc.childNodes[1])? 1 : 0
with(xmlDoc.childNodes[i].childNodes[0])
{
Loop = (childNodes[2].childNodes[0].text==true)? true : false;
slideSpeed = childNodes[1].childNodes[0].text;
//for Pagging
pagecellpadding = childNodes[3].childNodes[0].text;
pagecellspacing = childNodes[4].childNodes[0].text;
pageBackground = childNodes[7].childNodes[0].text;
selectedpageBackground = childNodes[8].childNodes[0].text;
pageFontcolor = childNodes[5].childNodes[0].text;
pageCursor = childNodes[6].childNodes[0].text;
pageAlign = childNodes[9].childNodes[0].text;
pageStyle = childNodes[10].childNodes[0].text;
//for slide
slideHeight = childNodes[11].childNodes[0].text;
slideWidth = childNodes[12].childNodes[0].text;
//for description
descTransparent = childNodes[13].childNodes[0].text;
descLeft = childNodes[14].childNodes[0].text;
descTop = childNodes[15].childNodes[0].text;
descWidth = childNodes[16].childNodes[0].text;
descHeight = childNodes[17].childNodes[0].text;
deschFont = childNodes[18].childNodes[0].text;
deschFontColor = childNodes[19].childNodes[0].text;
deschFontSize = childNodes[20].childNodes[0].text;
deschFontWeight = childNodes[21].childNodes[0].text;
descdFont = childNodes[22].childNodes[0].text;
descdFontColor = childNodes[23].childNodes[0].text;
descdFontSize = childNodes[24].childNodes[0].text;
descdFontWeight = childNodes[25].childNodes[0].text;
backgroundIMG = childNodes[26].childNodes[0].text;
txtPaddingTop = childNodes[27].childNodes[0].text;
txtPaddingRight = childNodes[28].childNodes[0].text;
txtPaddingBottom = childNodes[29].childNodes[0].text;
txtPaddingLeft = childNodes[30].childNodes[0].text;
preload();
}
}
function getDescription()
{
var i = (xmlDescription.childNodes[1])? 1 : 0
totalPages=xmlDescription.childNodes[1].childNodes.length;
with(xmlDescription.childNodes[1])
{
for(var s=0;s<childNodes.length;s++)
{
arrDesc[s] = new Array(6);
arrDesc[s][0] = childNodes[s].childNodes[0].text; //Image URL
arrDesc[s][1] = childNodes[s].childNodes[1].text; //Image Path
arrDesc[s][2] = childNodes[s].childNodes[2].text; //Slide Title
arrDesc[s][3] = childNodes[s].childNodes[3].text; //Text Title
arrDesc[s][4] = childNodes[s].childNodes[4].text; //Text Description
arrDesc[s][5] = childNodes[s].childNodes[5].text; //Link URL
}
}
}
function openWindow(h,w,t,s)
{
var theURL = arrDesc[(currentPage<=0)? currentPage : currentPage-1][5];
target = t||'_blank'; //Default target = Blank
var height=h||screen.width; //Default height = 100%
var width=w||screen.height; //Default width = 100%
var left = Math.floor( (screen.width - width) / 2);
var top = Math.floor( (screen.height - height) / 2);
var scroll = s||'no'; //Default scroll = No
var winParms = "top=" + top + ",left=" + left + ",height=" + height + ",width=" + width +",scrollbars="+ scroll +",modal=yes";
window.open(theURL,target,winParms);
}
</script>
</head>
<body style="font-family: Verdana; font-size: 10pt; margin-top: 0px; margin-right: 0px;
margin-bottom: 0px; margin-left: 0px; width: 100%; height: 100%" onload="importXML();">
<form id="form1" runat="server">
<div style="width: 100%; height: 100%;">
<table style="width: 100%; height: 100%" cellpadding="0px" cellspacing="0px" border="0">
<tr align="center" valign="middle">
<td>
<table cellpadding="0px" cellspacing="0px" border="0">
<tr>
<td>
<div >
<div class="squarebox">
<div class="squareboxgradientcaption" style="height: 20px;">
<div id="divTitle" style="float: left">
Slideshow</div>
<div style="float: right; vertical-align: middle">
</div>
</div>
<div style="position:relative;">
<a style="text-decoration:none; color:White;" onclick="openWindow(500,500,'_blank','no');"><img id="imgFilter" src="Images/1.jpg" alt="Slideshow" /></a>
<div id="divDescription" style="position:absolute;">
<table id="tblDescription" cellpadding="0px" cellspacing="0px" style="width:100%">
<tr>
<td><div id="divsihead" style="float:left"></div></td>
</tr>
<tr>
<td><div id="divsidesc" style="float:left"></div></td>
</tr>
</table>
</div>
</div>
</div>
<img width="100%" height="20" alt="" src="Images/shadow.gif" />
</div>
</td>
</tr>
<tr valign="top">
<td>
<table style="width: 100%" cellpadding="0px" cellspacing="0px" border="0px">
<tr style="background-color:WhiteSmoke">
<td>
<div id="divPagingNo" style="width: 100%; display:none;">
</div>
<div id="divPagingImg" style="width: 100%; display:none;">
<table>
<tr>
<td><img id="imgFirst" alt="Go First" src="Images/first.gif" onclick="javascript:currentPage=0; transformPicture();" /></td>
<td><img id="imgPrevious" alt="Go Previous" src="Images/previous.gif" onclick="javascript:currentPage-=1; transformPicture();" /></td>
<td><img id="imgPlay" alt="Play" src="Images/play.gif" onclick="javascript:transformPicture();" /></td>
<td><img id="imgStop" alt="Stop" src="Images/stop.gif" onclick="javascript:transformPicture();" /></td>
<td><img id="imgNext" alt="Go Next" src="Images/next.gif" onclick="javascript:currentPage+=1; transformPicture();" /></td>
<td><img id="imgLast" alt="Go Last" src="Images/last.gif" onclick="javascript:currentPage=totalPages; transformPicture();" /></td>
</tr>
</table>
</div>
</td>
</tr>
<tr valign="top">
<td>
<div style="width: 100%;">
<div class="squarebox">
<div class="squareboxgradientcaption" style="height: 20px; cursor: pointer;" onclick="togglePannelAnimatedStatus(this.nextSibling,50,50)">
<div style="float: left">
Settings</div>
<div style="float: right; vertical-align: middle">
<img src="Images/expand.gif" width="13" height="14" border="0" alt="Show/Hide" title="Show/Hide" /></div>
</div>
<div class="squareboxcontent" style="display: none">
<fieldset class="squareboxcontent">
<legend>General</legend>
<table style="width: 100%" border="0px">
<tr align="left">
<td style="width: 15%">
Filter</td>
<td style="width: 35%">
<asp:DropDownList ID="drpFilter" runat="server">
<asp:ListItem Value="blendTrans(duration=1)">Fade</asp:ListItem>
<asp:ListItem Value="revealTrans(duration=1, transition=0)">Box In</asp:ListItem>
<asp:ListItem Value="revealTrans( transition=1, duration=1)">Box Out</asp:ListItem>
<asp:ListItem Value="progid:DXImageTransform.Microsoft.Pixelate(duration=3)">Pixellate</asp:ListItem>
<asp:ListItem Value="revealTrans(duration=1, transition=2)">Circle In</asp:ListItem>
<asp:ListItem Value="revealTrans(duration=1, transition=3)">Circle Out</asp:ListItem>
<asp:ListItem Value="revealTrans(duration=1, transition=10)">Horizontal Checkerboard</asp:ListItem>
<asp:ListItem Value="revealTrans(duration=1, transition=11)">Vertical Checkerboard</asp:ListItem>
<asp:ListItem Value="revealTrans(duration=1, transition=12)">Dissolve</asp:ListItem>
<asp:ListItem Value="revealTrans(duration=1, transition=4)">Wipe Up</asp:ListItem>
<asp:ListItem Value="progid:DXImageTransform.Microsoft.gradientWipe(duration=1)">GradientWipe</asp:ListItem>
<asp:ListItem Value="progid:DXImageTransform.Microsoft.Spiral(duration=3, GridSizeX=205, GridSizeY=205)">Spiral</asp:ListItem>
<asp:ListItem Value="progid:DXImageTransform.Microsoft.Wheel((duration=3, spokes=10)">Wheel</asp:ListItem>
<asp:ListItem Value="progid:DXImageTransform.Microsoft.RadialWipe(duration=3)">RadialWipe</asp:ListItem>
<asp:ListItem Value="progid:DXImageTransform.Microsoft.Iris((duration=3)">Iris</asp:ListItem>
<asp:ListItem Value="revealTrans(duration=3, transition=20)">Strips</asp:ListItem>
<asp:ListItem Value="revealTrans(duration=3, transition=14)">Barn</asp:ListItem>
</asp:DropDownList>
</td>
<td style="width: 20%">
Speed</td>
<td style="width: 30%">
<input type="text" style="width: 50px" value="5000" id="txtspeed" />
</td>
</tr>
<tr align="left">
<td>Height</td>
<td><input type="text" style="width: 50px" value="250" id="txtheight" /></td>
<td>Width</td>
<td><input type="text" style="width: 50px" value="450" id="txtwidth" /></td>
</tr>
<tr align="left">
<td>
Loop</td>
<td>
<input type="checkbox" id="chkloop" /></td>
<td>Page Style
</td>
<td>
<asp:RadioButtonList ID="rbpagestyle" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
<asp:ListItem Value="number" Selected="True">Number</asp:ListItem>
<asp:ListItem Value="image">Image</asp:ListItem>
</asp:RadioButtonList></td>
</tr>
</table>
</fieldset>
<fieldset class="squareboxcontent">
<legend>Pagging</legend>
<table style="width: 100%" border="0px">
<tr align="left">
<td style="width: 40%">
Cell Padding</td>
<td style="width: 10%">
<input type="text" style="width: 50px" value="2px" id="txtcpadding" /></td>
<td style="width: 40%">
Cell Spacing</td>
<td style="width: 10%">
<input type="text" style="width: 50px" value="2px" id="txtcspacing" /></td>
</tr>
<tr align="left">
<td>
Font Color</td>
<td>
<input type="text" style="width: 50px" value="white" id="txtfont" /></td>
<td>
Cursor</td>
<td>
<asp:DropDownList ID="drpcursor" runat="server">
<asp:ListItem Selected="True" Value="pointer">pointer</asp:ListItem>
<asp:ListItem Value="default">default</asp:ListItem>
<asp:ListItem Value="crosshair">crosshair</asp:ListItem>
<asp:ListItem Value="hand">hand</asp:ListItem>
<asp:ListItem Value="move">move</asp:ListItem>
<asp:ListItem Value="text">text</asp:ListItem>
<asp:ListItem Value="wait">wait</asp:ListItem>
<asp:ListItem Value="help">help</asp:ListItem>
<asp:ListItem Value="n-resize">n-resize</asp:ListItem>
<asp:ListItem Value="ne-resize">ne-resize</asp:ListItem>
<asp:ListItem Value="e-resize">e-resize</asp:ListItem>
<asp:ListItem Value="se-resize">se-resize</asp:ListItem>
<asp:ListItem Value="s-resize">s-resize</asp:ListItem>
<asp:ListItem Value="sw-resize">sw-resize</asp:ListItem>
<asp:ListItem Value="w-resize">w-resize</asp:ListItem>
<asp:ListItem Value="nw-resize">nw-resize</asp:ListItem>
<asp:ListItem Value="progress">progress</asp:ListItem>
<asp:ListItem Value="not-allowed">not-allowed</asp:ListItem>
<asp:ListItem Value="no-drop">no-drop</asp:ListItem>
<asp:ListItem Value="vertical-text">vertical-text</asp:ListItem>
<asp:ListItem Value="all-scroll">all-scroll</asp:ListItem>
<asp:ListItem Value="col-resize">col-resize</asp:ListItem>
<asp:ListItem Value="row-resize">row-resize</asp:ListItem>
<asp:ListItem Value="url(uri)">url(uri)</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr align="left">
<td>
Background Color</td>
<td>
<input type="text" style="width: 50px" value="darkgray" id="Text2" /></td>
<td>
Selected BG Color</td>
<td>
<input type="text" style="width: 50px" value="red" id="txtselectedback" /></td>
</tr>
<tr align="left">
<td>
Align</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Selected="True" Value="center">center</asp:ListItem>
<asp:ListItem Value="left">left</asp:ListItem>
<asp:ListItem Value="right">right</asp:ListItem>
</asp:DropDownList></td>
<td>
</td>
<td>
<input type="button" value="Apply" name="B4" onclick="getFielter();">
</td>
</tr>
</table>
</fieldset>
</div>
</div>
<img width="100%" height="20" alt="" src="Images/shadow.gif" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Submit an article or tip