Calling jQZoom on Replaceable Image

Question

I'm creating an e-commerce product page that will use jQZoom as a way of zooming in on the featured product image. I'd like, however, the ability to click an alternate product photo thumbnail and have it not only replace the big, featured image, but also re-instantiate the jQZoom() funcion on the newly replaced featured image.

All of this works fine

The problem is this. The original, featured image that had jQZoom() applied to it on page-load still remains a "living artifact", and when I hover() the replaced featured image, the zoom-effect is applied to the replaced image and the original image.

////////////////////////
Product Page
///////////////////////

/////////////////////////////////////////////
My Replacement Function

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

Following the theme we started in jQuery Function Seems.... your duplicate many code, but JS is not a fully object-oriented language, we can apply some techniques to avoid duplication of code, and take advantage of jQuery plugins

I do not have time to test the script. So you'll have what you need to modify if necessary. I hope it is a better approximation of what you need.

Will have some discount if you buy clothes for my wife, 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>