Javascript 单击“小图像”时显示大图像
我试图在单击小图像时显示大图像。我有一个存储图像的SQL表,然后在img控件中显示该图像。现在我希望当用户点击这个图像时,它能在一个更大的弹出窗口中打开 从数据库检索图像并在img控件中显示的代码是:Javascript 单击“小图像”时显示大图像,javascript,jquery,asp.net,Javascript,Jquery,Asp.net,我试图在单击小图像时显示大图像。我有一个存储图像的SQL表,然后在img控件中显示该图像。现在我希望当用户点击这个图像时,它能在一个更大的弹出窗口中打开 从数据库检索图像并在img控件中显示的代码是: <script type="text/javascript"> $('#image1Large').hide().click(function() { $(this).hide(); }); $('#image1').click(functio
<script type="text/javascript">
$('#image1Large').hide().click(function() {
$(this).hide();
});
$('#image1').click(function() {
$('#image1Large').attr('src', this.src)
.show()
.offset({ top: 0, left: 0 });
});
</script>
<img runat="server" id="image1" alt="" src="" height="100" width="100"/>
<img runat="server" id="image1Large" alt=""/>
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();
img1 = data;
memory.Dispose();
image1.Src = "data:image/png;base64," + Convert.ToBase64String(data);
}
con.Close();
}
这实际上不是一个C或SQL问题,而是客户端问题。由于您已经检索了图像,并且仅通过height=100 width=100属性调整其大小,因此您所要做的就是以其原始大小显示相同的图像。有很多方法可以做到这一点,这里有一个基本的方法: 添加另一个图像元素以容纳较大的图像:
<img runat="server" id="image1" alt="" src="" height="100" width="100"/>
<img runat="server" id="image1Large" />
下面是一个演示:
在现实生活中,你可能需要调整这个更大图像的额外格式和位置,可能在DIV容器中显示它等等。但这就是想法。JQuery代码在哪里?@raj这个链接可能对你有用,我认为这在我的情况下不起作用。在你的演示中,它工作得很好,但当我申请时,它不起作用。我编辑了问题,请检查一下。
$('#image1Large').hide().click(function(){
$(this).hide();
})
$('#image1').click(function(){
$('#image1Large').attr('src', this.src)
.show()
.offset({top:0,left:0});
})