First, in all templates that have a thumb image and access the addtocart() function, we modify the product image line to add an ID tag that uses the product_id as it's name.
Code: Select all
<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" [color=#BF0000]id="img_<?php echo $product['product_id'];?>"[/color]/></a></div>
function we add:
Code: Select all
var image = $('#img_'+product_id).offset();
if (image) {
var cart = $('#cart').offset();
$('<img src="' + $('#img_'+product_id).attr('src') + '" id="temp" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />').appendTo('body');
params = {
top : cart.top + 'px',
left : cart.left + 'px',
opacity : 0.2,
width :$('#img_'+product_id).width(),
height : $('#img_'+product_id).height()
};
// uncomment line below if you also want to scroll up
// $('html, body').animate({ scrollTop: 0 }, 'slow');
$('#temp').animate(params,image.top-cart.top + 200 ,false, function () {
$('#temp').remove();
});
} else
$('html, body').animate({ scrollTop: 0 }, 'slow');