how to add lightbox to image loaded externally in jquery?

Question

I am loading images externally using jQuery load function.. but not able add light box..

am very new to jquery.

var href = $('#images').attr('href');

$('#images').click(function(){
    var toLoad = $(this).attr('href')+' #content';

    $('#content').hide('fast',loadContent);
    $('#load').remove();        
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');        
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-3);    

    function loadContent() {
        $('#content').load(toLoad,'',showNewContent());

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

this function is in $(document).ready() and now i need to add function below so that images dynamically loaded become part of lightbox.

    $('.gallery a').lightBox({txtImage: 'Design'})

What am doing is... calling the file portfolio.php and taking the html inside the #content div and loading it in the #content div in the page the user is viewing.

Please help with code if possible.

Answer 1

This assumes that .gallery is a child of #content here. You would add it to the showNewContent() function, like this:

function loadContent() {
    $('#content').load(toLoad,'',showNewContent);

}
function showNewContent() {
    $('#content').find('.gallery a').lightBox({txtImage: 'Design'})
                 .end().show('normal',hideLoader);
}
function hideLoader() {
    $('#load').fadeOut('normal');
}

Make sure to call showNewContent as the callback, not showNewContent(), (no parenthesis!), otherwise it's actually executing that function right then and trying to assign the result to the callback, not the function itself, and so not running it when the animation is complete.