SmoothGallery, une superbe galerie d’images

11/05/2007

... dans ce monde de brute (si si) !

Je vous présente SmoothGallery, un petit système de galerie/diaporama en ajax (enfin presque) à integrer dans vos sites web.

SmoothGallery est basé sur l'excellent framework Mootools v1.0, le javascript d'intégration ne dépassant pas les 16ko, ce qui est admirable aux vues de certains framework qui depasse les 100ko (Mais bon, mootools est réputé pour sa legereté)

Voici les explications ....

La douceur

Alors dans le mot SmoothGallery, il y a le mot Smooth, qui est utilisé à juste titre ici étant donné les efforts qui ont été fait sur les transitions et les effets de transparence, ça glisse tout seul !

Features

Transitions en fondue
Descriptions des images
Redimensionnement
Préchargement
Navigation par miniatures
Transparence
...

Compatibilité

Firefox
Opera
Internet Explorer 6 et 7
Safari

Exemples

Lbsquat, section galerie
Galerie
Diaporama

Installation

1. On télécharge les fichiers et on les upload dans un dossier sur notre serveur

2. On inclus les fichiers fraichement téléchargés dans notre page html où sera afficher la galerie. Entre les balises head

3. On tape un peu de code html dans notre page pour lui indiquer quelles photos afficher

<div id="myGallery">

<div class="imageElement">
<h3>Titre image 1</h3>
<p>Description image 1</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 image 2</h3>
<p>Description image 2</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>

4. On ajoute un bout de javascript direct dans la page pour initialiser la galerie. D'autres options sont possibles. Toujours dans head

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

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

Questions ?

Conclusions

L'avantage par rapport à un système en flash c'est qu'ici vous serez gagnant au référencement étant donné que tout le contenu est inclus dans le code source de votre page.
Par contre il sera bon de prévoir un bout de css additionnel dans des balises noscript pour ceux qui n'ont pas javascript activé, histoire que la présentation reste cohérente

Les plus:

