Utiliser slimbox après une mise à jour de page suite à une requête ajax

Appréciation moyenne:  / 8
Très mauvaisTrès bien 

Utiliser slimbox sur des nouvelles images après une mise à jour de page suite à une requête ajax

J'avais envie d'utiliser une imagebox pour avoir quelques effets sur certaines images du site que je suis en train de développer.
Comme par ailleurs j'utilise mootools 1.22 pour avoir d'autres effets sur d'autres parties, je me suis naturellement tourné vers une de ces imagebox compatibles mootools.
La première trouvée me comble, il s'agit de Slimbox 1.7 pour mootools 1.2+

 

Installation: 

Après avoir téléchargé les bons fichiers chez mootools et slimbox, je les transferts sur mon site dans /chemin_complet_au_repertoire_des_scripts/ pour travailler en direct live.
J'ai renommé chaque fichier par habitude, ça n'a pas d'importance et laisser les noms par défaut c'est aussi bien.
Il faut, pour slimbox, envoyer aussi le répertoire css et son contenu dans le site afin que slimbox fonctionne.
Mais si vous en êtes là, à chercher comment faire exécuter slimbox après un resquest.HTML, la partie install ne doit pas vous poser de problème...

 

Test:

Je fais un premier test sur une page, en incluant d'abord ceci:



<script type="text/javascript" src="http://www.monsite.fr/chemin_complet_au_repertoire_des_scripts/mootools_1_22.js"></script>
<script type="text/javascript" src="http://www.monsite.fr/chemin_complet_au_repertoire_des_scripts/slimbox_1_7.js"></script>
<link rel="stylesheet" href="http://www.monsite.fr/chemin_complet_au_repertoire_des_scripts/css/slimbox_1_7.css" type="text/css" />

je choisis une image de la page encadrée par un lien <a>, je mets dans le lien rel="lightbox" , comme indiqué sur le site de la slimbox, ça parait vraiment simple à mettre en place, j'ai un doute.
Je teste, ça marche du premier coup, fantastique!

Fort de cet essai concluant, je passe à la partie qui m'intéresse:
j'ai sur cette page un gros div vide qui est mis à jour via une requête ajax (mootools: request.HTML) lors d'un click sur un élément d'un menu, du grand classique on dira.

Le résultat de cette mise à jour est l'inclusion d'une image encadrée d'un lien <a> (entre autres, mais le reste des détails ne compte pas ici)
Je rajoute sur le lien <a> de l'image le tag slimbox rel="lightbox" , teste, et là, échec...

J'ai beaucoup cherché sur le web et ce scénario semble impossible à mettre en place.

En effet, le script slimbox se met en place au chargement de la page, donc avec un div vide.
Lors d'une requête HTML, le div est mis à jour mais la page n'est pas rechargée, c'est bien le but.
Du coup les images ne sont pas vues par slimbox et lorsque je clique dessus, elles apparaissent dans une autre page (j'ai mis un _blanck sur le lien <a> pour les cas sans script).

Bref, comment utiliser Slimbox pour gérer des liens images générés via une requête ajax, là est toute la question.

Et la solution est là:


le principe est de ne charger le script Slimbox que lorsque le div est mis à jour, beaucoup en sont arrivés là.
Mais en ajoutant une ligne



window.addEvent("domready", Slimbox.scanPage);

dans la partie onSucess ou onComplete de la requête ajax de mootools, ça ne fonctionne pas mieux, Slimbox ne relit pas la page.

Allez, trêve de blabla, j'ai fait comme ça:

D'abord récupérer chez mootools la partie Assets des outils (partie more, pas core de mootools) si vous ne l'avez pas déjà et l'inclure dans le head de la page, juste en dessous de l'inclusion du script mootools:



<script type="text/javascript" src="http://www.monsite.fr/chemin_complet_au_repertoire_des_scripts/mootools-1.2.2.2-more.js"></script>

dans le onSuccess de la requête, rajouter à la fin:



var myScript = new Asset.javascript('/chemin_complet_au_repertoire_des_scripts/slimbox_1_7.js');

Ainsi, lors du retour de la requête, le script slimbox est intégré dans head de la page et donc évalué, il scanne la page y compris le nouveau contenu et les liens ajoutés.

Plusieurs tests confirment le bon fonctionnement de la solution, mais!

Le seul problème, c'est que cette inclusion se fait à chaque appel de la requête. Et on se retrouve rapidement avec un slimbox inclus 10 fois!!!

Cette partie-là n'est pas la plus compliquée à corriger.


Principe:

Analayser en javascript le head de la page, récupérer les éléments script, lire pour chacun la source, et si la source contient le nom du fichier slimbox.js (moi j'ai modifié le nom afin d'être sûr de ne supprimer que le mien rajouté)

Ensuite seulement, injecter le slimbox.js via mootools.Assets

 

Voilà ce que ça donne, une petite fonction pas forcément top puisque je suis quand-même un débutant en javascript:
 



var Inclus_Slimbox = function() //event
{
   var source_script = '';
   $(document.html).getElements('script').each(function(item) 
   {
     source_script = item.src;
     // si trouve slimbox le supprimer
     if(source_script.search('slimbox_1_7.js')!= -1)
     {
       item.dispose();
     }
   });
   //injecter slimbox:
   var myScript = new Asset.javascript('/chemin_complet_au_repertoire_des_scripts/slimbox_1_7.js');
}


et j'appelle cette fonction depuis le onSuccess de ma request.HTML, qui pour info est comme ça



var req = new Request.HTML
 ({
   method: 'post',
   encoding: 'utf-8',
   url: page,
   update: 'conteneur_detail,
   onRequest: function()
   {
     $('conteneur_detail).set('text', 'patience etc');
     $('patienter').setStyle('visibility', 'visible');
   },
   onSuccess: function()
   {
     $('patienter').setStyle('visibility', 'hidden');
     Inclus_Slimbox();
   },
   onFailure: function()
   {
     $('patienter').setStyle('visibility', 'hidden');
     $('conteneur_detail).set('text', 'Désolé, le produit n\'a pas été trouvé, essayez encore une fois...');
   }
 });
 req.send();

Voilà, j'espère que cette info vous aidera à avancer plus vite que je ne l'ai fait ahahah.