SmoothGallery 2.0: Gallerie d’images en Javascript

Posté par jbj le 29 mar 2008 dans Javascript/Ajax • 18 commentaires

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.

Si vous avez aimé cet article, aidez-moi à le promouvoir en votant pour lui sur les sites suivants: Ces icones representent les sites de bookmarking social dans lesquels vos lecteurs peuvent partager et faire découvrir vos pages.

Tags: image, javascript, mootools, plugin, SmoothGallery, wordpress

18 commentaires

» Flux RSS des commentaires

Anonyme le 29 mars 2008 à 13:39:
SmoothGallery 2.0: Gallerie dimages en Javascript…

Il existe quantit de scripts Javascript dvous la cration de galerie dimages, mais celui-ci particulirement retenu mon attention. Bas sur lexcellent Mootools, SmoothGallery permet de crer une galerie dimages trs moderne. Bonne nouvelle, il existe gale…
Jules le 30 mars 2008 à 20:48:
Oui ce script est mortel, tout comme Mootools d’ailleurs
Jonathan le 3 avril 2008 à 20:29:
Ravi de voir que ce script plaît !

A propos, je prépare une nouvelle version pour bientôt…
Un truc sympa dans la version qui arrive c’est ca :
http://smoothslideshow.jondesign.net/SmoothGallery-2.1a/demozoom.html (Le zoom intégré :))
jbj le 3 avril 2008 à 23:04:
ça pour me plaire, il me plait C’est vraiment du très, très beau boulot! Quand à la nouvelle version, elle semble en effet très prometteuse.
8 scripts Javascript pour sublimer votre site le 5 avril 2008 à 14:52:
[...] m’a tellement séduit que ce script à fait l’objet d’un article dédié il y a une semaine. Basé sur l’excellent framework Mootools, SmoothGallery vous propose de [...]
Thème wordpress magazine: Openbook v2.2 est disponible le 17 avril 2008 à 10:02:
[...] slider à été remplacé par SmoothGallery. (dont j’avais déja parlé ici) Il est donc possible de mettre de grosses images qui mettrons vos meilleurs articles en avant. [...]
Necy le 12 mai 2008 à 15:48:
Salut !

Merci pour ce super script il est vraiment terrible !!

J’ai 2 questions :

- Comment fait on pour enlever le “Picture” sur ma galerie (quand on clique sa déplie un panneau qui montre les vignettes)
- Comment fait on pour rendre la partie du texte cliquable ? Comme sur ton blog enfaite ^^

Merci

A+
jbj le 12 mai 2008 à 15:54:
Hello Necy;
Pour le lien, regarde dans le code html que j’ai posté dans l’article, c’est la que tu dois placer ton lien, la partie texte deviendra alors cliquable.
Pour le vignettes, tu dois, au niveau du code d’iniatialisation Javascript, régler le paramètre showCarousel à false.
@+
Necy le 12 mai 2008 à 19:40:
Merci pour ta réponse rapide enfaite j’ai bien écrit le lien mais bizarre le texte n’est pas cliquable, il faut cliquer sur l’image pour que sa fonctionne… Le texte reste lui juste séléctionnable…

Après pour ce code, la nouvelle fonction il faut l’ecrire comment ? Moi je l’ais ecrit comme sa mais sa marche pas :

function startGallery() {
var myGallery = new gallery($(’myGallery’), {
timed: false
showCarousel: false
});
}
window.addEvent(’domready’, startGallery);
jbj le 12 mai 2008 à 19:58:
t’y es presque Il te faut juste rajouter des virgules entre les paramètres,comme je l’ai fait ici.

Pour le lien, c’est bizarre, tu es sous quel navigateur?
Necy le 12 mai 2008 à 20:48:
Merci pour le JS c’est bon !

Pour le lien non sa veut toujours pas sur les 2 navigateurs (firefox et explorer) je comprends pas trop je vais regarder plus en détails !

Sinon un autre problème (décidement lol) tu vois je place ma galerie juste sous un bloc div qui contient une image en arrière plan, et enfaite ma galerie est censé être collée à cette image, sa passe impec sous firefox, mais sous explorer j’ai un enorme décallage entre les deux comme si j’avais un saut de ligne (alors qu’il n’y a aucun BR) ! Comme je vois que toi sur ton blog la galerie est bien collé au menu, j’me dit que tu as peut-tre changé un truc dans la feuille de style ?
jbj le 12 mai 2008 à 21:02:
Faudrais que je vois ton script pour pouvoir t’aider sur ces deux points là
Necy le 19 mai 2008 à 21:59:
Yep! Alors voici le code pour le problème de décalage sous IE:

Class=”titre-colonne1-left” = contiens un background image.

Mon inculde “Galerie Ajax” = le code de la galerie.

Et pour le problème du lien je vois vraiment pas :/ :

TITRE
Ma description
jbj le 19 mai 2008 à 22:47:
Je crois que Wordpress à bouffé ton code…Cela dit, je voulais dire “As tu un endroit en ligne ou matter ton code?
Necy le 29 mai 2008 à 15:59:
A ouais merde lol, est-ce que tu as un mail ou je peux te montrer sa ? Ca sera plus simple …
jbj le 29 mai 2008 à 17:06:
Oui, contacte moi via le formulaire du blog
Necy le 17 juillet 2008 à 17:12:
Hello JBJ,

Est-ce que t’as pu voir pour mon problème de décalage sous IE ? Je viens de voir que ça me fait le même décalage sour Firefox 3.0

Merci

A+
jbj le 17 juillet 2008 à 19:40:
Tu peux mettre ton blog en ligne qqpart? La je pourrais aller regarder, voir ce qui va pas et trouver le problème