11499 sujets

JavaScript, DOM et API Web HTML5

Bonjour tout le monde,
je me permets de poster un nouveau message, car je rencontre un petit soucis , un petit conflit entre ma navigation ajax (jQuery) et le plugin de lightbox pretty photo ou meme lightbox2 tout court ^^ .

Voici le soucis que j'ai lorsque j'effectue un test sans activer ma navigation ajax , lorsque je clique sur une photo qui apparait dans une lightbox , je vois passer dans mon url une chose du genre :http://www.monsite.fr/#/gallery/3/.

Lorsque ma navigation en ajax est active mon url est de la forme : http://www.monsite.fr/#blog, est la lightbox ne fonctionne pas.

je ne sais pas exactement définir le problème, mais sur la plupart des sites qui utilisent des lightbox, l'url n'est pas modifiée lorsqu'on clique sur une photo pour l'agrandir.

Je souhaiterais savoir comment faire pour éviter de modifier l'url à chaque fois que j'ouvre une photo avec une lightbox. Et également ne plus avoir de # dans mon url, pour avoir une url du style :

http://www.monsite.fr/blog/ au lieu de /#blog , tout en faisant en sorte que la page soit accessible en saisie directe comme c'est déjà le cas.

Voici le code JS et html de ma de ma navigation :



$().ready(function(){
	setInterval("checkAnchor()", 300);
});
var currentAnchor = null;

function checkAnchor(){
	if(currentAnchor != document.location.hash){
		currentAnchor = document.location.hash;

		if(!currentAnchor)
			query = "?p=home";
		else
		{
			
			var splits = currentAnchor.substring(1).split('&');
			//Get the section
			var section = splits[0];
			delete splits[0];
			//Create the params string
			var params = splits.join('&');
			var query = "?p=" + section + params;
		}
		
		$("#loading").show();
		$.get("callback.php",query, function(data){
                    
                    $("#content").html(data);
                    $("#loading").hide();
		});
	}
}





<ul class="nav">
                                <li class="link"><a href="#home" rel='tab'>ACCUEIL</a></li>
                               
                                <li ><a href="#pratique" class="link">PRATIQUE</a></li>
                                <li ><a href="#contact" class="link">CONTACT</a></li>                          
                           </ul>
<!--Si j'enlève le # ça ne fonctionnera plus  [decu] -->



Quelqu'un aurait -il une idée ? svp?
Modifié par blobi (20 Aug 2013 - 10:06)