Google images gray box popup look'n'feel with js

Question

What would be the most efficient way to achieve the effect the gray box sliding out in Google image search? I currently have the desired design in place. There's a set of images in columns of 4 and a box sliding out when an image is clicked. However, I have no idea how to make it pop out in the correct spot (below the clicked image).

Google image search example: http://bit.ly/YBe7ay Link for what I need to achieve: http://fxtouch.ee/projects/scale/

Answer 1

It sounds like we are working on a similar task. Here's a plugin you might want to take a look at http://www.htmldrive.net/items/show/1036/JQuery-Ajax-Cool-Shopping-cart-effect

somewhere in line 44 the code puts the 'box' with corresponding text in derectly below the row of the clicked thumbnail.

$('#cart_wrapper .cart-info').append('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> $<em>'+itemprice+'</em></div><span class="shopp-quantity">1</span><img src="remove.png" class="remove" /><br class="all" /></div>');

then again somewhere in line 110 the code puts the 'box' within the defined div

$("html:not(:animated),body:not(:animated)").animate({scrollTop: targetOffset}, 800,function(){
   $('#wrap #detail-'+thisID).slideDown(500);
    return false;
});

go through the files and see how it all comes together, then intergrate that with your interface.