Problem loading js content with ajax

Question

I have a page that loads content into a single div via a script in the page. It works fine but the problem is that I have a lightbox in one of the dynamically loaded pages that only works the first time you navigate to it (the script I got for the page loading is found here). Once you navigate to another area, then back again, the lightbox fails to work and instead just loads the plain image. It's been suggested that the easiest way to fix this would be to have a script unload the js and css that is loaded in with the page, then reload it when you go back to the gallery section. I'm a designer, not a developer though, so I don't know if this is true or not. Any help is really appreciated. The page can be found here: justgooddesign.net/graduation/

Here is a copy of the script which loads my content dynamically:

</style>

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

And here is the link that loads the gallery page

<a href="javascript:ajaxpage('gallery.html', 'info'); loadobjs('http://code.jquery.com/jquery-1.4.2.min.js', '/fancybox/fancybox/jquery.easing-1.3.pack.js', 'fancybox/fancybox/jquery.mousewheel-3.0.2.pack.js', 'fancybox/fancybox/jquery.fancybox-1.3.1.js', 'fancybox/fancybox/jquery.fancybox-1.3.1.css', 'fancybox/fancybox/gallery.js')">Gallery//</a>

Answer 1

In response to your comment, a cleaner way to it would be as follows,

Following the example you provided, with jQuery you can simply have this at the top of your page,

/* Link to jQuery here */
<script type="text/javascript">
$(document).ready(function() {
   $('ul#nav li a').click(function(e) {
       e.preventDefault();
       var url = $(this).attr('href');
       $('#content').load(url);
   });
});
</script>

The Mark Up would be as follows for example,

<ul id="nav">
    <li><a href="page1.html" title="Page 1">Link 1</a></li>
    <li><a href="page2.html" title="Page 2">Link 1</a></li>
    <li><a href="page3.html" title="Page 3">Link 1</a></li>
</ul>

<div id="content"></div>

The jQuery takes whatever URL that is in a link with the UL of 'nav' and loads it into the div with the ID of 'content'.

As a designer you can do the rest with CSS to make the dimensions suit your needs.

Let me know how that gets on your lightbox.