在可替换图像上调用jQZoom [英] Calling jQZoom on Replaceable Image

问题描述

我正在创建一个电子商务产品页面，它将使用jQZoom作为放大特色产品图像的方式.但是，我希望能够单击备用产品照片缩略图，并使其不仅替换大型的特色图片，而且还可以在新替换的特色图片上重新实例化jQZoom()函数.

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.

所有这些都很好

问题是这样的.在页面加载时对其应用jQZoom()的原始特征图像仍然保持活动伪像"，并且当我hover()替换的特征图像时，缩放效果将应用于替换的图像和原始图像

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

推荐答案

按照主题，我们从. 您可以复制很多代码，但是JS不是完全面向对象的语言，我们可以应用一些技术来避免代码重复，并利用jQuery插件

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.

如果您为我的妻子jejejeje买衣服，将会有一些优惠.

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>

这篇关于在可替换图像上调用jQZoom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！