Client Side Web Development

Re: To enlarge the image

mudassarkhan — Wed, 08 Jul 2009 05:09:53 GMT

In that case use what I pasted earlier and change accordingly instead of writing your self since your code has many mistakes in it

Re: To enlarge the image

polachan — Wed, 08 Jul 2009 04:58:15 GMT

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="frmEvent.aspx.cs" Inherits="learn.frmEvent" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<style type="text/css"> 
    body    
  
     {    
  
        margin:0;    
  
        padding:0;    
  
        height:100%;     
  
     }    
  
     .modal    
  
     {    
  
        display: none;    
  
        position: absolute;    
  
        top: 0px;    
  
        left: 0px;    
  
        background-color:black;    
  
        z-index:100;    
  
        opacity: 0.8;    
  
        filter: alpha(opacity=60);    
  
        -moz-opacity:0.8;    
  
        min-height: 100%;    
  
     }    
  
     .info    
  
     {    
  
        display: none;    
  
        z-index: 1000;    
  
        position: absolute;    
  
        top: 0;    
  
        left: 0;    
  
        background-color:White;    
  
        height: 550px;    
  
        width: 600px;    
  
        padding: 3px;    
  
        border: solid 1px black;    
  
     }       
</style>  
 
  <script type="text/javascript" language="javascript">
      function LoadDiv(url) 
      {
          var img = new Image();
          var bcgDiv = document.getElementById("divBackground");
          var imgDiv = document.getElementById("divImage");

          var imgFull = document.getElementById("<%=imgFull.ClientID%>");

          var imgLoader = document.getElementById("<%=imgLoader.ClientID%>");
          imgLoader.style.display = "block";

          img.onload = function() 
          {

              imgimgFull.src = img.src;

              imgFull.style.display = "block";

              imgLoader.style.display = "none";

          };
          img.src = url;

          var width = document.body.clientWidth;

          if (document.body.clientHeight > document.body.scrollHeight) {

              bcgDiv.style.height = document.body.clientHeight + "px";

          }

          else {

              bcgDiv.style.height = document.body.scrollHeight + "px";

          }
          imgDiv.style.left = (width - 650) / 2 + "px";

          imgDiv.style.top = "20px";

          bcgDiv.style.width = "100%";



          bcgDiv.style.display = "block";

          imgDiv.style.display = "block";

          return false; 
 
   
      }
      function HideDiv() {

          var bcgDiv = document.getElementById("divBackground");

          var imgDiv = document.getElementById("divImage");

          var imgFull = document.getElementById("<%=imgFull.ClientID%>");

          if (bcgDiv != null) {

              bcgDiv.style.display = "none";

              imgDiv.style.display = "none";

              imgFull.style.display = "none";

          }

      }  
         
  
 </script>    
 


    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        BackColor="#DEBA84" BorderColor="#DEBA84" DataSourceID="SqlDataSource1" 
        Width="1025px" AllowPaging="True" BorderStyle="None" BorderWidth="1px" 
        CellPadding="3" CellSpacing="2">
        <RowStyle BorderStyle="Groove" BackColor="#FFF7E7" ForeColor="#8C4510" />
        <Columns>
            <asp:BoundField DataField="ObjectName" HeaderText="Name" 
                SortExpression="ObjectName">
            <ItemStyle Width="600px" />
            </asp:BoundField>
            <asp:BoundField DataField="EventDate" HeaderText="Date" 
                SortExpression="EventDate" DataFormatString="{0:d}" />
            <asp:BoundField DataField="Description" HeaderText="Description" 
                SortExpression="Description">
            <ItemStyle Width="600px" />
            </asp:BoundField>
            <asp:TemplateField HeaderText="Picture">
                <ItemTemplate>
                    <asp:ImageButton ID="ImageButton1" runat="server" Height="43px" Width="107px"
                    ImageUrl='<%# Eval("FilePath")%>' OnClientClick = "return LoadDiv(this.src);"/>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
        <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BorderStyle="Groove" />
    </asp:GridView>
    <div id="divImage" class = "info">
    <table style="height: 100%; width: 100%">
    <tr> 
    <td valign="middle" align="center">
    <img runat = "server" id="imgLoader"  alt="" src="images/dianna.gif" />
    <img runat = "server" id="imgFull"  alt="" src="" style="display: none;    
     height: 500px;width: 590px" />   
    
    </td>
    </tr>
    <tr>   
    <td align="center" valign="bottom">    
  
                <input id="btnClose" type="button" value="close"    
  
                 onclick="HideDiv()"/>    
  
            </td>  
    </tr>
    </table>
    </div> 
    
    
    
     

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
        SelectCommand="SELECT [ObjectName], [EventDate], [Description], [FilePath], [ObjectType] FROM  [LearnPlus].[WhoAmI]
        WHERE ObjectType = 'E'"></asp:SqlDataSource>
