Question

I’m using multiple instances of jQuery fancyBox for a website I’m developing. It’s located at the test URL of; http://youwontbelievewhathappened.com/Test/test.html

I’ve setup the majority of the fancy boxes within the site with this type of mark-up and call:

First Mark-Up:

<a href="#blogpostBox" title="Blog Post">Blog Post</a>

        <br /><br />

<a href="#announcementBox" title="Announcement Box">Site Announcement</a>

Call to Content:

  <div class="fancybox">
    <div id="blogpostBox" style="width:400px;height:100px;overflow:auto;">
    [This is the blog post]
    </div>
  </div> 

  <div class="fancybox">
    <div id="announcementBox" style="width:400px;height:100px;overflow:auto;">
    [This is the announcement]
    </div>
  </div>

But for the last two link I’m trying to trigger the fancy box for; this won’t trigger it. It just loads ‘#contentdiv‘ at the end of the site’s URL. It can’t be the location as I’ve moved it outside of and tried it, with still no such luck. Any suggestions?

The two troublesome links are located in the expandable right sidebar, labeled ‘Click Me’

Answer 1

It looks like you’re never actually calling fancybox on those links.

In your scripts.js file, you call fancybox with these selectors:

//// Fancybox links
$("#footer a,#friendsbox a,#moreinfo").fancybox();
$("#openTextEntry").fancybox({onClosed:update_textEntry});

But those links are inside #rightsidebar, so just add that to the selectors:

//// Fancybox links
$("#footer a,#friendsbox a,#moreinfo, #rightsidebar a").fancybox();
$("#openTextEntry").fancybox({onClosed:update_textEntry});