SmoothGallery 2.0: Gallerie d’images en Javascript

Il existe quantité de scripts Javascript dévoués à la création de galerie d’images, mais celui-ci à particulièrement retenu mon attention. Basé sur l’excellent Mootools, SmoothGallery permet de créer une galerie d’images très moderne. Bonne nouvelle, il existe également un plugin Wordpress basé sur ce script et offrant la possibilité de mettre en lumière vos meilleurs articles.

SmoothGallery

Qu’on se le dise, SmoothGallery est vraiment représentatif des possibilités offertes par les frameworks Javascript tel que Mootools ou encore JQuery. Il y à quelques années, ce genre de galerie n’aurais été réalisable qu’avec du Flash, balourd et mal optimisé pour le référencement. Désormais, grâce à Mootools, nous allons pouvoir créer une galerie d’images aux effets de toute beauté.
Comme je suis sûr que vous êtes impatient de voir à quoi cela ressemble, je vous invite donc à aller voir de ce pas la page de démonstration sur le site de Jonathan Schemoul, créateur de SmoothGallery.

Convaincu? Dans ce cas, il ne reste plus qu’à mettre le script en place sur votre site, ce qui est d’une simplicité enfantine. Après avoir téléchargé et décompressé l’archive, éditez le fichier dans lequel vous souhaitez voir apparaitre la gallerie et incluez les deux fichiers Javascript ainsi que la feuille de style css:

<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />

Désormais, nous allons inclure le xhtml de la galerie. Le code ci-dessous listera deux images différentes. Si vous souhaitez en mettre davantage, rajoutez un div imageElement pour chaque nouvelle image.

<div id="myGallery">
    <div class="imageElement">
        <h3>Titre du premier item</h3>
        <p>Description du premier item</p>
        <a href="mypage1.html" title="open image" class="open"></a>
        <img src="images/brugges2006/1.jpg" class="full" />
        <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
    </div>
    <div class="imageElement">
        <h3>Titre du second item</h3>
        <p>Description du second item</p>
        <a href="mypage2.html" title="open image" class="open"></a>
        <img src="images/brugges2006/2.jpg" class="full" />
        <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
    </div>
</div>

A ce stade, la galerie est pratiquement opérationnelle. Il ne reste plus qu’à faire démarrer le script. Placez ce code dans la partie head de votre page html, ou encore mieux, dans un fichier .js que vous lierez à la page:

<script type="text/javascript">
function startGallery() {
    var myGallery = new gallery($('myGallery'), {
        timed: false
    });
}
window.addEvent('domready', startGallery);
</script>

Comme vous l’aurez sans doute remarqué, nous utilisons ici du Javascript non-intrusif. ça fait du bien un beau code bien propre

Et voilà, notre galerie est prête et vous pouvez admirer le résultat. Toutefois, notons l’existence de paramètres permettant de régler la galerie assez finement.
Dans le code ci-dessous, repérez la ligne 4. Vous incluerez vos paramètres supplémentaires à cet endroit.

• timed: true | false Réglé à true, les images défilerons toutes seules. Sur false, uniquement si l’utilisateur clique sur les flèches.
• showArrows: true | false Montre (true) ou non (false) les flèche permettant de passer à l’image suivante/précédente.
• showCarousel: true | false Permet de voir des vignettes des images si il est réglé à true.

Plugin Wordpress SmoothGallery: Featured Content Gallery

Avec la mode des thèmes Magazine, il est bon ton de pouvoir présenter à ses lecteurs une sélection mise en évidence de ses meilleurs articles. Si vous avez aimé SmoothGallery, alors le plugin Featured Content Gallery est fait pour vous.
Le principe est simple: Après avoir installé le plugin, un nouvelle onglet apparaitra dans le menu Options de votre interface d’administration Wordpress. Il vous sera proposé de renseigner les titres, descriptions, et images pour 5 – Pas un de plus, pas un de moins – articles à mettre en évidence.
Même si on peut regretter le manque de souplesse du procédé (Il aurait été intéressant, selon moi d’utiliser une catégorie “Featured” dédiée au articles à mettre en évidence) l’avantage est que le tout est particulièrement simple et sera accessible à tous.

Téléchargez l’archive, décompressez-là et uploadez le répertoire content-gallery dans le répertoire wp-content/plugins de votre install Wordpress.
Rendez-vous dans votre panneau d’administration et activez le plugin. Il ne vous reste plus qu’à placer la ligne suivante sur l’un des fichiers de votre thème pour générer la galerie:

<?php include (ABSPATH . '/wp-content/plugins/content-gallery/gallery.php'); ?>

Si vous souhaitez ne montrer la gallerie que sur une page spécifique de votre blog (Par exemple, la homepage) n’hésitez pas à lire cet article traitant des fonctions conditionnelles de Wordpress.