Click here to Skip to main content
15,893,722 members
Please Sign up or sign in to vote.
3.00/5 (1 vote)
See more:
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

HTML
<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

XML
<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..
Posted
Updated 4-Dec-14 5:52am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900