0

I am trying to display several multiple, manually called image galleries using fancybox. I can get one gallery working, but the second will not open. Here is the code :

JAVASCRIPT

        $(document).ready(function() {
            $('.fancybox').fancybox();

            /* MANUAL OPEN */
            $("#fancybox-manual-c").click(function(){
            $.fancybox.open([
                {
                    href : 'image1.jpg',
                    rel : 'set01',
                    title : 'My title'
                }, {
                    href : 'image2.jpg',
                    rel : 'set01',
                    title : '2nd title'
                }, {
                    href : 'image3.jpg',
                    rel : 'set02',
                    title : '3rd title'
                }, {
                    href : 'image4.jpg',
                    rel : 'set02',
                    title : '4th title'
                }
            ]);
        });
        /* END OF MANUAL OPEN */
        });

HTML

               <div>
                    <a id="fancybox-manual-c" rel="set01" href="javascript:;"><img src="thumbnail01.jpg"></a>
               </div><!-- END OF PICTURE THUMBS -->
               <div><hr /></div>
               <div>
                    <a id="fancybox-manual-c" rel="set02" href="javascript:;"><img src="thumbnail02.jpg"></a>
               </div><!-- END OF PICTURE THUMBS -->

I eventually want to somehow call the images so that I'm not having to add lines of code to the file every time I want to upload a picture, but so far I'm struggling to even get two instances working correctly.

Note that I am using fancybox with other links on the page that are working as is, and on the same page I am also calling YouTube videos with no issues, and I have also tried some of the more popular questions with answers on here with no success.

Also, I'm pretty sure I made a mistake copying over sections of that JS code - so any errors with regards to the closing brackets at the end are typos.

tomdot
  • 551
  • 6
  • 20

1 Answers1

0

You should try to change the id values. Group them with an outer div or with the same class name.

How do I open fancybox via manual call for a gallery in the html not via the jquery options?

The link might help you.

Community
  • 1
  • 1
Keethanjan
  • 365
  • 1
  • 7
  • Yes I had tried this method, but at first I was seeing all of the pictures displayed on the page. I figure I can hide the pictures I don't want to see, so that's fine, but I'm not sure I want potentially hundreds of 'a' tags in my HTML that I have to update manually every time I want to upload a new picture. I think I may have to figure out some php to sort that out. – tomdot Sep 22 '12 at 10:27
  • This is the correct answer, even though now I am having trouble with the php side (but that's another question) – tomdot Sep 23 '12 at 07:38