Why is Fancybox only working for first section of images?

Question

I have some HTML code which displays 9 images with fancybox styles. I duplicated the HTML code between the tags and added a unique id for each duplication in the styles.css.

However, the duplicated sections do not have the fancybox working.

This is the first few lines of each section's code. Each duplicated section is different only with "work" being "work1", "work2" etc. I assume there is another attribute somewhere in these accompanying js files, or fancybox.js, or fancybox.css files. But I looked through those files and found nothing in common with the HTML and styles.css.

 <section class="clearfix" id="work" name="work">
    <header>
    <h2>Graphic Design</h2>
    </header>
    <ul class="projects list">

The fancybox must be initialized I guess by the next few lines:

    <li><figure><a href="images/pricing_table_3.jpg" rel="work"><img     
    src="images/work_img.jpg" alt="Image" /></a>
    <figcaption><a href="http://website.com/">Visit Livesite<span>&nbsp;&rarr;  
    </span></a></figcaption>
    </figure>

I only change the "work" attribute in that code. work1 etc.

I understand what you mean about adding that code to each #work tag, but the #work, #work1 etc. only appears in the styles.css and nowhere else in any of the other files.

I tried inserting that code and it didn't seem to matter. I think the fundamental problem is that I can't even find where the fancybox is being initialized on the 'work' block. If I could have found that, I would add the others.

I inserted the code in between the above two code examples like this:

 <script type="text/javascript">
 $("#work2 a").fancybox();
 </script>          

Answer 1

You need to initialize the FancyBox on all link (...) tags on which you wish to have this behaviour. Ex:

$("#work a").fancybox();   // initialize fancybox on "work" block
$("#work1 a").fancybox();  // initialize fancybox on "work1" block
$("#work2 a").fancybox();  // initialize fancybox on "work2" block

Description:

• "#work" is the ID of the container - in your case "section" block
• "a" following it (in the '$("#work a")' function call) is the link tag, on which you are adding the FancyBox behavior.