<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImagedemoPage.aspx.cs" Inherits="ImagedemoPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="shibashish" %>
<!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>Image Thumbnail Borwser</title>
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.thumbnail{
height: 100px;
width: 130px;
cursor: hand;
}
.imgpopup{
height: 576px;
width: 768px;
}
</style>
<script type="text/javascript">
var currentImgId = 'img01';
function onNextImageClick(){
switch(currentImgId){
case 'img01':
currentImgId = 'img02';
break;
case 'img02':
currentImgId = 'img03';
break;
case 'img03':
currentImgId = 'img04';
break;
case 'img04':
currentImgId = 'img05';
break;
case 'img05':
currentImgId = 'img01';
break;
default:
alert("Unknown image!");
}
togglePopupImage($get(currentImgId));
}
function onPreviousImageClick(){
switch(currentImgId){
case 'img01':
currentImgId = 'img05';
break;
case 'img02':
currentImgId = 'img01';
break;
case 'img03':
currentImgId = 'img02';
break;
case 'img04':
currentImgId = 'img03';
break;
case 'img05':
currentImgId = 'img04';
break;
default:
alert("Unknown image!");
}
togglePopupImage($get(currentImgId));
}
function togglePopupImage(thumbnail){
$get('spnImageText').innerHTML = thumbnail.alt;
$get('imgPopup').src = thumbnail.src;
}
</script>
</head>
<body>
<form id="form" runat="server">
<asp:ScriptManager ID="scriptManager" runat="server" />
<div>
<p style="background-color:Maroon; width:95%; color: #FFFFFF; font-style: italic; font-weight: bolder; font-size: xx-large;">
This is one of the best article prepared by shibashish mohanty Software developer In TreztechSolution.<br />
</p>
<img
id="img01" runat="server" class="thumbnail"
src="~/Img/01.jpg" alt="Shibashish Provides You a better calender image for use" onclick="togglePopupImage(this);" />
<shibashish:ModalPopupExtender
runat="server" TargetControlID="img01" PopupControlID="pnlPopup"
BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="btnCancel" />
<img
id="img02" runat="server" class="thumbnail"
src="~/Img/02.jpg" alt="Please explore your Mind Sugested By Shibashish" onclick="togglePopupImage(this);" />
<shibashish:ModalPopupExtender
runat="server" TargetControlID="img02" PopupControlID="pnlPopup"
BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="btnCancel" />
<img
id="img03" runat="server" class="thumbnail"
src="~/Img/03.jpg" alt="Its the Logo of Our Preveous Project" onclick="togglePopupImage(this);" />
<shibashish:ModalPopupExtender
runat="server" TargetControlID="img03" PopupControlID="pnlPopup"
BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="btnCancel" />
<img
id="img04" runat="server" class="thumbnail"
src="~/Img/04.jpg" alt="Nothing is in our hand" onclick="togglePopupImage(this);" />
<shibashish:ModalPopupExtender
runat="server" TargetControlID="img04" PopupControlID="pnlPopup"
BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="btnCancel" />
<img
id="img05" runat="server" class="thumbnail"
src="~/Img/05.jpg" alt="Its the Logo of Our Preveous Project" onclick="togglePopupImage(this);" />
<shibashish:ModalPopupExtender
runat="server" TargetControlID="img05" PopupControlID="pnlPopup"
BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="btnCancel" />
<asp:Panel ID="pnlPopup" runat="server">
<table>
<tr>
<td colspan="2">
<img id="imgPopup" class="imgpopup" runat="server" />
</td>
</tr>
<tr>
<td>
<span id="spnImageText" />
</td>
<td align="right">
<asp:Button ID="Button1" runat="server" Text="Previous" OnClientClick="onPreviousImageClick(); return false;" />
<asp:Button ID="Button2" runat="server" Text="Next" OnClientClick="onNextImageClick(); return false;" />
<asp:Button ID="btnCancel" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
</div>
</form>
</body>
</html>
By click on a image it will display in pop up and u can move to any direction i,e by click on previous or next button
No comments:
Post a Comment
Please don't spam, spam comments is not allowed here.