Question

请有人帮助我，非常感谢我能得到的任何帮助

HTML

<a id="fancybox" href="javascript:;">Gallery 1</a>
<br />
<a id="fancybox" href="javascript:;">Gallery 2</a>
<br />
<a id="fancybox" href="javascript:;">Gallery 3</a>

JS

$(document).ready(function() {
    $("#fancybox").click(function() {
        $.fancybox.open([
            {
                href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
                title : 'My title'
            }, {
                href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
                title : '2nd title'
            }, {
                href : 'http://fancyapps.com/fancybox/demo/3_b.jpg'
            }
        ], {
            helpers : {
                thumbs : {
                    width: 75,
                    height: 50
                }
            }
        });
    });
});

正如您所看到的，只有第一个链接有效，但我希望每个链接都有不同的图像集

for example ( this is what I need to achieve )
    <a id="fancybox" href="javascript:;">Gallery 1</a>
       <div>
          <img src="1.jpg">
          <img src="2.jpg">
          <img src="3.jpg">
          <img src="4.jpg">
       </div>
    <br />
    <a id="fancybox" href="javascript:;">Gallery 2</a>
       <div>
          <img src="5.jpg">
          <img src="6.jpg">
          <img src="7.jpg">
          <img src="8.jpg">
       </div>
    <br />
    <a id="fancybox" href="javascript:;">Gallery 3</a>
       <div>
          <img src="9.jpg">
          <img src="10.jpg">
          <img src="11.jpg">
          <img src="12.jpg">
       </div>

由于我在这里有一个fiddle

Answer 1

页面上只能有1个具有相同ID的元素。将id="fancyfox"更改为class="fancyfox"并将选择器更改为.fancyfox，您应该是金色的。

为了获得每个链接的不同内容，您可以考虑：

<a class="fancybox" href="javascript:;">Gallery 1 
  <div class="content" style="display:none;">
    <img src="1.jpg" title="test 1">
      <img src="2.jpg" title="test 2">
      <img src="3.jpg" title="test 3">
      <img src="4.jpg"  title="test 4">
  </div>
</a>

然后在点击事件中，您可以使用以下方式获取图像：

$(".fancybox").click(function() {
    var images=[];
    $(this).find(".content img").each(function(index,img) {
       var $img = $(img);
       images.push({ "href": $img.attr("src"), "title": $img.attr("title") });
    });

    $.fancybox.open(images,  {
        helpers : {
            thumbs : {
                width: 75,
                height: 50
            }
        }
    });
 });

Answer 2

尝试将其设置为类而不是id。

<a class="fancybox" href="javascript:;">Gallery 1</a>
<br />
<a class="fancybox" href="javascript:;">Gallery 2</a>
<br />
<a class="fancybox" href="javascript:;">Gallery 3</a>

link

如果您想要为每个链接创建特定的图库，则必须定义其内容并为每个链接提供自己的事件处理程序。

点击链接列表会使用fancybox弹出图库

2 个答案: