Hi all,

I am using a gird view  with a column picture location. It is an imagefield and image will be displayed from a file location. Grid view will be poppulated with allrecord and its image. But I want to enlarge the preview of image while the mouse going to the piture column. Please let me know how I can enlarge the  picture image while the mouse focusing in picture location .

With thanks and regards

Pol

 A similar issues is discussed here

https://forums.asp.net/p/1402465/3040081.aspx#3040081

http://www.codedigest.com/Articles/ASPNET/106_GridView_with_Thumbnail_Images_%E2%80%93_Part_2.aspx

change <a href="javscript:" onmouseover="javascript:void_________________">

Thanks for the reply

In where I have to give But the following script  .

< a href = "javascript",onmouseover..............>. Please lte me know Where I can give that script to enalrge the image.

Currently I ma using gridview with imagefiled . DataimageUrlfield is using database column. After that I will give select statement in in sqldatasource of gridview. So please let me know  how I can give the script to work

With thanks

Pol

Hi,

From your description, I think you may create the TemplateField, and in the  ItemTemplate part, you can use <a href='#' onmouseover=''><img src='' alt='' /></a> to take place of ImageField in your scenario.

Thanks.

 I dont want to mouse over event ,  I want the script  to show the image as enlarged in a popup window while double click the image

Thanks a lot for the reply

Pol

 Please can u go through the following code and in Onclick event of the gridview image template (onclick="togglePopupImage(this);) I want to show the image as enlarged  in hidden frame in grid view

Please help

My code ASPX.code as follows

<%

 I have written an article on the same

http://www.aspsnippets.com/post/2009/07/06/Image-Gallery-using-ASPNet-GridView-control.aspx

try it out

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">

        <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>

    <script type="text/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>

 What is the error?

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 

 I don't see the styles added add that

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>

 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

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>