Discussion :

[kangax]

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
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

[danielhagnoul]

Bonsoir.

live(), Voir : http://www.developpez.net/forums/d83...s/#post4805186

[kangax]

Merci pour la piste ! Je pense avoir progresser, néanmoins mon problème se situe maintenant au niveau de Slimbox...

Voici le code que j'ai donc ajouté dans ma page presse.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$("a[rel='lightbox']").live("click", function(){      
			jQuery.slimbox();
 
});

Slimbox se lance effectivement mais l'image se charge dans une nouvelle page...

[danielhagnoul]

Bonsoir.

En fait, il s'agit d'un plugin, il y en a des centaines, personne ne peut tous les connaître. Vous seriez bien aimable à l'avenir de le signaler au début de votre question, on pourrait ainsi vous répondre beaucoup plus rapidement.

Je viens de charger la dernière version : slimbox-2.0.3
et de tester l'exemple.

En fait slimbox se déclenche automatiquement grâce au code suivant qui se trouve à la fin du fichier slimbox2.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
 jQuery(function($) {
  $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
   return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
  });
 });
}

Les images s'affichent sans problème (toujours sur une autre page) tant que l'on respecte les conditions de l'exemple.

Il y a d'autres plugin du même genre.

Sur developpez vous trouverez deux tutoriels :Une galerie d'images et Slider d'image

[kangax]

Bonjour,

Effectivement ce bout de code permet à Slimbox de se lancer automatiquement via un rel="lightbox". Comme dit dans mon premier message, lorsque je génère une page en Ajax avec des images généré à partir d'une base php, Slimbox n'est pas exécuté. La fonction live de Jquery n'est efficace qu'à moitié (je vois Slimbox s'exécutait mais la page ou se trouve l'image remplace de suite le cadre Slimbox)...je dois louper quelque chose mais cela m'échappe...

Merci d'avance.

[kangax]

Ah victoire !

J'ai rajouté ce code dans mon fichier d'appel Ajax (j'avais fait plein de test similaire sans succès mais débutant en Ajax j'avais mal analysé le processus)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci de votre aide néamoins