списки ссылок при нажатии всплывает галерею изображений с использованием 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> 

Благодаря и я здесь в fiddle

Answer 1

У вас может быть только 1 элемент на странице с тем же идентификатором. Измените 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

попробуйте установить его в классе, а не идентификатором.

<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

если вы Хотеть конкретные галереи для каждой ссылки, вы должны определить их содержание и дать каждому из них свой собственный обработчик событий.