1

我在 Google Groups 中发现这个问题没有得到解答，我在Fancybox中也遇到了同样的错误。

我在一页上有更多的图片库。当我使用下一个上一个按钮转到下一个图像时，依此类推，我会从另一个画廊访问图像。

使用灯箱可以执行以下操作：

<a href="url" rel="fancybox[gallery1]" >link</a>

我将从图片库中的 gallery1 获取所有图片。我的相册是动态的，所以我不能在我的 javascript 文件中这样做。

这可能吗？

我们将如何控制这种导航？

<div class="Album" />
<div class="AlbumImg">
   <a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
   <div id="Gallery0">
      <a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
      <a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo1"></a>
   </div>
  <div id="Gallery0">
     <a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo2"></a>
   </div>
   <div id="Gallery0">
      <a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo3.jpg"></a>
   </div>
   <img class="first" src="Tokyo" title="Tokyo" />
   </a>
</div>

<div class="AlbumImg">
   <a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
   <div id="Gallery1">
      <a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
      <a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo1"></a>
   </div>
  <div id="Gallery1">
     <a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo2"></a>
   </div>
   <div id="Gallery1">
      <a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo3.jpg"></a>
   </div>
   <img class="first" src="Tokyo" title="Tokyo" />
   </a>
</div>

这是我拥有的每张专辑都包含许多图像的代码。当我点击第一张专辑的最后一张图片并下一步导航时，我会看到第二张专辑的第一张图片。但是我想循环回到同一个abum的第一张图片

4

2 回答 2

1

您粘贴的代码包含很多错误...

您有多个div具有相同的 's id，并且属性不包含在引号中，两者<div class="AlbumImg">都有一个不匹配的结束标记</a>。我不太确定这对您的示例是否重要，但您绝对应该考虑一下。正如鲁本所说，fancybox也应该使用该rel属性，就像灯箱一样。

您的代码应如下所示：

<div class="albums">
    <div class="gallery1">
        <a href="http://placehold.it/350x150.png" rel="gallery1">
            <img alt="" src="http://placehold.it/150x150.png"/>
        </a>
        <a href="http://placehold.it/350x150.png" rel="gallery1">
            <img alt="" src="http://placehold.it/150x150.png"/>
        </a>
        <a href="http://placehold.it/350x150.png" rel="gallery1">
            <img alt="" src="http://placehold.it/150x150.png"/>
        </a> 
    </div>
    <div class="gallery2">
        <a href="http://placehold.it/350x150.png" rel="gallery2">
            <img alt="" src="http://placehold.it/150x150.png"/>
        </a>
        <a href="http://placehold.it/350x150.png" rel="gallery2">
            <img alt="" src="http://placehold.it/150x150.png"/>
        </a>
        <a href="http://placehold.it/350x150.png" rel="gallery2">
            <img alt="" src="http://placehold.it/150x150.png"/>
        </a> 
    </div>
</div>

如果你想让你的画廊循环，你必须将一个参数传递给fancybox。请参阅文档。应该是这样的：

$(document).ready(function() {
        $('a').fancybox({
            'cyclic':true
        }); 
});
于 2012-06-26T17:51:35.170 回答
0 
<a class="grouped_elements" rel="gallery-x" href="Tokyo3.jpg">

这应该有效吗？不要忘记'-'
如果它不起作用，你能提供jquery代码吗？

于 2012-06-26T14:43:01.097 回答