Question

我对fancybox的使用感到有些困惑，网站并没有真正帮助我解决这个问题。

来自网站的引用：

注意 - 图库是从具有相同“rel”的元素创建的标签，例如：

所以我有这个隐藏的div，其中所有图像都有'gallery'rel属性：

<div id="gallery" class="none">
  <img src="img/fondo1.jpg" alt="" rel="gallery" />
  <img src="img/fondo2.jpg" alt="" rel="gallery" />
  <img src="img/fondo3.jpg" alt="" rel="gallery" />
  <img src="img/fondo4.jpg" alt="" rel="gallery" />
</div>

链接：

<a id="galleryBtn" class="galeria" href="#gallery">Gallery</a>

和我的触发器：

$('a#galleryBtn').fancybox({
    'transitionIn'  :   'elastic',
    /*'transitionOut'   :   'elastic',*/
    'speedIn'       :   600, 
    'speedOut'      :   200, 
    /*'overlayShow' :   false*/
});

该链接打开了fancybox，但它包含带滚动条的所有图像，而不是带有下一个图库和上一页按钮的单个图像。

那么我做错了什么？ http://jsfiddle.net/wkP79/5/

Answer 1

这似乎有效：

<div>
    <a class="gallery" rel="gallery1" href="http://toniweb.us/gm/img/fondo1.jpg">Gallery</a>
    <a class="gallery" rel="gallery1" href="http://toniweb.us/gm/img/fondo2.jpg"></a>
    <a class="gallery" rel="gallery1" href="http://toniweb.us/gm/img/fondo3.jpg"></a>
    <a class="gallery" rel="gallery1" href="http://toniweb.us/gm/img/fondo4.jpg"></a>
</div>

JavaScript代码：

$(document).ready(function() {
   $('.gallery').fancybox({
       'transitionIn': 'elastic',
       'speedIn': 600, 
       'speedOut': 200, 
   });
});

演示：http://jsfiddle.net/CzMMB/

Fancybox打开图库框但第一个图像不起作用

1 个答案: