0

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

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>

谢谢，我有一个小提琴

4

2 回答 2

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
            }
        }
    });
 });
于 2013-08-17T01:12:33.197 回答
0

尝试将其设置为类而不是 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>

关联

如果您希望每个链接都有一个特定的画廊，则必须定义它们的内容并为每个链接提供自己的事件处理程序。

于 2013-08-17T01:12:25.737 回答