Эффект Fly to cart - универсальное изображение

Question

Пробовал искать везде, но не смог найти решение, так что здесь.

На основе следующего сценария - http://codepen.io/ElmahdiMahmoud/pen/tEeDn

Вместо того, чтобы иметь изображение, отображаемое на странице, чтобы вылететь в корзину, как я могу переопределить это с помощью общего изображения, скажем, например: http://lorempixel.com/400/200/ ---- путь, который я будет использовать в папку с изображениями.

Answer 1

Если вы хотите изменить изображение продукта на пользовательское, то вы можете сделать это, изменив код с этого:

var imgclone = imgtodrag.clone()
                        .offset({
                            top: imgtodrag.offset().top,
                            left: imgtodrag.offset().left
                        }) // ...

чтобы:

// The image that flies to the cart.
var $img_to_move = $('<img src="http://lorempixel.com/400/200/" />');

// use that image
var imgclone = $img_to_move.offset({
    top:  imgtodrag.offset().top,
    left: imgtodrag.offset().left
}) // ...

Проверьте здесь для рабочего примера: нажмите

И конечно изменить имя imgClone переменная, чтобы она соответствовала тому, что она делает, или даже удаляла ее и просто $img_to_move дальше в вашем коде. Не изменил его для очистки.

Answer 2

Отсюда я нашел лучшее решение для эффекта "летать в корзину" в jQuery - эффект " лети в корзину" с использованием jQuery. Использование этого скрипта очень просто, как показано ниже.

$(document).ready(function(){
   $('.add-to-cart').on('click',function(){
       //Scroll to top if cart icon is hidden on top
       $('html, body').animate({
          'scrollTop' : $(".cart_anchor").position().top
       });
       //Select item image and pass to the function
       var itemImg = $(this).parent().find('img').eq(0);
       flyToElement($(itemImg), $('.cart_anchor'));
   });
});