javascript - CloudZoom 与 Fancybox

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带 anchor 的选择器 class="cloud-zoom"和相同的href打开 fancybox like 的 anchor 的属性

<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)