Вызов jQZoom на сменное изображение

Question

Я создаю страницу продукта для электронной коммерции, которая будет использовать jQZoom для увеличения изображения выбранного продукта. Мне бы хотелось, однако, иметь возможность щелкнуть миниатюру фотографии альтернативного продукта и сделать так, чтобы она не только заменяла большое изображение, но и повторно создавала функцию jQZoom () на недавно замененном изображении.

Все это прекрасно работает

Проблема заключается в следующем. Исходное показанное изображение, к которому была применена jQZoom () при загрузке страницы, по-прежнему остается «живым артефактом», и когда я наведите указатель мыши () на замененное выделенное изображение, эффект масштабирования применяется к замененному изображению и исходному изображению. .

////////////////////////
Страница продукта
///////////////////////

/////////////////////////////////////////// //
Моя функция замены

function SwapPic(image, image_big)
{

  $(".jqZoomWindow").remove();
  $(".jqZoomPup").remove();

  $('img.feature').attr("src",image);
  $('#product-image a').attr("href",image_big).jqzoom({
      zoomWidth: 330,
      zoomHeight: 330,
      showEffect:'show',
      hideEffect:'fadeout',
      fadeoutSpeed: 'slow',
      xOffset :72,
      title :false
    });
}

Answer 1

Следуя теме, которую мы начали в jQuery Function Кажется ... . Вы дублируете много кода, но JS не является полностью объектно-ориентированным языком, мы можем применить некоторые методы, чтобы избежать дублирования кода, и воспользоваться плагинами jQuery

У меня нет времени на тестирование скрипта. Таким образом, у вас будет то, что вам нужно изменить, если это необходимо. Я надеюсь, что это лучшее приближение того, что вам нужно.

Будет скидка, если вы купите одежду для моей жены, jjejeje.

(function($) {

 $.fn.SwapPic = function(options) {

  options = $.extend({
   zoomWidth: 330,
   zoomHeight: 330,
   showEffect:"show",
   hideEffect:"fadeout",
   fadeoutSpeed: "slow",
   xOffset:72,
   title:false,
   containerImgSmall: "",
   containerImgLarge: "",
   postAccion: null
  }, options || {});

  options.pthis = this;
  options.accion = function() {  

   imageSmall = $(options.pthis).attr("href"); //verifies this line
   imageLarge = $(options.pthis).attr("href").replace(/small/, "large"); //verifies this line

   options.containerImgSmall = $(options.containerImgSmall);
   options.containerImgLarge = $(options.containerImgLarge);

   //I do not know if it's necessary to do this
   if ($(".jqZoomWindow").length != 0)
    $(".jqZoomWindow").remove();

   //I do not know if it's necessary to do this
   if ($(".jqZoomPup").length != 0)
    $(".jqZoomPup").remove();

   options.containerImgSmall.attr("src", imageSmall);

   options.containerImgLarge.attr("href", imageLarge).jqzoom({
    zoomWidth:options.zoomWidth,
    zoomHeight:options.zoomHeight,
    showEffect:options.showEffect,
    hideEffect:options.hideEffect,
    fadeoutSpeed:options.fadeoutSpeed,
    xOffset:options.xOffset,
    title:options.title
   });

   if (options.postAccion!=null)
    options.postAccion.call();
  };

  $(this).bind("click", options.accion);

 };
})(jQuery);

$(document).ready(function(){

 var myPostAccion = function(){
  $('#product-images li:first').fadeIn("slow");
 };

 $(".a-class-1").SwapPic({
  containerImgSmall: "img.feature",
  containerImgLarge: "#product-image a",
  postAccion: myPostAccion
 });

 $(".a-class-2").SwapPic({
  zoomWidth: 530,
  zoomHeight: 530,
  containerImgSmall: "img.feature",
  containerImgLarge: "#product-image a",
  postAccion: myPostAccion
 });

});

HTML:

<a class="product-thumbs a-class-1" href="http://cdn.shopify.com/s/files/1/0031/5672/products/n1_small.jpg?1252565016" ><img src="http://cdn.shopify.com/s/files/1/0031/5672/products/n1_thumb.jpg?1252565016" alt="text" /></a>
<a class="product-thumbs a-class-2" href="http://cdn.shopify.com/s/files/1/0031/5672/products/n2_small.jpg?1252565016" ><img src="http://cdn.shopify.com/s/files/1/0031/5672/products/n2_thumb.jpg?1252565016" alt="text" /></a>

Answer 2

Вот как вы можете очистить данные из jqzoom:

$('.jqclass').removeData('jqzoom');

Поскольку jqzoom хранит данные в этом объекте:

$(el).data("jqzoom", obj);