</asp:Content>

I removed that line from there . Still that function OnClientClick = "return LoadDiv(this.src);" is not working.

Re: To enlarge the image

mudassarkhan — Wed, 08 Jul 2009 02:03:25 GMT

polachan:

<img runat = "server" id="imgFull" runat="server" alt="" src="" style="display: none;

height: 500px;width: 590px" />

remove one runat="server" from the above line

Ignore the style tags warning

Re: To enlarge the image

polachan — Tue, 07 Jul 2009 21:43:10 GMT

Thanks a lot for ur help with patience to solve my problem .

I changed my code as same as that you given But I dont know where is the problem. Still enlarge of the image is not happening. I want to paste here my code full.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="frmEvent.aspx.cs" Inherits="learn.frmEvent" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<style type="text/css"> 
    body    
  
     {    
  
        margin:0;    
  
        padding:0;    
  
        height:100%;     
  
     }    
  
     .modal    
  
     {    
  
        display: none;    
  
        position: absolute;    
  
        top: 0px;    
  
        left: 0px;    
  
        background-color:black;    
  
        z-index:100;    
  
        opacity: 0.8;    
  
        filter: alpha(opacity=60);    
  
        -moz-opacity:0.8;    
  
        min-height: 100%;    
  
     }    
  
     .info    
  
     {    
  
        display: none;    
  
        z-index: 1000;    
  
        position: absolute;    
  
        top: 0;    
  
        left: 0;    
  
        background-color:White;    
  
        height: 550px;    
  
        width: 600px;    
  
        padding: 3px;    
  
        border: solid 1px black;    
  
     }       
