Faire une galerie d'images avancée ailleurs que dans un article en blocs

Une galerie, quoi ?

Dans l'interface d'administration e-majine manage, lorsque vous créez un article en bloc, vous avez la possibilité de faire un bloc de type médias. Configuration de ce bloc :

- Type : image
- Affichage: galerie d'images
- Insertion de plusieurs images composant cette galerie et enregistrement de leur ordre d'apparition
- Cocher la case "vignettes" - les vignettes des images sont affichées par défaut, en cliquant dessus les images sont affichées à leur taille réelle.
- Type de galerie : avancée
- Choix de l'alignement

Comment elle fonctionne ?

Beaucoup d'entre vous apprécient le fonctionnement du bloc de type média lorsqu'il affiche une galerie d'images en mode avancé. On me pose souvent la question sur son fonctionnement et les technologies qui sont utilisées pour afficher cela. Certains parlent de flash, d'autres d'AJAX... En fait, il s'agit de DHTML, qui n'est pas à proprement parler un unique langage mais une combinaison de technologies : Javascript, CSS et XHTML. La librairie utilisée pour faire ces galeries d'images provient du site lightbox.

Comment intégrer une galerie avancée ailleurs dans votre site ?

Faire appel aux fichiers externes

En suivant les recommandations du site de l'auteur, on s'aperçoit qu'il faut tout d'abord faire appel aux fichiers javascripts permettant de réaliser les effets de redimensionnement. Je vous conseille de déposer ces fichiers dans le dossier prévu à cet effet : "Scripts" se trouvant à la racine de votre FTP :

<script type="text/javascript" src="/scripts/prototype.js"></script>
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/scripts/lightbox.js"></script>

Ensuite, il faut faire appel à la feuille de style de cette galerie, sans oublier de déposer dans le dossier images, à la racine du FTP, toutes les images, elles-mêmes appelées à partir de la feuille de style :

<link  rel="stylesheet" type="text/css" href="/modeles/fr/Modele1/css/gallery.css" title="normal" />

Définir le(s) endroit(s) où se trouvera la galerie d'images

Il est nécessaire ensuite de définir dans votre template, l'endroit où va se trouver la galerie d'images. Pour cela, il faut encapsuler les images dans un div qui devra porter un attribut de class que vous aurez définit.

<div class="gallery">
         <img src="/medias/thumbnail/image1.png" alt="texte alternatif 1" />
         <img src="/medias/thumbnail/image2.png" alt="texte alternatif 2" />
         <img src="/medias/thumbnail/image3.png" alt="texte alternatif 3" />
</div>

Amusons-nous avec le javascript et le DOM

Intégrons maintenant un nouveau fichier javascript ayant pour but de rajouter, avec le DOM, pour chaque image, le lien avec les bons attributs, permettant de faire afficher le galerie d'images. Dans ce fichier, nous allons tout d'abord commencer par écrire une fonction pour travailler avec les "classname".

function getElementsByClassName(strClass, strTag, objContElm) {
        strTag = strTag || "*";
        objContElm = objContElm || document;
        var objColl = objContElm.getElementsByTagName(strTag);
        if (!objColl.length &&  strTag == "*" &&  objContElm.all) objColl = objContElm.all;
        var arr = new Array();
        var delim = strClass.indexOf('|') != -1  ? '|' : ' ';
        var arrClass = strClass.split(delim);
        for (var i = 0, j = objColl.length; i < j; i++) {
        var arrObjClass = objColl[i].className.split(' ');
        if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
                var c = 0;
                comparisonLoop:
                for (var k = 0, l = arrObjClass.length; k < l; k++) {
                        for (var m = 0, n = arrClass.length; m < n; m++) {
                                if (arrClass[m] == arrObjClass[k]) c++;
                                if (( delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
                                arr.push(objColl[i]);
                                break comparisonLoop;
                                }
                        }
                }
        }
        return arr;
}

La seconde fonction : à chaque fois que l'on va rencontrer le nom de la class, choisi sur notre div qui englobe les images de notre galerie, la fonction va détecter toutes les images. Pour chacune des images, il faut rajouter un lien dans le div parent, à ce lien. L'image est à insérer à l'intérieur et nous créons les attributs href, title et rel (qui va permettre de créer la galerie). Je vous fait grâce du fonctionnement de tout ça.

function createGallery(nameclass){
        var className = getElementsByClassName(nameclass, "div", document);
        for(var i=0 ; i<className.length ;i++){
                var imagesGallery = className[i].getElementsByTagName("img");
                for(var j=0 ; j<imagesGallery.length ;j++){
                        var lien = document.createElement("a");
                        className[i].appendChild(lien);
                        lien.appendChild(imagesGallery[j]);
                        lien.setAttribute('rel', 'lightbox['+nameclass+']');
                        lien.setAttribute('href', '/media/'+imagesGallery[j].src.split("/")[5]);
                        lien.setAttribute('title','<h3>'+imagesGallery[j].alt+'</h3>');
                }
        }
}

Et enfin, une fois que tout cela est fait, il ne reste plus qu'à lancer cette dernière fonction à la fin du chargement de la page. En n'oubliant pas de faire appel au même nom de class, mis sur le div qui englobe nos images.

window.onload = function(){
        var classname = "gallery";
        if (getElementsByClassName(classname, "div", document).length>=1){
                createGallery(classname)
        }
}

Ces trois dernières fonctions se trouvent aussi dans un fichier externe, il est nécessaire d'y faire appel comme précédemment :

<script type="text/javascript" src="/scripts/Gallery.js"></script>

Je laisse à disposition une archive contenant tous les fichiers suscités

A vos claviers, il ne vous reste plus qu'à insérer cela dans vos annuaires, catalogues, articles préformatés, etc.

PS : si dans votre site vous avez déjà intégré du javascript avec la fonction onload, il est fort probable qu'il y ait un conflit avec deux fonctions onload. Si c'est le cas, n'hésitez pas à lire cet article

EDIT : attention, pour la fonction createGallery à ne pas utiliser le paramètre "class" qui est un mot réservé pour Internet Explorer

Simon Bonaventure