单击小图像时将原始图像显示为弹出窗口 [英] Show original image as popup when click on small image

问题描述

我试图将原始图像显示为弹出窗口，当我点击小图像时，我有sql表，其中我将图像存储为blob然后我在img控件中显示此图像但现在我想要当用户单击此图像时将打开更大尺寸的弹出窗口。

我的代码从数据库中检索图像并在img控件中显示：

I am trying to show original image as popup when i click on small image, I have sql table in which I store image as blob then I display this image in a img control but now I want when user click on this image it will open in bigger size popup.
my code to retreive image from database and display in img control is:

<img  runat="server" id="image1" alt="" src="" height="100" width="100"/>

protected void LoadImage1()
    {
        SqlCommand cmd = new SqlCommand("sps_getimage", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@flag", 1);
        cmd.Parameters.AddWithValue("@ad_id", ad_id);
        con.Open();
        SqlDataReader reader = cmd.ExecuteReader(System.Data.CommandBehavior.SequentialAccess);
        if (reader.HasRows)
        {
            reader.Read();
            MemoryStream memory = new MemoryStream();
            long startIndex = 0;
            const int ChunkSize = 256;
            while (true)
            {
                byte[] buffer = new byte[ChunkSize];
                long retrievedBytes = reader.GetBytes(0, startIndex, buffer, 0, ChunkSize);
                memory.Write(buffer, 0, (int)retrievedBytes);
                startIndex += retrievedBytes;
                if (retrievedBytes != ChunkSize)
                    break;
            }

            byte[] data = memory.ToArray();
            memory.Dispose();
            image1.Src = "data:image/png;base64," + Convert.ToBase64String(data);
        }
        con.Close();
    }

如何做... javascript ans非常受欢迎。

How to do it...javascript ans is most welcome.

推荐答案

访问这里了解更多...



更改 - 大图像 - 当我们点击小图片时 [ ^ ]

visit here for more...

change-large-image-when-we-click-on-small-image[^]

<img id="image1" runat="server" src="" alt="" height="100" width="100" onclick="ShowDialog1()"/>

<div id="dialog1" title="Full Image View" style="display: none">
<img id="Img1" runat="server" />
</div>

function ShowDialog1() {

（ ＃dialog1）。dialog（）;
}

("#dialog1").dialog(); }

protected void LoadImage1()
    {
        SqlCommand cmd = new SqlCommand("sps_getimage", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@flag", 1);
        cmd.Parameters.AddWithValue("@ad_id", ad_id);
        con.Open();
        SqlDataReader reader = cmd.ExecuteReader(System.Data.CommandBehavior.SequentialAccess);
        if (reader.HasRows)
        {
            reader.Read();
            MemoryStream memory = new MemoryStream();
            long startIndex = 0;
            const int ChunkSize = 256;
            while (true)
            {
                byte[] buffer = new byte[ChunkSize];
                long retrievedBytes = reader.GetBytes(0, startIndex, buffer, 0, ChunkSize);
                memory.Write(buffer, 0, (int)retrievedBytes);
                startIndex += retrievedBytes;
                if (retrievedBytes != ChunkSize)
                    break;
            }

            byte[] data = memory.ToArray();
            memory.Dispose();
            image1.Src = "data:image/png;base64," + Convert.ToBase64String(data);
            Img1.Src = "data:image/png;base64," + Convert.ToBase64String(data);
        }
        con.Close();
    }

这篇关于单击小图像时将原始图像显示为弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！