</style>  
 
  <script type="text/javascript" language="javascript">
      function LoadDiv(url) 
      {
          var img = new Image();
          var bcgDiv = document.getElementById("divBackground");
          var imgDiv = document.getElementById("divImage");

          var imgFull = document.getElementById("<%=imgFull.ClientID%>");

          var imgLoader = document.getElementById("<%=imgLoader.ClientID%>");
          imgLoader.style.display = "block";

          img.onload = function() 
          {

              imgimgFull.src = img.src;

              imgFull.style.display = "block";

              imgLoader.style.display = "none";

          };
          img.src = url;

          var width = document.body.clientWidth;

          if (document.body.clientHeight > document.body.scrollHeight) {

              bcgDiv.style.height = document.body.clientHeight + "px";

          }

          else {

              bcgDiv.style.height = document.body.scrollHeight + "px";

          }
          imgDiv.style.left = (width - 650) / 2 + "px";

          imgDiv.style.top = "20px";

          bcgDiv.style.width = "100%";



          bcgDiv.style.display = "block";

          imgDiv.style.display = "block";

          return false; 
 
   
      }
      function HideDiv() {

          var bcgDiv = document.getElementById("divBackground");

          var imgDiv = document.getElementById("divImage");

          var imgFull = document.getElementById("<%=imgFull.ClientID%>");

          if (bcgDiv != null) {

              bcgDiv.style.display = "none";

              imgDiv.style.display = "none";

              imgFull.style.display = "none";

          }

      }  
         
  
 </script>    
 


    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        BackColor="#DEBA84" BorderColor="#DEBA84" DataSourceID="SqlDataSource1" 
        Width="1025px" AllowPaging="True" BorderStyle="None" BorderWidth="1px" 
        CellPadding="3" CellSpacing="2">
        <RowStyle BorderStyle="Groove" BackColor="#FFF7E7" ForeColor="#8C4510" />
        <Columns>
            <asp:BoundField DataField="ObjectName" HeaderText="Name" 
                SortExpression="ObjectName">
            <ItemStyle Width="600px" />
            </asp:BoundField>
            <asp:BoundField DataField="EventDate" HeaderText="Date" 
                SortExpression="EventDate" DataFormatString="{0:d}" />
            <asp:BoundField DataField="Description" HeaderText="Description" 
                SortExpression="Description">
            <ItemStyle Width="600px" />
            </asp:BoundField>
            <asp:TemplateField HeaderText="Picture">
                <ItemTemplate>
                    <asp:ImageButton ID="ImageButton1" runat="server" Height="43px" Width="107px"
                    ImageUrl='<%# Eval("FilePath")%>' OnClientClick = "return LoadDiv(this.src);"/>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
        <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BorderStyle="Groove" />
    </asp:GridView>
    <div id="divImage" class = "info">
    <table style="height: 100%; width: 100%">
    <tr> 
    <td valign="middle" align="center">
    <img runat = "server" id="imgLoader" runat="server" alt="" src="images/dianna.gif" />
    <img runat = "server" id="imgFull" runat="server" alt="" src="" style="display: none;    
     height: 500px;width: 590px" />   
    
    </td>
    </tr>
    <tr>   
    <td align="center" valign="bottom">    
  
                <input id="btnClose" type="button" value="close"    
  
                 onclick="HideDiv()"/>    
  
            </td>  
    </tr>
    </table>
    </div> 
    
    
    
     

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
        SelectCommand="SELECT [ObjectName], [EventDate], [Description], [FilePath], [ObjectType] FROM  [LearnPlus].[WhoAmI]
        WHERE ObjectType = 'E'"></asp:SqlDataSource>
</asp:Content>

Re: To enlarge the image

mudassarkhan — Tue, 07 Jul 2009 08:23:03 GMT

Firstly I should say you are hurying too much slow down a bit

you are forgetting pieces of code without the DIV how will you show the Image

Try this it worked for me

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<style type="text/css"> 

     body 

     { 

        margin:0; 

        padding:0; 

        height:100%;  

     } 

     .modal 

     { 

        display: none; 

        position: absolute; 

        top: 0px; 

        left: 0px; 

        background-color:black; 

        z-index:100; 

        opacity: 0.8; 

        filter: alpha(opacity=60); 

        -moz-opacity:0.8; 

        min-height: 100%; 

     } 

     .info 

     { 

        display: none; 

        z-index: 1000; 

        position: absolute; 

        top: 0; 

        left: 0; 

        background-color:White; 

        height: 550px; 

        width: 600px; 

        padding: 3px; 

        border: solid 1px black; 

     } 

</style> 

     <script type="text/javascript" language="javascript">  
    function LoadDiv(url) 

 { 

    var img = new Image(); 

    var bcgDiv = document.getElementById("divBackground"); 

    var imgDiv = document.getElementById("divImage"); 

    var imgFull = document.getElementById("<%=imgFull.ClientID%>"); 

    var imgLoader= document.getElementById("<%=imgLoader.ClientID%>"); 

  

    imgLoader.style.display = "block"; 

    img.onload = function() { 

        imgFull.src = img.src; 

        imgFull.style.display = "block"; 

        imgLoader.style.display = "none"; 

    }; 

    img.src= url; 

    var width = document.body.clientWidth; 

    if (document.body.clientHeight > document.body.scrollHeight) 

    { 

        bcgDiv.style.height = document.body.clientHeight + "px"; 

    } 

    else 

    { 

        bcgDiv.style.height = document.body.scrollHeight + "px" ; 

    } 

  

    imgDiv.style.left = (width-650)/2 + "px"; 

    imgDiv.style.top =  "20px"; 

    bcgDiv.style.width="100%"; 

    

    bcgDiv.style.display="block"; 

    imgDiv.style.display="block"; 

    return false; 

 } 

 function HideDiv() 

 { 

    var bcgDiv = document.getElementById("divBackground"); 

   var imgDiv = document.getElementById("divImage"); 

    var imgFull = document.getElementById("<%=imgFull.ClientID%>"); 

    if (bcgDiv != null) 

    { 

        bcgDiv.style.display="none"; 

        imgDiv.style.display="none"; 

        imgFull.style.display = "none"; 

    } 

 } 


  
