How can I replicate this image zoom animation effect in jQuery/javascript?

Question

When clicking on the thumbnail on the image on this site: http://www.grouprecipes.com/138587/banana-oatmeal-chocolate-chip-cookies.html , it expands and loads the original (full-size) version of the image.

I think they are using prototype or something similar. I've been looking around on here and have only mainly found examples that just increase the size of the original image and don't actually load another version of the image (like the linked example does).

Anyone care to help me figure out what techniques I should use for this? Combination of CSS3 and some .animate() ?

Answer 1

Here is a simple example using CSS3, a bit of JavaScript.

Explanation:

• Initially both the thumbnail and the enlarged version of the picture are placed on the same space using absolute positioning.
• The enlarged version is not loaded until the thumbnail is clicked because the enlarged img tag doesn't have any src to begin with. It is assigned dynamically through the JS.
• The image move to a different position is achieved using the translateX and translateY options which moves the absolutely positioned enlarged version of the image by the mentioned no. of pixels in both X and Y axes.
• JavaScript is used to add a show class to the enlarged picture which triggers the transition effect and also set the src of the img tag to the newer/bigger image.
• The enlarged version would return back to its original position when clicked anywhere on the enlarged image.
• The JS code is written using class name instead of id just in case you need multiple such thumbnails on the same page. If that is the case, you may want to remove the [0] , put it inside a for loop and replace the [0] with the counter variable. Also the enlarged image's source for each such thumbnail image can be maintained through a key-value pair mapping.
• The z-index: -1 on the image originally (prior to adding .show through JS) is to make sure that it stays in the background and doesn't hinder the click on the thumbnail.

Points to note:

• transform , translateX and translateY are all CSS3 properties/functions and hence have no support in IE8 and less. For older versions of Chrome, Firefox, Opera and Safari, browser prefixes like -webkit- , -moz would be required.
• The classList.add and classList.remove functions are HTML5 standard and are not supported in IE9 but they equivalent IE9 code to add or remove class (like className += .. ) can be easily done.

 var images = {'img1': 'http://placehold.it/400/400'}; document.getElementsByClassName('thumbnail')[0].onclick = function(){ document.getElementById('enlarged').src = images[this.id]; document.getElementById('zoomed').classList.add('show'); } document.getElementById('enlarged').onclick = function(event){ if(event.target != document.getElementsByClassName('thumbnail')[0]) document.getElementById('zoomed').classList.remove('show'); } 

 .container{ position: relative; } .thumbnail{ height: 200px; width: 200px; } #zoomed .enlarged{ opacity: 0; z-index: -1; min-height: 200px; min-width: 200px; height: 200px; width: 200px; position: absolute; transition: all 1s; left: 0px; top: 0px; } #zoomed.show .enlarged{ opacity: 1; z-index: 2; height: auto; width: auto; min-height: 400px; min-width: 400px; transform: translateX(200px) translateY(200px); } 

 <div class="container"> <img src="http://placehold.it/200/200" alt="" class="thumbnail" id='img1'/> <div id='zoomed'> <img src="" alt="" class="enlarged" id='enlarged'/> </div> </div> 

---

Additional Resource:

• Here is a good article on how to pre-load images (the enlarged versions if needed) using CSS + JS, only JS and AJAX.