Wednesday, September 21

sliding Image in pop up


<%@ 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.

ShibashishMnty
shibashish mohanty