在Asp.Net中将Div中的图像显示为图像控件

Question

我在DIV标记内有一些批量图像，如果我单击此DIV标记内的图像，我需要在image控件中显示该图像。

这是我的响应，其中我显示了所有的批量图像：

<script>
      $('#showfilelist').append("<div id=" + file.id + " class='thumb'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='_blank' rel='gallery'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='50' height='50'/></a></div>");
</script>

现在，如果我单击上面DIV中的一个图像，所选的图像应该会显示在此image控件中

<asp:Image ID="Image1" runat="server" BackColor="#0099CC" BorderStyle="None" 
                                Height="624px" Width="500px" />

Answer 1

我猜你正在创建一种画廊应用程序，或者类似的东西，在你的帖子中，你想要显示大图，点击它的缩略图。

然后，我的建议是在客户端设置Image控件的src属性，以便浏览器发送HTTP GET请求来获取图像。

因此，我建议您遵循以下步骤：

1. 对于每个缩略图，添加一个自定义属性(如data-large-image-url )，并将其值设置为指向缩略图大图的链接。
2. 查看ASP.Net的Image控件的呈现结果并使用jQuery查找它(您可以使用ClientIDMode='Static'来更详细地单击每个缩略图，只需将大图的值的src属性设置为data-large-image-url属性即可。<代码>H213<代码>G214

  $('#thumbnails').click(function(){
      $('#large-image').attr('src', $(this).attr('data-large-image-url'));
  });

Answer 2

如果你真的在创建一个图库，不要重复发明轮子而使用一个久经考验的插件。我推荐Lightbox2。