1

使用 Fancybox 1.3.4 版。Fancybox 运行良好，我正在尝试将缩放效果添加到 Fancybox。

  1. 到目前为止，我已经能够在fancybox窗口中单击打开时将效果应用于图像。但这已经完成了一半，当我关闭fancybox时，缩放效果仍然存在。

  2. 我加载了 5 张图片，悬停在每张图片上时，顶部的图片会发生变化。我想对图像应用缩放效果，当鼠标在小缩略图上移动时显示在大屏幕上。[在这里我无法应用 zoom，我遗漏了一些东西，但不确定]

这是我到目前为止的尝试：

<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>

jQuery代码；

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

    });
  });

使用的 Jquery Zoom 插件是；

www.zoomsl.tw1.ru

4

0 回答 0