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

Question

我正在尝试让 Fancybox 使用图像交换脚本，当 fancybox 处于事件状态时，该脚本会在主大图像区域中显示修饰照片的“之前”图像。

在 fancybox 处于事件状态之前，我目前还在修饰后的图像上运行 cloudzoom，然后当单击修饰后的图像时，它会打开 fancybox。现在，当用户单击或悬停在事件 fancybox 图像的中间时，我希望图像交换到尚未修饰的之前图像。

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

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

正在使用幻灯片放映专业导演 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;
});
}

这是将点击事件绑定(bind)到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>