单击缩略图时如何显示全尺寸图像?

Posted

技术标签:

【中文标题】单击缩略图时如何显示全尺寸图像?【英文标题】:How to display full sized image when thumbnail is clicked? 【发布时间】:2015-12-14 01:51:56 【问题描述】:

我有一个车辆列表,每辆车都有自己的图像。现在正在显示图像的缩略图,我想在单击缩略图时显示全尺寸图像。它从数据库 (c.VehicleImage) 中获取图像名称。如何为 imgVehicleImage 创建 onClick 事件?

<tr>
    <td colspan="3">
        <asp:Image runat="server" ID="imgVehicleImage" />
    </td>
</tr>

后面的代码:

if (!string.IsNullOrEmpty(c.VehicleImage))

    imgVehicleImage.Visible = true;
    imgVehicleImage.ImageUrl = "/thumbnail.ashx?ImgFilePath=" + ConfigurationManager.AppSettings["VehicleImageFolder"] + Company.Current.CompCode + "\\" + c.VehicleImage + @"&width=200&height=200"; ;

【问题讨论】:

你绑定一个缩略图的点击事件,动态替换图片源或者添加两个div。由你决定。 【参考方案1】:

html 中,缩略图和图像都使用asp:Image,但要隐藏图像。然后当点击缩略图时,隐藏缩略图并显示图像。

您可以使用 JQuery。示例见toggle visibility of div。

【讨论】:

以上是关于单击缩略图时如何显示全尺寸图像?的主要内容,如果未能解决你的问题,请参考以下文章

WPF/C#单击图像缩略图->显示该图像大[关闭]

如何从jQuery中的缩略图放大图像?

在 iPhone 上显示多个图像缩略图时 UI 失真

AVPlayerLayer 尺寸不正确

找到缩略图时如何获取实际图像?

PHP获取远程图片并调整图像大小(转)