單擊時使用fancybox彈出圖像庫的鏈接列表

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>

謝謝，我在這里擺弄

Answer 1

您在頁面上只能有1個具有相同ID的元素。 將id="fancyfox"更改為class="fancyfox" ，並將選擇器更改為.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>

然后在click事件上，您可以使用以下方法獲取圖像：

$(".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>

鏈接

如果您希望每個鏈接都有一個特定的畫廊，則必須定義它們的內容，並為其提供各自的事件處理程序。