How can I load an external jQuery gallery/slideshow into a div

Question

Ive got a jQuery navigation menu loading external content into my #main div, which works fine when the content is static, but the site im working on contains jQuery galleries/slideshows which id like to call into the div. The problem im having is when the gallery is loaded, the images all appear but the jQuery functionality does not work.

Any help appreciated.

here is the javascript im using...

$(document).ready(function() {

// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('#accordion ul li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #main';
        $('#main').load(toLoad)
    }
});

$('#accordion ul li a').click(function(){

var toLoad = $(this).attr('href')+' #main';
$('#main').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-5);
function loadContent() {
    $('#main').load(toLoad,'',showNewContent())
}
function showNewContent() {
    $('#main').show('normal',hideLoader());
}
function hideLoader() {
    $('#load').fadeOut('normal');
}
return false;

    });
});

Answer 1

In the first html I have:

<div id="galContainer">

</div>

so this is the place i want my gallery to appear. however I will set all the images inside it initially hidden so:

<style type="text/css">

       #galContainer img {display:none;}

</style>

obviously you have jquery registered on this page plus the script i posted for you. so

<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script type="text/javascript">


    $(function() {

        $('#galContainer').load('2.htm #images', function() {
            $.ajax({
                url: 'gallery.js',
                dataType: 'script',
                success: function() {
                    $('#galContainer img').fadeIn();

                }
            });

        });

    });
</script>

Now in the same folder I have two more files. One is called 2.htm which contains my gallery's images.

And gallery.js which is the javascript of my gallery

2.htm contains only:

<div id="images">
   <img src="1.jpg" />
   <img src="2.jpg" />
   <img src="3.jpg" />
</div>

so now you see that I use the load function in the first page to get the content of the div#images from the second page. [the first line when i wrote load('2.htm #images....]

now the load function in jquery takes a call back function which I have used. this function gets executed when the load function has been successful. meaning that the images are loaded.

so Now I am happy to call the script that governs the behavior of those images [meaning my gallery's javascript]

as I mentioned before the script for that is inside the gallery.js which I load dynamically in the ajax fucntion.

in side gallery.js i have:

$.each($('#galContainer img'), function() {

    var images = $(this);

    images.click(function() {
        alert($(this).attr('src'));
    });
});

which is simply a test script which alerts the source of each dynamically loaded image in the first page upon clicking. this in your case should be your gallery script

i hope this is clear now