Problème de chargement du contenu js avec ajax

Question

J'ai une page qui charge le contenu dans une seule div via un script dans la page. Cela fonctionne bien mais le problème est que j'ai une lightbox dans l'une des pages chargées dynamiquement qui ne fonctionne que la première fois que vous y naviguez (le script que j'ai obtenu pour le chargement de la page est trouvé here). Une fois que vous naviguez vers une autre zone, puis revenez à nouveau, la lightbox ne fonctionne pas et ne charge qu'à la place l'image normale. Il a été suggéré que le moyen le plus simple de résoudre ce problème serait d'avoir un script décharger les js et css qui sont chargés avec la page, puis de le recharger quand vous revenez à la section de la galerie. Je suis un concepteur, pas un développeur, donc je ne sais pas si c'est vrai ou pas. Toute aide est vraiment appréciée. La page se trouve ici: justgooddesign.net/graduation/

Voici une copie du script qui charge dynamiquement le contenu de mon:

</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> 

Et voici le lien qui charge la page de la galerie

<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

En réponse à votre commentaire, un produit de nettoyage moyen de ce serait comme suit,

suivant l'exemple que vous avez fourni, avec jQuery, vous pouvez simplement avoir ce en haut de y notre 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> 

La Majoration serait comme suit par exemple,

<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> 

Le jQuery prend tout URL qui est en lien avec l'UL de « nav » et la charge dans le div avec l'identifiant du 'contenu'.

En tant que concepteur, vous pouvez faire le reste avec CSS pour faire les dimensions adaptées à vos besoins. Laissez-moi savoir comment cela se passe sur votre lightbox.