2

我对 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 显示为可见而不是隐藏。

4

1 回答 1

1

如果想法是#fancybox-img用一个锚包装选择器，该锚的属性与打开fancybox的锚class="cloud-zoom"的属性相同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

（不知道到底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）

于 2012-07-09T16:49:46.490 回答