Appel de jQZoom sur l'image remplaçable

Question

Je crée une page de produit de commerce électronique qui utilisera jQZoom pour zoomer sur l'image du produit en vedette. J'aimerais toutefois pouvoir cliquer sur une autre miniature de photo de produit et remplacer non seulement la grande image sélectionnée, mais aussi ré-instancier la fonction jQZoom() sur l'image sélectionnée récemment remplacée.

Tout cela fonctionne très bien

Le problème est. L'image originale, en vedette, sur laquelle jQZoom() est appliqué au chargement de la page reste un "artefact vivant", et lorsque je passe l'image sélectionnée, l'effet de zoom est appliqué à l'image remplacée et à l'image originale .

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

////////////////////////////////////// /////////
Mon remplacement Fonction

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

Après le thème que nous avons commencé à jQuery Function Seems.... votre code multiple en double, mais JS n'est pas un langage entièrement orienté objet, nous pouvons appliquer certaines techniques pour éviter la duplication de code, et profiter des plugins jQuery

Je n'ai pas le temps de tester le script. Vous aurez donc ce que vous devez modifier si nécessaire. J'espère que c'est une meilleure approximation de ce dont vous avez besoin.

Avoir un rabais si vous achetez des vêtements pour ma femme, 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

Voici comment vous pouvez nettoyer les données de jqzoom:

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

Parce que jqzoom conserve les données de cet objet:

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