Pas besoin de plugin (à l'inverse de flash)
Référencement non obfusqué
Légèreté d'intégration (poids)
Open Source

Les moins:

Rien ne s'affiche si javascript est désactivé
Manque de fluidité sur certaines animations (dépend aussi de l'ordinateur)
Plus lourd à mettre en place qu'un système en flash

-----

Articles relatifs

LbSquat

Franchement très pratique comme système de galerie, perso 100% content 😀
luna

bon, je vais faire ma boulette de base, mais ça marche pas chez moi :'(
j’ai essayé d’uploader sa page de démo sur mon site, ça marche même pas…
Voici ce que j’obtiens : http://utopia.megalith44/com/screens2.php
Si jamais t’as une idée de ce que j’ai bien pu faire comme c***erie, ça m’intéresse 😀
k-ny

Le lien que tu as mis ne fonctionne pas 😮
luna

arf, j’ai utilisé highslide finalement pour cette page, du coup j’ai écrasé ma page de test >_>

Dire que je voulais la laisser pour voir ce qui n’allait pas… Je retenterais le coup un peu plus tard, en espérant ne pas faire ma boulette ce coup-ci 🙂
k-ny

oki ^^
toonie

Ça ne marche pas comme il faudrait; j’ai ceci :
http://www.iwcc.fr/Yi_king_crop_circles_02.html

Je ne trouve pas mon/mes erreurs… J’ai bien essayé de corriger, mais sans doute en faisant d’autres exotismes car ça n’a pas été mieux :-p

Si tu pouvais me donner un coup de main 😉
Jonathan

Heu…
Ta page appelle mootools.js or http://www.iwcc.fr/Galerie/SmoothGallery-2.0/scripts/mootools.js n’existe pas sur ton serveur (erreur 404)…

Ton problème vient de là 🙂
Appelle le bon mootools.js (v1.11 je pense, regardes)
toonie

Salut Jonathan,

alors voilà, j’ai fait la correction -bien vu ,-) -de la sorte : <script src= »Galerie/SmoothGallery-2.0/scripts/mootools.v1.11.js »

J’ai vérifié si « jd.gallery.js » existe bien dans « scripts » ainsi que « jd.gallery.css » dans le dossier « css ». Tout est OK, e pourtant le résultat reste identique 🙁
k-ny

Hello toonie !

Déjà, évite les majuscules dans tes fichiers/url 😉

Et pour ton soucis, je vois d’où ça vient, change cette ligne:

var myGallery = new gallery($(’myGallery’), {timed: false});

Par:

var myGallery = new gallery($(« myGallery »), {timed: false});

Le soucis venait des apostrophes qui sont mal généré par mon blog, du coup ça provoquait des erreurs 😉

Ps: Et merci Jonathan pour le 1er coup de pouce 😉
Toonie

Hi k-ny,

J’ai apporté la correction, et… le problème reste identique :

http://www.iwcc.fr/Yi_king_crop_circles_02.html
k-ny

Toonie, met les url complète dans ton « head », car la, tes url ne pointent nulle part !
Michael

Coucou,
Je viens de mettre ce script sur mon site mais j’ai l’impression que IE ne l’apprécie pas trop…

Je pense que cela vient de la barre du haut « Pictures »… saurais-tu comment l’enlever ???
SolBreizh

Bonjour,
Tout fonctionne bien, simplement je voudrais juste changer la taille des textes dans les paragraphes « p » comme dans les titres « h3″(dans les 2 cas, il s’agit de la partie basse, pas du caroussel), mais je ne vois pas où dans le css… J’ai ssayé par exemple dans #myGallery .imageElement p, mais ça ne change rien… Une idée ?
SolBreizh

@SolBreizh

Finallement, à force de chercher encore et encore, j’ai trouvé (quelques heures…) !

Dans jd.gallery.css, j’ai rajouté au niveau de .jdGallery .slideInfoZone, le code suivant : font-size:larger; /* à la place, possible de mettre font-size:14px, c’est kif kif */

Pour répondre à Michael au passage, j’ai fait sous IE 7 et cela fonctionne très bien. Si tu veux toutefois l’enlever, c’est au niveau des scripts (je l’ai vu mais je ne sais plus dans lequel, désolé…), une ligne demande s’il faut afficher le caroussel; true pour oui, false pour non. Par défaut il est à true. Il suffit de le changer.
Nabil

bonjour,

j’ai un problème et je suis totalement perdu,
j’ai chargé un pluggin featured content gallery, que j’ai installé et activé mais le problème c’est que la galerie est installée
au centre de ma page d’accueil. J’ai regardé la css et le problème c’est que je ne sais pas comment faire pour que la galerie
ce positionne au centre du bloc headline de mon site : http://www.mag-essentiel.com

merci de votre aide
Ben

Hello,
je souhaiterais afficher deux galleries sur une meme page, mais je n’y arrive pas.
Les images sont contenues dans une div id, et du coup, je ne sais pas comment faire.
Quelqu’un pourrait me mettre sur la piste?
Merci d’avance
xmfrance

Bonjour,
Ayant un site de meuble, complètement en flash, j’ai pas mal de galeries a mettre. Je vais donc commencer par la première, et je voudrais savoir Comment faire et quelles lignes de code a mettre pour que la galerie se lance d’un bouton qui se trouve sur le site entièrement en flash, mais je précise, flash 6 et actionscript 2.0.
merci
Solenn

Bonjour !

Après bcp de recherches pour faire une galerie jolie et simple, je trouve que celle-ci me convient tout à fait !

Cependant, j’ai quelques soucis …
Après avoir mis les différents codes et effectuer les corrections mises dans les commentaires, cela ne fonctionne pas. Les images s’affichent les unes à la suite des autres, sans slide ou diaporama.

Une idée de ce qui ne va pas ?

Merci d’avance