Question

How can i load the original image when the tumbnail version of the image has been clicked?
Im using ASP.NET in combinaton with javascript.

The original images are big, so they have been scaled on server side. This makes the site load faster. But somehow, both versions (original and tumbnail) of the images are being downloaded.

I’m trying to download only the tumbnail version of the image. And when the user clicks on the image, i want to show the original image.

How can i get this done?

Answer 1

Html such as below for each thumbnail image should do the trick

<a href="[url to original image]" target="_blank" id="thumbnail_link">
  <img src="[url to thumbnail image]" alt="Click to see the full image" />
</a>

Edit: Modified to illustrate use of FancyBox.

Use above markup along with below java-script:

$(document).ready(function() {
   $("a#thumbnail_link").fancybox();
})'

Don’t forget to include jquery and fancybox js files.