CloudZoom与Fancybox

我对javascript有点新，因为我在开发网页时大多只是习惯使用CSS样式。

我试图将Fancybox与Cloudzoom集成时遇到了问题。 我一直在努力遵循这里所指示的指示： http ： //blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/

我能够使效果完美地工作，除了一个小错误 – 由于某种原因（我的所有图像都在画廊中以便于使用滚动浏览fancybox），缩放只显示系列中的第一个图像。

如果有人可以帮助我解决这个问题？ 在这里预览任何一个画廊： http ： //bit.ly/LaPzEH

这是我认为稍微偏离的一点点 – 我认为它与此代码中的href行有关：

$j('a[rel=gallery]').fancybox({ padding: 0, overlayColor: '#'+$j('#skin_color').val(), transitionIn: 'fade', transitionOut: 'fade', overlayOpacity: .9, onComplete : function(arg) { $('#fancybox-img').wrap( $('') .attr('href', $(arg[0]).attr('href')) .addClass('cloud-zoom') .attr('rel', "position: 'inside'") ); $('.cloud-zoom').CloudZoom(); } }); 

非常感谢任何帮助！

编辑：通过改变让它工作

 $(arg[0]).attr('href') 

至

 this.href 

另外（因为我找不到很多cloudzoom / fancybox线程）你也可以通过编辑fancybox的JS代码来改变从内到右的位置等，使fancybox-inner显示为可见而不是隐藏。

Answer 1

如果想要将#fancybox-img选择器包含一个带有class="cloud-zoom"的锚点，并且使用与打开fancybox类似的锚点的href属性相同

…所以Cloud Zoom可以处理特定的图像，然后我会重写onComplete回调，如：

 'onComplete' : function(){ $('#fancybox-img').wrap( $('') .attr('href', this.href) // this.href gets the "href" of the current image .addClass('cloud-zoom') .attr('rel', "position: 'inside'") ); // wrap $('.cloud-zoom').CloudZoom(); } // onComplete 

（不知道什么是onComplete : function(arg)会做什么，但无论如何最好使用'onComplete' : function(currentArray, currentIndex)为了标准的fancybox代码）

侧面说明 ：

1. 当您实际需要单个实例（理想情况下是最新版本）时，您正在加载两个版本的jQuery（1.4.2和1.7.1）以避免意外错误。

2. 您正在使用fancybox v1.3.0 …至少升级到v1.3.4并不会有什么坏处

3. 在引号之间设置所有fancybox API选项

    "padding": 0, // it's OK 0 without quotes (integer and Boolean values go without them) "overlayColor": '#'+$j('#skin_color').val(), "transitionIn": 'fade', "transitionOut": 'fade', "overlayOpacity": .9, "onComplete": ...etc 

   有已知的问题（主要是IE）因为（fancybox v1.3.x）