[Jquery - Ajax ] Utilisation de Slimbox avec Ahahlib
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:
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és<br />& Dossiers de presse</a></li>
<li onclick="makeactive(2)" id="onglet2" class=""><a href="#" class="no_active" id="tab2">É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éléchargements </a></li>
</ul>
</div>
<div id="content">Chargement de la page Content ici</div> |
Voici le code ahahlib.js :
Code:
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:
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 ;)
