Question

我对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(
         $('<a>')
         .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属性

<a href="{same as anchor}" class="cloud-zoom" rel="position: 'inside'">
 <img id="fancybox-img" src="{big image}" alt=" " />
</a>

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

'onComplete' : function(){
  $('#fancybox-img').wrap(
    $('<a />')
     .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

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

侧面说明：

当您实际需要单个实例（理想情况下是最新版本）时，您正在加载两个版本的jQuery（1.4.2和1.7.1）以避免意外错误。
您正在使用fancybox v1.3.0 ...至少升级到v1.3.4不会有任何伤害

将所有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）

CloudZoom与Fancybox

1 个答案: