Javascript Fancybox和Zoom1 Pugin的缩放效果
使用Fancybox 1.3.4版。Fancybox工作得很好,我正在尝试向Fancybox添加Zoom效果 到目前为止,当我在fancybox窗口中单击“打开”时,我已经能够将效果应用于图像。但这已经完成了一半,当我关闭fancybox时,缩放效果仍然存在 我加载5个图像,在每个图像上悬停,顶部的图像会发生变化。我想在图像上应用zooom效果,当鼠标在小缩略图上移动时,它会显示在大屏幕上。[在这里我无法应用zooom,我遗漏了一些东西,但什么不确定] 这是我迄今为止的尝试:Javascript Fancybox和Zoom1 Pugin的缩放效果,javascript,jquery,fancybox,Javascript,Jquery,Fancybox,使用Fancybox 1.3.4版。Fancybox工作得很好,我正在尝试向Fancybox添加Zoom效果 到目前为止,当我在fancybox窗口中单击“打开”时,我已经能够将效果应用于图像。但这已经完成了一半,当我关闭fancybox时,缩放效果仍然存在 我加载5个图像,在每个图像上悬停,顶部的图像会发生变化。我想在图像上应用zooom效果,当鼠标在小缩略图上移动时,它会显示在大屏幕上。[在这里我无法应用zooom,我遗漏了一些东西,但什么不确定] 这是我迄今为止的尝试: <div c
<div class="CWproductThumbs">
<a href="cw4/images/product_expanded/012.jpg" class="CWimageZoomLink CWlink" title="Digital HD Video Camera" rel="CWproduct"><img class="CWthumb" src="cw4/images/product_thumb_details/012.jpg" alt="Digital HD Video Camera"></a>
<a href="cw4/images/product_expanded/006.jpg" class="CWimageZoomLink CWlink" title="Digital HD Video Camera" rel="CWproduct"><img class="CWthumb" src="cw4/images/product_thumb_details/006.jpg" alt="Digital HD Video Camera"></a>
</div>
使用jqueryzoom插件
jQuery(document).ready(function(){
// set filename on any image element
var $setSrc = function(triggerEl,targetEl){
var triggerSrc = jQuery(triggerEl).attr('src');
var triggerIndex = triggerSrc.lastIndexOf("/") + 1;
var newFn = triggerSrc.substr(triggerIndex);
var targetSrc = jQuery(targetEl).attr('src');
var targetIndex = targetSrc.lastIndexOf("/") + 1;
var oldFn = targetSrc.substr(targetIndex);
var targetDir = targetSrc.replace(oldFn,'');
var newSrc = targetDir + newFn;
targetEl.attr('src',newSrc);
};
// set href on any link
var $setHref = function(triggerEl,targetEl){
var triggerHref = jQuery(triggerEl).attr('href');
var triggerIndex = triggerHref.lastIndexOf("/") + 1;
var newFn = triggerHref.substr(triggerIndex);
var targetHref = jQuery(targetEl).attr('href');
var targetIndex = targetHref.lastIndexOf("/") + 1;
var oldFn = targetHref.substr(targetIndex);
var targetDir = targetHref.replace(oldFn,'');
var newHref = targetDir + newFn;
targetEl.attr('href',newHref);
};
jQuery('img.CWthumb').hover(function(){
$setSrc(jQuery(this),jQuery('#CWproductImgMain'));
$setHref(jQuery(this).parent('a'),jQuery('#CWproduct105imgLink'));
$setHref(jQuery(this).parent('a'),jQuery('#CWproduct105zoomLink'));
});
jQuery('a.CWimageZoomLink').each(function(){
jQuery(this).fancybox({
'titlePosition': 'over',
'padding': 0,
'margin' : 0,
'overlayShow': true,
'showCloseButton': true,
'hideOnOverlayClick':true,
'hideOnContentClick': true,
'autoDimensions': true,
'centerOnScroll': true,
'showNavArrows':true,
'cyclic':true,
'onComplete' : function() {
jQuery('#fancybox-img').imagezoomsl({innerzoommagnifier: true,
classmagnifier: window.external ? window.navigator.vendor === "Yandex" ? "" : "round-loupe" : "",
magnifierborder: "5px solid #F0F0F0",
zoomrange: [2, 8],
zoomstart: 4,
magnifiersize: [150, 150]})
}
});
jQuery('a.CWtriggerZoomLink').click(function(){
var zoomHref = jQuery(this).attr('href');
jQuery('a.CWimageZoomLink[href="' + zoomHref + '"]').trigger('click');
return false;
});
// fancybox - see http://fancybox.net/api for available options
});
});