Hi All..
I'm facing a problem in applying Add to Cart Fly Image effect..
i'm Binding Product using JSON.(Webservice)
Add to Cart fly effect working fine but every time when i add any product it Flies First Image instead of Image which i'm adding to Cart..
My Product Div as i'm Appending Data looks like
<div class='col-sm-4'><div class='product-image-wrapper'><div class='single-products'> <div class='productinfo text-center' id='shakeimg'><img src='" + data.d[i].ImgPath + "'/> <h2>₹" + data.d[i].Price + "</h2> <p>" + data.d[i].ProductName + "</p> <a href='#' class='btn btn-default add-to-cart' >Add to cart</a> </div>
and Using Jquery For Flying Effect
<script type="text/javascript" src="js/shakejquery-ui.min.js"></script>
<script type="text/javascript" src="js/shakecartjquery.min.js"></script>
<script type="text/javascript">
function ShakeCart() {
var cart = $('#licart');
var imgtodrag = $('#shakeimg').find('img');
//var imgtodrag = $(this).find('img');
if (imgtodrag) {
var imgclone = imgtodrag.clone().offset({
top: imgtodrag.offset().top,
left: imgtodrag.offset().left
}).css({
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
}).appendTo($('body')).animate({
'top': cart.offset().top + 10,
'left': cart.offset().left + 10,
'width': 75,
'height': 75
}, 1000, 'linear');
setTimeout(function () {
cart.effect('shake', { times: 2 }, 200);
}, 1500);
imgclone.animate({
'width': 0,
'height': 0
}, function () {
$(this).detach();
});
}
}
</script>
Please guys help me
Thanks in advance..