</script> 

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        BackColor="#DEBA84" BorderColor="#DEBA84" DataSourceID="SqlDataSource1" 
        Width="1025px" AllowPaging="True" BorderStyle="None" BorderWidth="1px" 
        CellPadding="3" CellSpacing="2">
        <RowStyle BorderStyle="Groove" BackColor="#FFF7E7" ForeColor="#8C4510" />
         <Columns>
            <asp:BoundField DataField="ObjectName" HeaderText="Name" 
                SortExpression="ObjectName">
            <ItemStyle Width="600px" />
            </asp:BoundField>
            <asp:BoundField DataField="EventDate" HeaderText="Date" 
                SortExpression="EventDate" DataFormatString="{0:d}" />
            <asp:BoundField DataField="Description" HeaderText="Description" 
                SortExpression="Description">
            <ItemStyle Width="600px" />
            </asp:BoundField>
            <asp:TemplateField HeaderText="Picture">
                <ItemTemplate>
              
                    
            <asp:ImageButton ID="ImageButton1" runat="server"    
  
           ImageUrl='<%# Eval("FilePath")%>' Width="100px"    
  
           Height="100px" Style="cursor: pointer"    
  
           OnClientClick = "return LoadDiv(this.src);"    
  
           />    
 
            

                </ItemTemplate>
               
            </asp:TemplateField>
        </Columns>        
        <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
        <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BorderStyle="Groove" />
    </asp:GridView>
    

<div id="divBackground" class="modal"> 

</div> 

<div id="divImage" class = "info"> 

    <table style="height: 100%; width: 100%"> 

        <tr> 

            <td valign="middle" align="center"> 

                <img runat = "server" id="imgLoader" runat="server" alt="" 

                 src="images/loader.gif" /> 

                <img runat = "server" id="imgFull" runat="server" alt="" src="" 

                 style="display: none; 

                height: 500px;width: 590px" /> 

            </td> 

        </tr> 

        <tr> 

            <td align="center" valign="bottom"> 

                <input id="btnClose" type="button" value="close" 

                 onclick="HideDiv()"/> 

            </td> 

        </tr> 

    </table> 

</div> 

   
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:conString %>" 
        SelectCommand="select * from tblFiles order by ID"></asp:SqlDataSource>
</asp:Content>

Re: To enlarge the image

polachan — Tue, 07 Jul 2009 07:23:29 GMT

Oh .. Sorry . That wasn't my actual code. Template field I wrongly pasted in the reply for you Please just can u see my code .

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="frmEvent.aspx.cs" Inherits="learn.frmEvent" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     <script type="text/javascript" language="javascript">  
    function LoadDiv(url) 

 { 

    var img = new Image(); 

    var bcgDiv = document.getElementById("divBackground"); 

    var imgDiv = document.getElementById("divImage"); 

    var imgFull = document.getElementById("imgFull"); 

    var imgLoader= document.getElementById("imgLoader"); 

  

    imgLoader.style.display = "block"; 

    img.onload = function() { 

        imgFull.src = img.src; 

        imgFull.style.display = "block"; 

        imgLoader.style.display = "none"; 

    }; 

    img.src= url; 

    var width = document.body.clientWidth; 

    if (document.body.clientHeight > document.body.scrollHeight) 

    { 

        bcgDiv.style.height = document.body.clientHeight + "px"; 

    } 

    else 

    { 

        bcgDiv.style.height = document.body.scrollHeight + "px" ; 

    } 

  

    imgDiv.style.left = (width-650)/2 + "px"; 

    imgDiv.style.top =  "20px"; 

    bcgDiv.style.width="100%"; 

    

    bcgDiv.style.display="block"; 

    imgDiv.style.display="block"; 

    return false; 

 } 

 function HideDiv() 

 { 

    var bcgDiv = document.getElementById("divBackground"); 

   var imgDiv = document.getElementById("divImage"); 

    var imgFull = document.getElementById("imgFull"); 

    if (bcgDiv != null) 

    { 

        bcgDiv.style.display="none"; 

        imgDiv.style.display="none"; 

        imgFull.style.display = "none"; 

    } 

 } 


  
