Zoom ( Enlarge image ) on MouseOver in ListView Image Gallery using ASP.Net

Last Reply on Feb 18, 2013 12:49 AM By Mudassar

Posted on Feb 17, 2013 11:28 PM

http://aspsnippets.com/Articles/Image-Gallery-using-ASP.Net-GridView-control.aspx

used the css and html from the above sample code  , but instead of the actual image i get loader image

i am using datalist to display image

 

 

<asp:ListView ID="ListView1" runat="server">
            <LayoutTemplate>
                <ul class="ProductList">
                    <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
                </ul>
            </LayoutTemplate>
            <ItemTemplate>
                <li onclick="return LoadDiv(this.src);">
                    <asp:Image ID="Img1" runat="server" ImageUrl='<%#"../images/"+Eval("photo")%>' Height="200px"
                        BorderStyle="Double" Width="150px" /><br />
                    <br />
                </li>
            </ItemTemplate>
            <EmptyItemTemplate>
                <div>
                    Sorry! No Item found found.
                </div>
            </EmptyItemTemplate>
        </asp:ListView>

 

Posted on Feb 18, 2013 12:49 AM

I have modified the article http://aspsnippets.com/Articles/Image-Gallery-using-ASP.Net-GridView-control.aspx

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>GridView Images Example</title>
    <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");
            debugger;
            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>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-y: auto;
        }
        .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%;
        }
        #divImage
        {
            display: none;
            z-index: 1000;
            position: fixed;
            top: 0;
            left: 0;
            background-color: White;
            height: 550px;
            width: 600px;
            padding: 3px;
            border: solid 1px black;
        }
        * html #divImage
        {
            position: absolute;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        <hr />
        <asp:ListView ID="ListView1" runat="server">
            <LayoutTemplate>
                <ul class="ProductList">
                    <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
                </ul>
            </LayoutTemplate>
            <ItemTemplate>
                <li>
                    <asp:ImageButton ID="Img1" runat="server" ImageUrl='<%# Eval("FilePath")%>' Height="200px"
                        BorderStyle="Double" Width="150px" OnClientClick="return LoadDiv(this.src);" /><br />
                    <br />
                </li>
            </ItemTemplate>
            <EmptyItemTemplate>
                <div>
                    Sorry! No Item found found.
                </div>
            </EmptyItemTemplate>
        </asp:ListView>
    </div>
    <div id="divBackground" class="modal">
    </div>
    <div id="divImage" class="info">
        <table style="height: 100%; width: 100%">
            <tr>
                <td valign="middle" align="center">
                    <img id="imgLoader" alt="" src="images/loader.gif" />
                    <img 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>
    </form>
</body>
</html>

 

    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable(); 
        String strConnString = System.Configuration.ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
        string strQuery = "select top 2 * from Images order by ID";
        SqlCommand cmd = new SqlCommand(strQuery);
        SqlConnection con =  new SqlConnection(strConnString);
        SqlDataAdapter sda = new SqlDataAdapter();
        cmd.CommandType = CommandType.Text;
        cmd.Connection = con;
        try
        {
            con.Open();
            sda.SelectCommand = cmd;
            sda.Fill(dt);

            ListView1.DataSource = dt;
            ListView1.DataBind();  
        }
        catch (Exception ex)
        {
            Response.Write(ex.Message);
        }
        finally
        {
            con.Close();
            sda.Dispose();
            con.Dispose();
        } 
    }

 

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html