[RESOLU][Jquery - Ajax ] Problème d'utilisation de Slimbox avec Ajax

Bonjour à tous,

Je réalise un système de galerie d'images via des onglets appelés en ajax par le code ahahlib.js qui lui même appelle une page content.php. Suivant l'onglet cliqué, un switch php est mis en place (content.php) et j'effectue une requête sql pour afficher mes images.

J'ai ensuite décider de mettre en place Slimbox (version jquery) pour agrandir mes images.

Mon problème est le suivant : Lorsque j'essaye d'utiliser Slimbox via un rel="lightbox" basique pour une image chargé via ahahlib, le script de Slimbox n'est pas utilisé (l'image s'ouvre dans une nouvelle page). Alors qu'avec une image inséré normalement en dur dans la page, Slimbox fonctionne...

Voici mage page presse.php ou se trouvent les onglets :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>    
<script type="text/javascript" src="lib/js/lightbox/slimbox2.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/js/ahahLib.js"></script>
<script language="JavaScript" type="text/javascript">
function makeactive(tab) {
$("#ul_navigation li").removeClass("onglet01"); 
$("#onglet"+tab).addClass("onglet01");
document.getElementById("tab1").className = "no_active"; 
document.getElementById("tab2").className = "no_active"; 
document.getElementById("tab3").className = "no_active";
document.getElementById("tab4").className = "no_active";

document.getElementById("tab"+tab).className = "active";
callAHAH('lib/presse/content.php?content= '+tab, 'content','Chargement en cours de l\'onglet '+tab+'. Merci de patienter...', 'Erreur');
}

function galery(id) {
callAHAH('lib/presse/content.php?content=5&id='+id, 'content','Chargement en cours de la galerie '+id+'. Merci de patienter...', 'Erreur'); 
} 
</script>

<div id="galerie_onglet">
  <ul id="ul_navigation"> 
  <li onclick="makeactive(1)" id="onglet1" class=""><a href="#" class="no_active" id="tab1">Communiqu&eacute;s<br />& Dossiers de presse</a></li> 
  <li onclick="makeactive(2)" id="onglet2" class=""><a href="#" class="no_active" id="tab2">&Eacute;tudes<br />& Sondages</a></li> 
  <li onclick="makeactive(3)" id="onglet3" class=""><a href="#" class="no_active" id="tab3">Logos<br />& Charte graphique</a></li> 
  <li onclick="makeactive(4)" id="onglet4" class=""><a href="#" class="no_active" id="tab4">Photos<br />& T&eacute;l&eacute;chargements  </a></li> 
  </ul>
</div>
  <div id="content">Chargement de la page Content ici</div>

Voici le code ahahlib.js :

function callAHAH(url, pageElement, callMessage, errorMessage) {
     document.getElementById(pageElement).innerHTML = callMessage;
     try {
     req = new XMLHttpRequest(); /* e.g. Firefox */
     } catch(e) {
       try {
       req = new ActiveXObject("Msxml2.XMLHTTP");  /* some versions IE */
       } catch (e) {
         try {
         req = new ActiveXObject("Microsoft.XMLHTTP");  /* some versions IE */
         } catch (E) {
          req = false;
         } 
       } 
     }
     req.onreadystatechange = function() {responseAHAH(pageElement, errorMessage);};
     req.open("GET",url,true);
     req.send(null);
  }

function responseAHAH(pageElement, errorMessage) {
   var output = '';
   if(req.readyState == 4) {
      if(req.status == 200) {
         output = req.responseText;
         document.getElementById(pageElement).innerHTML = output;
         
         } else {
         document.getElementById(pageElement).innerHTML = errorMessage+"\n"+output;
         }
      }
  }

Enfin la page Content.php :

switch($_GET['content']{
case 1:
//blablablabla
break;
case 4:
//affichage des images...
break;
default:
//blabla
break;
}

Comment puis je appeler slimbox à lire le contenu chargé en ajax ?

J'ai fait pas mal de recherches sans succès...

Je vous remercie d'avance pour votre aide
Modifié par Kangax (26 Nov 2009 - 11:55)

Bonsoir,

J'ai à peine regarder mais c'est un problème courant avec l'ajax. la Slimbox s'attache à toute les images de la page (m'arrêter si je dit des bêtises ). Mais quand elle sont ajouter avec de l'ajax, c'est trop tard, la Slimbox ayant déjà fait son travail. Il faut réa-tacher la Slimbox à chaque nouvelle image.
Au passage regarde un peu ces méthodes de jquery :
- ajax()
- blind()/click()
- live()
- html()
- addClass()/removeClass()
- les sélecteurs

Hello,

J'avais effectivement cherché du coté de la méthode live() de Jquery mais ca ne fonctionnait pas.

J'ai simplement ajouté ceci au bon endroit dans mon appel d'ajax :

req.onreadystatechange = function() {
     responseAHAH(pageElement, errorMessage);     
     [b]jQuery("#content a[rel^='lightbox']").slimbox();[/b]
     };

Merci.
Modifié par Kangax (30 Nov 2009 - 16:30)