Question

I’m just reposting to make this clearer & because I’ve uploaded a sample of the problem…

Simply…

This fancy box plugin works great on this page http://www.websitesbyshane.co.uk/chris/portfolio.php

but NOT if the portfolio #content is pulled into the index.php via ajax. You can see for your self by going to the homepage here http://www.websitesbyshane.co.uk/chris and clicking ‘portfolio’

Thanks for your time guys.

Shane

Answer 1

It looks like your ajax call is loading the entire portfolio.php page. Allowing the user to click the link and go to the portfolio page if they don’t have Javascript enabled is a great thing, but loading that entire page via an ajax call is sure to cause some issues.

The portfolio.php page that you are loading via ajax includes the $(document).ready to enable the lightbox, but this code will never execute since the main page has already loaded. Your code for your fancy box plugin should be in the main web page. Then you can run that code to bind the fancy box after you have loaded the portfolio page/content into your div.

Edit: added more detail:

You currently have

$('#content').load(toLoad)

in your js.js file. according to the jQuery api docs (http://api.jquery.com/load/) you can pass a callback into it to run when it has finished:

$('#content').load(toLoad, function() {
  alert('Load was performed.');
});

You could simply load your fancy box code into this callback function in the js.js file like this:

$('#content').load(toLoad, function() {
    $("a#example6").fancybox({
        'titlePosition' : 'over'
    });

    $("a[rel=example_group]").fancybox({
        'transitionIn' : 'none',
        'transitionOut' : 'none',
        'titlePosition' : 'over',
        'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
        return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
      }
    });
});

The problem with this is that it will get called even if you’re not calling the portfolio page. It won’t complain, but it is easily solved by wrapping it in an “if” statement.