Javascript image manipulation

Question

Hi am creating one e commerce site.And when i click on the image in the product i want the this kind of effect like in this site.http://www.mightyleaf.com/indian-tea/organic-darjeeling-estate-black-tea/.In this page for example if i click on the product pop up window comes up with large image of the product and the other related image of the product(on the top right corner). Now when i click the other related images that image is applied to the big image on the pop and and the product image in the back also changes(u can see it once u close the dialog).How can i achieve this type of effect.Pleas explain what is going on there and how i can achieve it.

Technology Used:Asp.net Os:Windows Xp.

Thanks in Advance.

Answer 1

That's the magic of jQuery (even though you could do it with plain js). It has nothing to do with your server-side programming language (asp.net in this case). In essence what that page is doing is replacing the image on both elements with the one from the thumbnail you click.

For example:

$('#linkToChangeImage').click(function() {
  $("#myImageId").attr("src", "path/to/newImage.jpg");
});

This means that when a user clicks the link with the id of linkToChangeImage, jQuery will change the image source of the image with the id of myImageId to the newly set path.

You should do some reading in this regard:

• Getting started with jQuery
• New to jQuery, don't be scarred
• jQuery for absolute beginners video series

There are also some other alternatives to jQuery like mooTools, Prototype and YUI within others.