Aufruf jQZoom Austauschbaren Bild

Ich bin momentan dabei, ein e-commerce Produkt-Seite verwenden jQZoom als eine Art Zoom auf das Produkt-Bild. Ich möchte jedoch die Möglichkeit, auf ein anderes Produkt Foto-Miniaturansicht und Sie ersetzen nicht nur die großen, featured Bild, aber auch re-instanziieren des jQZoom() Funktion auf die neu ersetzt featured image.

All dies funktioniert gut

Das problem ist. Das original, featured Bild, hatte jQZoom() angewendet, um Sie auf der Seite-laden bleibt immer noch ein "lebendes Artefakt", und wenn ich hover() ersetzt, featured Bild, der zoom-Effekt angewendet wird, um die ausgetauschten Bild und dem ursprünglichen Bild.

////////////////////////
Produkt-Seite

///////////////////////

/////////////////////////////////////////////
Meine Ersatz-Funktion

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
    });
}

InformationsquelleAutor Mike B. | 2009-09-09

  1. 1

    Folgenden das Thema begannen wir in jQuery-Funktion Scheint....
    Ihr Duplikat vielen code, aber JS ist nicht eine vollständig Objekt-orientierte Sprache, die wir anwenden können, einige Techniken zu vermeiden, die Duplizierung von code, und nehmen Sie Vorteil von jQuery-plugins

    Ich habe keine Zeit, um das Skript zu testen. So müssen Sie, was müssen Sie ändern, wenn nötig. Ich hoffe, es ist eine bessere Annäherung an das, was Sie brauchen.

    Haben einen gewissen Rabatt, wenn Sie kaufen Kleidung für meine Frau, 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>

    InformationsquelleAutor andres descalzo

  2. 0

    Dies ist, wie Sie sauber die Daten von jqzoom:

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

    Weil jqzoom hält die Daten in diesem Objekt:

    $(el).data("jqzoom", obj);
    Funktioniert hat das nur für mich auf Chrome. Getestet auf FF und IE und das jqzoom Fenster aus der zuvor initialisierten Instanz noch zeigen.
    Es ist 3 Jahre später, aber hast du durch Zufall die Antwort zu finden? Es schadet auch nicht, für mich auf Chrome.

    InformationsquelleAutor Ionnini

Schreibe einen Kommentar