Question

I’ve done the usual searches for previous answers… None found.

Basically I’m creating a website that loads each page into a content Div using jQuery.

Here’s the site in progress http://www.websitesbyshane.co.uk/chris

Everything is working ok so far, my problem is that when the user clicks through to the ‘portfolio’ section, I would like to display some images using new scripts (a lightbox type script) however, it seems that by loading content into a div using ajax is preventing me from doing this. Anyone have any ideas for a solution to this problem?

Thanks.

Here’s my Ajax script…

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('.top_nav a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #content';
        $('#content').load(toLoad)
    }                                           
});

$('.top_nav a').click(function(){




    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('slow',loadContent);
    $('#load').remove();
    $('#header_resize').append('<span id="load">Please wait</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('#content').load(toLoad,'',showNewContent())

    }
    function showNewContent() {
        $('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');


    }


    return false;

});

});

/* finish ajax */

Now, inside one of the #content Div’s that will be loaded, I just want to add a lightbox type gallery which will include 1 additional .js file. Thanks

Answer 1

You need to use the live() function. I’ve experienced this myself and knows this will fix it.