Loading FancyBox image gallery on AJAX website

Question

I have created a website using AJAX to load content dynamically however this has caused problems when trying to load a FancyBox image gallery.

If you go to: http://darynjohnson.com/Medical%20Futures/gallery.php - The gallery loads fine as you would expect.

But if you go to another page first then go back to the gallery it doesn't work. http://darynjohnson.com/Medical%20Futures/about.php#gallery.php

Any ideas on why this is happening?

Answer 1

I think the problem is from gallery.php :

$(document).ready(function() {
    $(".fancybox").fancybox();
});

This triggers on document load, you could try to manually call that function once you load the page from about.php (or whatever other page). Or maybe replace it with:

$(function() {
    $(".fancybox").fancybox();
});

EDIT: you could do something similar to this in dynamicpage.js :

After $pageWrap.animate({ ... }); , add $(".fancybox").fancybox(); . This will make sure that the links are ready to open the gallery when clicked. A better approach could be used to call a function that is defined for each page, or maybe add a condition to check if (newHash == 'gallery.php') for example. I hope I'm clearer now.