SmoothGallery 2.0: Gallerie d’images en Javascript
Posté par jbj le 29 mar 2008 dans Javascript/Ajax • 36 commentairesIl 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 a quelques années, ce genre de galerie n'aurait é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. Ca 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 nouvel 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 aux 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 galerie 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.
Jules le 
C’est vraiment du très, très beau boulot! Quand à la nouvelle version, elle semble en effet très prometteuse.
Necy le 
Necy le 
Necy le 
loup2684 le 
Yo le 
sysy le 
Djejoo le 
GTZ le 
Loginux le 
Maxou le 
