How to display full sized image when thumbnail is clicked?

Question

I have a list of vehicles, and each vehicle has its own image. Right now the thumbnail is displaying of the image is displaying, I would like to display the full size image when the thumbnail is clicked. It gets the image name from a database (c.VehicleImage). How can I create an onClick event for imgVehicleImage?

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

Code behind:

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"; ;
}

You bind a click event of thumbnail and replace the image source dynamically or you can add two divs. its upto you. — Kashif Mustafa, Sep 17 '15 at 09:31

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

In the HTML use an asp:Image for both the thumbnail and image, but have the image hidden. Then when the thumbnail is clicked, hide the thumbnail and show the image.

You can use JQuery. See toggle visibility of div for an example.

edited May 23 '17 at 12:22

Community

1
1

answered Sep 17 '15 at 09:13

Richard Schneider

34,944
9
57
73

How to display full sized image when thumbnail is clicked?

1 Answers1