按照我们从jQuery Function Seems开始的主题...... 你重复了很多代码,但是 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>