lists of links when clicked pops up an image gallery using fancybox

Question

Please somebody help me on this, really appreciate any help I can get

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
                }
            }
        });
    });
});

as you can see only the first link is working, but I wish that in every link has a different set of images

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>

Thanks and I have here a fiddle

Answer 1

You can only have 1 element on the page with the same id. Change the id="fancyfox" to class="fancyfox" and change the selector to .fancyfox and you should be golden.

In order to get different content for each link you can consider:

<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>

Then on the click event you can get the images by using:

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

try setting it to a class instead of an 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

if you're wanting a specific galleries for each link, you'll have to define their contents and give them each their own event handler.