我试图让Fancybox工作与一个图像交换脚本，显示在主大图像区域修饰照片的"前"图像时Fancybox是活跃的。
在fancybox激活之前，我目前也有cloudzoom在修饰图像上运行，然后当修饰图像被点击时，它会打开fancybox。现在，当用户单击或悬停在活动的fanybox图像的中间时，我希望图像切换到未修饰的前图像。
你可以在这里看到一个网站的例子: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;
});
}
这是将单击事件绑定到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;
});
});
明白了!
使用这个
<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 class="hover" id="hover6" style="display: none"><img src="image_on.jpg" class="img-swap" /></div>