</script> 

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        BackColor="#DEBA84" BorderColor="#DEBA84" DataSourceID="SqlDataSource1" 
        Width="1025px" AllowPaging="True" BorderStyle="None" BorderWidth="1px" 
        CellPadding="3" CellSpacing="2">
        <RowStyle BorderStyle="Groove" BackColor="#FFF7E7" ForeColor="#8C4510" />
        <Columns>
            <asp:BoundField DataField="ObjectName" HeaderText="Name" 
                SortExpression="ObjectName">
            <ItemStyle Width="600px" />
            </asp:BoundField>
            <asp:BoundField DataField="EventDate" HeaderText="Date" 
                SortExpression="EventDate" DataFormatString="{0:d}" />
            <asp:BoundField DataField="Description" HeaderText="Description" 
                SortExpression="Description">
            <ItemStyle Width="600px" />
            </asp:BoundField>
            <asp:TemplateField HeaderText="Picture">
                <ItemTemplate>
              
                    
            <asp:ImageButton ID="ImageButton1" runat="server"    
  
           ImageUrl='<%# Eval("FilePath")%>' Width="100px"    
  
           Height="100px" Style="cursor: pointer"    
  
           OnClientClick = "return LoadDiv(this.src);"    
  
           />    



            


                </ItemTemplate>
               
            </asp:TemplateField>
        </Columns>
        
        <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
        <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BorderStyle="Groove" />
    </asp:GridView>
    


   
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
        SelectCommand="SELECT [ObjectName], [EventDate], [Description], [FilePath], [ObjectType] FROM  [LearnPlus].[WhoAmI]
        WHERE ObjectType = 'E'"></asp:SqlDataSource>
</asp:Content>

Re: To enlarge the image

mudassarkhan — Tue, 07 Jul 2009 07:02:17 GMT

polachan:
<asp:TemplateField HeaderText="Picture"><PRE class=c

You are doing all wrong why are you pasting pasting template field everywhere

Refer my previous reply else download my source code from the site and modify that

Re: To enlarge the image

polachan — Tue, 07 Jul 2009 06:50:39 GMT

I put the function in content place holder please see the code given below and still that function is not calling please can you just look my code. I cant understand what is the problem in m code.

<asp:TemplateField HeaderText="Picture"><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     <script type="text/javascript" language="javascript">  
    function LoadDiv(url) 

 { 

    var img = new Image(); 

    var bcgDiv = document.getElementById("divBackground"); 

    var imgDiv = document.getElementById("divImage"); 

    var imgFull = document.getElementById("imgFull"); 

    var imgLoader= document.getElementById("imgLoader"); 

  

    imgLoader.style.display = "block"; 

    img.onload = function() { 

        imgFull.src = img.src; 

        imgFull.style.display = "block"; 

        imgLoader.style.display = "none"; 

    }; 

    img.src= url; 

    var width = document.body.clientWidth; 

    if (document.body.clientHeight > document.body.scrollHeight) 

    { 

        bcgDiv.style.height = document.body.clientHeight + "px"; 

    } 

    else 

    { 

        bcgDiv.style.height = document.body.scrollHeight + "px" ; 

    } 

  

    imgDiv.style.left = (width-650)/2 + "px"; 

    imgDiv.style.top =  "20px"; 

    bcgDiv.style.width="100%"; 

    

    bcgDiv.style.display="block"; 

    imgDiv.style.display="block"; 

    return false; 

 } 

 function HideDiv() 

 { 

    var bcgDiv = document.getElementById("divBackground"); 

   var imgDiv = document.getElementById("divImage"); 

    var imgFull = document.getElementById("imgFull"); 

    if (bcgDiv != null) 

    { 

        bcgDiv.style.display="none"; 

        imgDiv.style.display="none"; 

        imgFull.style.display = "none"; 

    } 

 } 


  
