使用文字显示缩略图并在点击事件上动态显示大图像答案

【问题标题】：Display thumbnails using literal and bring large image on click event dynamically使用文字显示缩略图并在点击事件上动态显示大图像
【发布时间】：2012-08-06 07:26:00
【问题描述】：

我的网站基于 C#.net。我有一个文件夹，用户可以在其中放置未知数量的图像。每个图像都有一个缩略图版本和大尺寸。

例如，如果图像名称为“car.jpg”，则缩略图图像将为 thcar.jpg”（即，只需在图像名称前附加“th”）。

在我的页面加载事件中，我想使用 asp:literal 显示所有这些缩略图。当用户单击缩略图时，我想在缩略图上方的 asp:image 中显示该图像的较大尺寸。

谁能帮我解决这个问题？ jquery 或 javascript 中的代码会更有用，而我对 C# 代码也很满意.... 提前致谢，

编辑：我的网页应该是这样的

 ____________________
|                    |
|  Larger image      |
|                    |
|____________________|

缩略图，

 _   _   _   _
|_| |_| |_| |_|

每当单击缩略图时，应显示较大版本的缩略图....

【问题讨论】：

看到人们写出相对较长的问题而没有换行让我很恼火。
@Joonas：给您带来的不便，我们深表歉意。我会纠正自己。谢谢

标签： c# javascript jquery thumbnails literals

【解决方案1】：

我也做了一个基本的例子：

http://jsbin.com/utijid/1

它的来源在这里：

http://jsbin.com/utijid/1/edit

【讨论】：

将所有大图像放在 html 中并隐藏它们似乎有点浪费/耗时。如果您有 300 张图像怎么办...？这将意味着大量不必要的复制/粘贴。
@Joonas 如果有很多图像而不是一个预览就足够了，它的 src 属性必须改变。但是如果没有太多的图像比这个更好，因为图像会在点击拇指后立即显示。
如果我想在点击时立即显示图像，我不会这样做，因为它只是这么多的体力劳动。您当然可以通过使用 jquery 以更自动的方式预加载大图像来做同样的事情，但这仍然需要大量工作，我只会使用在加载图像之前显示的加载图像。添加加载图像的最简单方法是将背景图像放入大图像的父容器中。背景图像将是一个居中的加载图像 .gif。也许我只是懒惰，但正如他们所说：“时间就是猴子”