在 Asp.Net 中从 Div 显示图像到图像控件

Question

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

这是我显示所有批量图片的回复：

<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 中的图像，则所选图像应显示在此图像控件中

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

Answer 1

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

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

所以，我建议您按照以下步骤操作：

1. 为每个缩略图添加一个自定义属性，例如data-large-image-url，并将其值设置为指向缩略图大图的链接。
2. 查看 ASP.NET 的 Image 控件的渲染结果是什么，并使用 jQuery 找到它（您可以使用 ClientIDMode='Static' 来提高效率）
3. 点击每个缩略图时，只需将大图值的src属性设置为data-large-image-url属性即可。

---

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

Answer 2

如果您真的要创建画廊，请不要重新发明轮子并使用经过验证的真正插件。我推荐Lightbox2。