Question

我试图让Fancybox使用图像交换脚本来显示＆＃34;之前＆＃34;当fancybox处于活动状态时，主要大图像区域中的修饰照片的图像。

在fancybox处于活动状态之前，我目前还在润饰后的图像上运行了cloudzoom，然后在点击润饰后的图像时打开fancybox。现在，当用户点击或悬停在活动fancybox图像的中间时，我希望图像交换到尚未润饰的前图像。

您可以在此处查看该网站的示例：http://www.pixlsnap.com/j/testb.php

以及此处运行图片交换脚本的示例：http://brecksargent.com/swaptest.php

使用slideshowpro director API加载图像。这是我试图用fancybox实现的脚本：

$(document).ready(function() { 
$(".fancybox-image").hover(
      function(){this.src = this.src.replace("_off","_on");},
      function(){this.src = this.src.replace("_on","_off");
 });
 var imgSwap = [];
 $(".fancybox-image").each(function(){
    imgUrl = this.src.replace("_off","_on");
    imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});

$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}

这是将点击事件绑定到cloudzoom图像区域的代码：

    $(function(){
    // Bind a click event to a Cloud Zoom instance.
    $('#1').bind('click',function(){
        // On click, get the Cloud Zoom object,
        var cloudZoom = $(this).data('CloudZoom');
        // Close the zoom window (from 2.1 rev 1211291557)
        cloudZoom.closeZoom();                       
        // and pass Cloud Zoom's image list to Fancy Box.
        $.fancybox.open(cloudZoom.getGalleryList()); 
        return false;
    });
});

Answer 1

想出来了！

使用此

<script type="text/JavaScript">
// prepare the form when the DOM is ready 
$(document).ready(function() { 
$(".img-swap").hover(
      function(){this.src = this.src.replace("_on","_off");},
      function(){this.src = this.src.replace("_off","_on");
 });
 var imgSwap = [];
 $(".img-swap").each(function(){
    imgUrl = this.src.replace("_off","_on");
    imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}
</script>

改变了这个

$.fancybox.open(cloudZoom.getGalleryList()); 
    return false;
});

到这个

$.fancybox({
afterShow: function () {
    $(this.content).attr("tabindex",1)
}

    });

并使用img-swap类将每个图像放入其自己的div中：

<div class="hover" id="hover6" style="display: none"><img src="image_on.jpg" class="img-swap" /></div>

使用Fancybox和Cloudzoom进行图像交换之前/之后

1 个答案: