I have a gallery, with (client) categories, and then subnavigation showing different shots. When you click on the client, it loads the appropriate subnavigation from the page listed in the anchor tag.
When you click on the subnavigation, it appends an <li> with the appropriate image, and slides the <ul>.
Both of these work on page refresh, but the subnavigation functionality stops working after a new subnavigation is loaded.
Please help. A link to the demo can be found at brianbattenfeld.com/fingers/work/dear.php
$(document).ready(function() {
$('#showcase_holder ul li:first').addClass("in_view");
//$('#content_holder div').removeClass("hidden");
$('#project_subnavigation ul li a').click(function(){
var section = $(this).attr("rel");
var new_image = '../images/port/' + section + '.jpg';
$('#showcase_holder ul').append('<li><img src="' + new_image + '" /></li>').
animate({left: '-=618'}, 500);
changeCopy();
return false;
});
$('#project_navigation ul li a').click(function(){
var url = $(this).attr("href");//get page, and find the subnav
$('#project_subnavigation ul').hide().load(url + " #project_subnavigation ul li", function() {
$('#project_subnavigation ul').fadeIn(400);
});
return false;
});
changeCopy = function(){
var section = $(this).attr("rel");
$('#active_copy p').fadeOut(200);
$('#active_copy p').fadeIn(200);
};
});