</script> 

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        BackColor="#DEBA84" BorderColor="#DEBA84" DataSourceID="SqlDataSource1" 
        Width="1025px" AllowPaging="True" BorderStyle="None" BorderWidth="1px" 
        CellPadding="3" CellSpacing="2">
        <RowStyle BorderStyle="Groove" BackColor="#FFF7E7" ForeColor="#8C4510" />
        <Columns>
            <asp:BoundField DataField="ObjectName" HeaderText="Name" 
                SortExpression="ObjectName">
            <ItemStyle Width="600px" />
            </asp:BoundField>
            <asp:BoundField DataField="EventDate" HeaderText="Date" 
                SortExpression="EventDate" DataFormatString="{0:d}" />
            <asp:BoundField DataField="Description" HeaderText="Description" 
                SortExpression="Description">
            <ItemStyle Width="600px" />
            </asp:BoundField>
            <asp:TemplateField HeaderText="Picture">
                <ItemTemplate>
              
                    
            <asp:ImageButton ID="ImageButton1" runat="server"    
  
           ImageUrl='<%# Eval("FilePath")%>' Width="100px"    
  
           Height="100px" Style="cursor: pointer"    
  
           OnClientClick = "return LoadDiv(this.src);"    
  
           />    

                </ItemTemplate>
               
            </asp:TemplateField>
        </Columns>
        
        <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
        <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BorderStyle="Groove" />
    </asp:GridView>
    
   
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
        SelectCommand="SELECT [ObjectName], [EventDate], [Description], [FilePath], [ObjectType] FROM  [LearnPlus].[WhoAmI]
        WHERE ObjectType = 'E'"></asp:SqlDataSource>
</asp:Content>


                <ItemTemplate>
              
                    
            <asp:ImageButton ID="ImageButton1" runat="server"    
  
           ImageUrl='<%# Eval("FilePath")%>' Width="100px"    
  
           Height="100px" Style="cursor: pointer"    
  
           OnClientClick = "return LoadDiv(this.src);"    
  
           />    
                </ItemTemplate>
               
            </asp:TemplateField>

Re: To enlarge the image

mudassarkhan — Tue, 07 Jul 2009 06:40:22 GMT

trythis

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="frmEvent.aspx.cs" Inherits="learn.frmEvent" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        BackColor="#DEBA84" BorderColor="#DEBA84" DataSourceID="SqlDataSource1" 
        Width="1025px" AllowPaging="True" BorderStyle="None" BorderWidth="1px" 
        CellPadding="3" CellSpacing="2">
        <RowStyle BorderStyle="Groove" BackColor="#FFF7E7" ForeColor="#8C4510" />
        <Columns>
            <asp:BoundField DataField="ObjectName" HeaderText="Name" 
                SortExpression="ObjectName">
            <ItemStyle Width="600px" />
            </asp:BoundField>
            <asp:BoundField DataField="EventDate" HeaderText="Date" 
                SortExpression="EventDate" DataFormatString="{0:d}" />
            <asp:BoundField DataField="Description" HeaderText="Description" 
                SortExpression="Description">
            <ItemStyle Width="600px" />
            </asp:BoundField>
            <asp:TemplateField HeaderText="Picture">
                <ItemTemplate>                     
                    
            <asp:ImageButton ID="ImageButton1" runat="server" 

            ImageUrl='<%# Eval("FilePath")%>' Width="100px" 

            Height="100px" Style="cursor: pointer" 

            OnClientClick = "return LoadDiv(this.src);" 

            /> 



            


                </ItemTemplate>
               
            </asp:TemplateField>
        </Columns>
        
        <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
        <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BorderStyle="Groove" />
    </asp:GridView>
    <style type="text/css"> 

     body 

     { 

        margin:0; 

        padding:0; 

        height:100%;  

     } 

     .modal 

     { 

        display: none; 

        position: absolute; 

        top: 0px; 

        left: 0px; 

        background-color:black; 

        z-index:100; 

        opacity: 0.8; 

        filter: alpha(opacity=60); 

        -moz-opacity:0.8; 

        min-height: 100%; 

     } 

     .info 

     { 

        display: none; 

        z-index: 1000; 

        position: absolute; 

        top: 0; 

        left: 0; 

        background-color:White; 

        height: 550px; 

        width: 600px; 

        padding: 3px; 

        border: solid 1px black; 

     } 

