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，你想要显示大图像，点击它的缩略图。

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

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

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

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

Answer 2

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

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

2 个答案: