SmoothGallery, une superbe galerie d’images

11/05/2007
Web Développement et Design Allez aux commentaires

... 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

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
<script src="scripts/mootools.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" />
 
  • 3. On tape un peu de code html dans notre page pour lui indiquer quelles photos afficher
    <div id="myGallery">
        <!-- Image 1 -->
        <div class="imageElement">
            <h3>Titre image 1</h3>
            <p>Description image 1</p>
            <!-- ici c'est le lien qui s'ouvrira lors du clic sur l'image, facultatif !-->
            <a href="mypage1.html" title="open image" class="open"></a>
            <!-- L'image grand format -->
            <img src="images/brugges2006/1.jpg" class="full" />
            <!-- L'image miniature  (100px*75px)-->
            <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
        </div>
        <!-- Image 2 -->
        <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>
        <!-- Etc ... -->
    </div>
 
  • 4. On ajoute un bout de javascript direct dans la page pour initialiser la galerie. D'autres options sont possibles. Toujours dans head
<!-- Pour une galerie normale -->
<script type="text/javascript">
function startGallery() {
        var myGallery = new gallery($("myGallery"), {timed: false});
}
window.onDomReady(startGallery);
</script>
 
<!-- Pour une galerie diaporama -->
<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

  1. LbSquat
    12/05/2007 à 22:04 | #1
    Répondre | Citer

    Franchement très pratique comme système de galerie, perso 100% content :D

  2. luna
    08/10/2007 à 09:49 | #2
    Répondre | Citer

    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 :D

  3. k-ny
    09/10/2007 à 11:24 | #3
    Répondre | Citer

    Le lien que tu as mis ne fonctionne pas :o

  4. luna
    10/10/2007 à 07:13 | #4
    Répondre | Citer

    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 :)

  5. k-ny
    10/10/2007 à 11:08 | #5
    Répondre | Citer

    oki ^^

  6. toonie
    26/01/2008 à 14:20 | #6
    Répondre | Citer

    Ç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 ;-)

  7. Jonathan
    31/01/2008 à 01:46 | #7
    Répondre | Citer

    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)

  8. toonie
    31/01/2008 à 22:04 | #8
    Répondre | Citer

    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 :(

  9. k-ny
    01/02/2008 à 13:00 | #9
    Répondre | Citer

    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 ;)

  10. Toonie
    02/02/2008 à 22:40 | #10
    Répondre | Citer

    Hi k-ny,

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

    http://www.iwcc.fr/Yi_king_crop_circles_02.html

  11. k-ny
    05/02/2008 à 15:01 | #11
    Répondre | Citer

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

  12. Michael
    27/03/2009 à 13:57 | #12
    Répondre | Citer

    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 ???

  13. SolBreizh
    07/07/2009 à 10:55 | #13
    Répondre | Citer

    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 ?

  14. SolBreizh
    09/07/2009 à 11:16 | #14
    Répondre | Citer

    @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.

  15. Nabil
    12/12/2009 à 18:49 | #15
    Répondre | Citer

    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

  16. Ben
    18/03/2010 à 04:58 | #16
    Répondre | Citer

    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

  17. xmfrance
    24/03/2010 à 22:14 | #17
    Répondre | Citer

    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

  18. Solenn
    17/10/2010 à 23:51 | #18
    Répondre | Citer

    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