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

Question

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

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

这里你可以看到网站的例子：http://www.pixlsnap.com/j/testb.php

，这里的运行图像互换脚本的例子：http://brecksargent.com/swaptest.php

的图像正在使用slideshowpro主任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; 
}); 
} 

这是结合一个click事件的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) 
} 

    }); 

，并把每个图像在它自己的DIV与IMG交换类：

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