Hi,

     I have a gridview in my page and i have to fetch image from the database and show the image.

   i followed the link http://www.codedigest.com/Articles/ASPNET/106_GridView_with_Thumbnail_Images_%e2%80%93_Part_2.aspx

and it works fine....

but i would like to implement in other way....

In the above article user has click on the image then only image opens and enlarge...

But i would like to implement in the other way...i would like to user to jus mouse over on the image of the gridview and the image should enlarge and open in the centre of the page...

How to do??? plz help me soon....

Instead of the gridview if we can do that with other control or other way...plz suggest me......i have to fetch from the database and show.

Thanks.... 

abhishek0410:

Hi,

     I have a gridview in my page and i have to fetch image from the database and show the image.

   i followed the link http://www.codedigest.com/Articles/ASPNET/106_GridView_with_Thumbnail_Images_%e2%80%93_Part_2.aspx

and it works fine....

but i would like to implement in other way....

In the above article user has click on the image then only image opens and enlarge...

But i would like to implement in the other way...i would like to user to jus mouse over on the image of the gridview and the image should enlarge and open in the centre of the page...

 

How to do??? plz help me soon....

Instead of the gridview if we can do that with other control or other way...plz suggest me......i have to fetch from the database and show.

 

Thanks.... 

A small change you can achieve that

Replace this

   <a href="javascript:void(ShowDIV('<%# Eval("ImageID")%>'));" > <asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID")  %>'/> </a>

with this

   <a href="javascript:;" onmouseover = "javascript:void(ShowDIV('<%# Eval("ImageID")%>'));" > <asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID")  %>'/> </a>

Hi,,,

          Thanks a lot....i didnt think in that direction...

and one more thing...Can i open the image in stylish way rather then jus opening in the normal way...like opening it in the page slowly and zoom plus make the background slightly back and not to let the user do anything till user close the image???

plz reply soon...
 

Hi remove the below anchor tag and put a link button and "onmouseover" event of the link button call the same javascript function whichever you are calling for href.

<a href="javascript:void(ShowDIV('<%# Eval("ImageID")%>'));" > <asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID")  %>'/> </a>

abhishek0410:

Hi,,,

          Thanks a lot....i didnt think in that direction...

and one more thing...Can i open the image in stylish way rather then jus opening in the normal way...like opening it in the page slowly and zoom plus make the background slightly back and not to let the user do anything till user close the image???

plz reply soon...

Yes you can to make the browser black you'll have to create a transparent iframe that will have the z index greate than zero but less than ur div which shows the image

You need to add this hidden frame anywhere in ur page

<iframe   id = "Frame1" src="" scrolling="no" frameborder="0"

style="position:absolute;width:500px;height:120px;top:0px;left:0px;border:none;display:block;z-index:0;filter:alpha(opacity=0); visibility:hidden"></iframe>

Then add this script

frame.style.visibility = "visible";

</script>

You will have to call teh function on mouseover

how to call on mouse over???? i mean to say on mouseover i have already called another function....

                   <a href="javascript:;" onmouseover = "javascript:void(ShowDIV('<%# Eval("ImageID")%>'));" > <asp:Image ID="Image1" runat="server" ImageUrl='<%# "thumbnail.ashx?ImID="+ Eval("ImageID")  %>'/> </a>

i feel its better when i click on the image then i should show the image and make the background transparent...

abhishek0410:

how to call on mouse over???? i mean to say on mouseover i have already called another function....

                   <a href="javascript:;" onmouseover = "javascript:void(ShowDIV('<%# Eval("ImageID")%>'));" > <asp:Image ID="Image1" runat="server" ImageUrl='<%# "thumbnail.ashx?ImID="+ Eval("ImageID")  %>'/> </a>

 

i feel its better when i click on the image then i should show the image and make the background transparent...

Call it in ur showDiv function last line

 Here is my code...only first image is popup on mouse click but no background becomes black...second error is that i am not able to click on the image...

 plz have a look..

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

"-//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" >Untitled Page
"server">
    
    "StyleSheet.css" rel="stylesheet" type="text/css" />
    "javascript">
    function ShowDIV(ImID)
    {
        var obj=document.getElementById("IMGDIV");
        var im=document.getElementById("imIMG");
            if(obj!=null)
            {
              obj.style.display="block";
              im.src="FullImage.ashx?ImID="+ImID;
              modal();
            }
    }
    
    function HideDIV()
    {
       var obj=document.getElementById("IMGDIV");
       if(obj!=null)
       {
       obj.style.display="none";
       }
    }
    
    function modal()
        {
                var frame = document.getElementById("Frame1") ;if (frame != null)
                {
                frame.style.visibility = "visible";
                frame.style.height = "100%";
                frame.style.width = "100%";
                }
       }
    

    "form1" runat="server">
    

        "100%" ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="GridViewStyle" CellPadding="4" ForeColor="#333333" AllowPaging="True"  OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="3" BorderStyle="Outset">
        
                "Image Name" DataField="imagename" />
                "Image">
                 
                  "javascript:void(ShowDIV('<%# Eval("ImageID")%>'));" > 
                      "Image1" runat="server" ImageUrl='<%# "thumbnail.ashx?ImID="+ Eval("ImageID")  %>'/> 
                   
<%--                   "javascript:;" onmouseover = "javascript:void(ShowDIV('<%# Eval("ImageID")%>'));" > "Image1" runat="server" ImageUrl='<%# "thumbnail.ashx?ImID="+ Eval("ImageID")  %>'/> 
--%>                 
                              
         
        <%--"#990000" Font-Bold="True" ForeColor="White" />
        "#FFFBD6" ForeColor="#333333" />
        "#FFCC66" Font-Bold="True" ForeColor="Navy" />
        "#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
        "#990000" Font-Bold="True" ForeColor="White" />
        "White" />--%>
        "RowStyle" />
    "EmptyRowStyle" />
    "PagerStyle" />
    "SelectedRowStyle" />
    "HeaderStyle" />
    "EditRowStyle" />
    "AltRowStyle" />
        
        
         
    
"IMGDIV" align="center" valign="middle" runat="server" style="position: absolute;left: 33%;top: 8%;display:none;visibility:visible;vertical-align:middle;border-style:inset;border-color:black;background-color:#c8d1d4; z-index: 101;">
    
"imIMG" />
 "button" style="vertical-align:text-top" value="Close" onclick="return HideDIV();" />
    
    
    "Frame1"&lt;/span&gt; src=&lt;span class='st'&gt;""&lt;/span&gt; scrolling=&lt;span class='st'&gt;"no"&lt;/span&gt; frameborder=&lt;span class='st'&gt;"0"&lt;/span&gt;

style=&lt;span class='st'&gt;"position:absolute;width:500px;height:120px;top:0px;left:0px;border:none;display:block;z-index:0;filter:alpha(opacity=0); visibility:hidden"&lt;/span&gt;&gt;
    
    

chnage the z - index of frame to 50

  <iframe  id = "Frame1" src="" scrolling="no" frameborder="0"
    style="position:absolute;width:500px;height:120px;top:0px;left:0px;border:none;display:block;z-index:50;filter:alpha(opacity=0); visibility:hidden"></iframe>

u mean here???? ( bold letter)

i did that...still same problem. 

plus it is showing error that filter is not valid CSS property....error in sense red line under the word filter...

abhishek0410:

plus it is showing error that filter is not valid CSS property....error in sense red line under the word filter...

it gives to me too as I said these are warnings you can ignore

 ok....but i changed the z index to 50 but still no background changes and only one image i am able to zoom....any image...after that no image i am able to zoom plus no click is workin on the page...