</style> 

         <script type="text/javascript" language="javascript">  
    function LoadDiv(url) 

 { 

    var img = new Image(); 

    var bcgDiv = document.getElementById("divBackground"); 

    var imgDiv = document.getElementById("divImage"); 

    var imgFull = document.getElementById("imgFull"); 

    var imgLoader= document.getElementById("imgLoader"); 

  

    imgLoader.style.display = "block"; 

    img.onload = function() { 

        imgFull.src = img.src; 

        imgFull.style.display = "block"; 

        imgLoader.style.display = "none"; 

    }; 

    img.src= url; 

    var width = document.body.clientWidth; 

    if (document.body.clientHeight > document.body.scrollHeight) 

    { 

        bcgDiv.style.height = document.body.clientHeight + "px"; 

    } 

    else 

    { 

        bcgDiv.style.height = document.body.scrollHeight + "px" ; 

    } 

  

    imgDiv.style.left = (width-650)/2 + "px"; 

    imgDiv.style.top =  "20px"; 

    bcgDiv.style.width="100%"; 

    

    bcgDiv.style.display="block"; 

    imgDiv.style.display="block"; 

    return false; 

 } 

 function HideDiv() 

 { 

    var bcgDiv = document.getElementById("divBackground"); 

   var imgDiv = document.getElementById("divImage"); 

    var imgFull = document.getElementById("imgFull"); 

    if (bcgDiv != null) 

    { 

        bcgDiv.style.display="none"; 

        imgDiv.style.display="none"; 

        imgFull.style.display = "none"; 

    } 

 } 


  
</script>  

   
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
        SelectCommand="SELECT [ObjectName], [EventDate], [Description], [FilePath], [ObjectType] FROM  [LearnPlus].[WhoAmI]
        WHERE ObjectType = 'E'"></asp:SqlDataSource>
</asp:Content>

Re: To enlarge the image

mudassarkhan — Tue, 07 Jul 2009 06:33:48 GMT

1. Refer my article and place the script properly you have 2 scripts tags and one ending tag

polachan:

<script type="text/javascript" language="javascript">

<script type="text/javascript" language="javascript">

2. Remove the script from ItemTemplate and place it in content placeholder

3. I have given styles that you need to add

I'll suggest download the sample source and copy style tag and the script tag in your contenplacehoder

Alsoyou can read here

http://www.aspsnippets.com/post/2009/05/30/Using-JavaScript-with-Master-Pages-in-ASPNet.aspx

Re: To enlarge the image

polachan — Tue, 07 Jul 2009 06:27:47 GMT

The following is the code given in my program. Please advice me. The function is not working

 <ItemTemplate>
               <script type="text/javascript" language="javascript">
                  <script type="text/javascript" language="javascript">  
    function LoadDiv(url) 

 { 

    var img = new Image(); 

    var bcgDiv = document.getElementById("divBackground"); 

    var imgDiv = document.getElementById("divImage"); 

    var imgFull = document.getElementById("imgFull"); 

    var imgLoader= document.getElementById("imgLoader"); 

  

    imgLoader.style.display = "block"; 

    img.onload = function() { 

        imgFull.src = img.src; 

        imgFull.style.display = "block"; 

        imgLoader.style.display = "none"; 

    }; 

    img.src= url; 

    var width = document.body.clientWidth; 

    if (document.body.clientHeight > document.body.scrollHeight) 

    { 

        bcgDiv.style.height = document.body.clientHeight + "px"; 

    } 

    else 

    { 

        bcgDiv.style.height = document.body.scrollHeight + "px" ; 

    } 

  

    imgDiv.style.left = (width-650)/2 + "px"; 

    imgDiv.style.top =  "20px"; 

    bcgDiv.style.width="100%"; 

    

    bcgDiv.style.display="block"; 

    imgDiv.style.display="block"; 

    return false; 

 } 

 function HideDiv() 

 { 

    var bcgDiv = document.getElementById("divBackground"); 

   var imgDiv = document.getElementById("divImage"); 

    var imgFull = document.getElementById("imgFull"); 

    if (bcgDiv != null) 

    { 

        bcgDiv.style.display="none"; 

        imgDiv.style.display="none"; 

        imgFull.style.display = "none"; 

    } 

 } 


  
</script>  

                    
            <asp:ImageButton ID="ImageButton1" runat="server" 

            ImageUrl='<%# Eval("FilePath")%>' Width="100px" 

            Height="100px" Style="cursor: pointer" 

            OnClientClick = "return LoadDiv(this.src);" 

            /> 



            


                </ItemTemplate>
               
            </asp:TemplateField>

Re: To enlarge the image

mudassarkhan — Tue, 07 Jul 2009 06:22:00 GMT

I don't see the styles added add that

Re: To enlarge the image

polachan — Tue, 07 Jul 2009 05:41:14 GMT

No error message is coming but that function is not calling. When I click the image button

return LoadDiv(this.src) is not working

With thanks

Pol

Re: To enlarge the image

mudassarkhan — Tue, 07 Jul 2009 01:59:37 GMT

What is the error?

Re: To enlarge the image

polachan — Mon, 06 Jul 2009 21:30:27 GMT

Actually I was waiting for ur reply to follow a beginner like me . I used your code to enlarge the image as follows. But still have some problem . Please give me a help . The following is the code is given in aspx file. The function is not working while clicking the imagebutton. Please have a look and advice me.

With thanks

Pol

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="frmEvent.aspx.cs" Inherits="learn.frmEvent" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"

BackColor="#DEBA84" BorderColor="#DEBA84" DataSourceID="SqlDataSource1"

Width="1025px" AllowPaging="True" BorderStyle="None" BorderWidth="1px"

CellPadding="3" CellSpacing="2">

<asp:BoundField DataField="ObjectName" HeaderText="Name"

SortExpression="ObjectName">

</asp:BoundField>

<asp:BoundField DataField="EventDate" HeaderText="Date"

SortExpression="EventDate" DataFormatString="{0:d}" />

<asp:BoundField DataField="Description" HeaderText="Description"

SortExpression="Description">

</asp:BoundField>

<asp:TemplateField HeaderText="Picture">

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("FilePath")%>' Width="100px" Height="100px" Style="cursor: pointer"

OnClientClick = "return LoadDiv(this.src);" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

function LoadDiv(url) {

var img = new Image();

var bcgDiv = document.getElementById("divBackground");

var imgDiv = document.getElementById("divImage");

var imgFull = document.getElementById("imgFull");

var imgLoader = document.getElementById("imgLoader");

imgLoader.style.display = "block";

img.onload = function() {

imgFull.src = img.src;

imgFull.style.display = "block";

imgLoader.style.display = "none";

};

img.src = url;

var width = document.body.clientWidth;

if (document.body.clientHeight > document.body.scrollHeight) {

bcgDiv.style.height = document.body.clientHeight + "px";

}

else {

bcgDiv.style.height = document.body.scrollHeight + "px";

}

imgDiv.style.left = (width - 650) / 2 + "px";

imgDiv.style.top = "20px";

bcgDiv.style.width = "100%";

bcgDiv.style.display = "block";

imgDiv.style.display = "block";

return false;

}

function HideDiv() {

var bcgDiv = document.getElementById("divBackground");

var imgDiv = document.getElementById("divImage");

var imgFull = document.getElementById("imgFull");

if (bcgDiv != null) {

bcgDiv.style.display = "none";

imgDiv.style.display = "none";

imgFull.style.display = "none";

}

</script>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

SelectCommand="SELECT [ObjectName], [EventDate], [Description], [FilePath], [ObjectType] FROM [LearnPlus].[WhoAmI]

WHERE ObjectType = 'E'"></asp:SqlDataSource>

</asp:Content>