Tutorial plugin JQuery #1 : galerie photo avec SpaceGallery

J’ai découvert cette galerie il y a peu. SpaceGallery (en anglais, créée par Eyecon) propose un bel effet de transition entre les photos. L’effet ressemble à l’effet utilisé par Mac dans le logiciel Time Machine.

Tutorial plugin JQuery : SpaceGallery

voir la demo du plugin JQuery Space Gallery

Le fonctionnement est assez simple si on respecte bien deux ou trois consignes :

Tout d’abord il faut charger le fichier CSS nécessaire au plugin :

et quelques instructions css sont également nécessaires (mais qu’il faudra adapter à la dimension de vos images) :

#myGallery { /* bloc contenant la galerie */
	width: 800px;
	height: 650px;
}
#myGallery img {
	border: 2px solid #52697E;
}
a.loading {
	background: #fff url(../images/ajax_small.gif) no-repeat center;
}

Il faut ensuite charger JQuery et les fichiers JavaScript nécessaires au plugin. Il faut bien respecter l’ordre pour le chargement des fichiers :

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="eye.js" type="text/javascript"><!--mce:1--></script>
<script src="utils.js" type="text/javascript"><!--mce:2--></script>
<script src="spacegallery.js" type="text/javascript"><!--mce:3--></script>

Ensuite dans ton fichier JavaScript insère le code suivant :

$(document).ready( function () {
   $('#myGallery').spacegallery({loadingClass: 'loading'});
});

Ce code initialise la galerie dans le bloc qui aura l’id ‘myGallery’. L’évènement .ready est la fonction de base de JQuery, elle permet l’exécution du script quand la page est complètement chargée.

Dans la page html4strict, on créé le bloc ‘myGallery’ dans lequel on insère les images que l’on souhaite afficher dans la galerie :

<div id="myGallery" class="spacegallery">
	<img src="photosExemples/2.jpg" alt="" />
	<img src="photosExemples/3.jpg" alt="" />
	<img src="photosExemples/4.jpg" alt="" />
	<img src="photosExemples/5.jpg" alt="" />
	<img src="photosExemples/6.jpg" alt="" />
	<img src="photosExemples/7.jpg" alt="" />
	<img src="photosExemples/8.jpg" alt="" />
	<img src="photosExemples/9.jpg" alt="" />
	<img src="photosExemples/10.jpg" alt="" /></div>

Le plugin est téléchargeable sur SpaceGallery, le .zip contient tous les fichiers nécessaires avec un exemple.

Cette entrée a été publiée dans JQuery, avec comme mot(s)-clef(s) , , . Vous pouvez la mettre en favoris avec ce permalien.

11 reponses a Tutorial plugin JQuery #1 : galerie photo avec SpaceGallery

  1. bourgevin dit :

    SAlut et merci pour l’explication du code ;)
    J’ai tout de même une question, quand tu marque « Ensuite dans ton fichier JavaScript insère le code suivant :$(document).ready( function () {
    $(‘#myGallery’).spacegallery({loadingClass: ‘loading’});
    }); »
    Dans quel fichier JS je le met? dans EYE? LAYOUT? SPACEGALLERY?
    Désolé pour cette question peut etre un peu stupide ;)

  2. arnaud dit :

    Salut! Il n’y a pas de questions stupides! Si tu n’as pas encore de fichier javascript contenant ton propre code (celui qui va être exécuté à l’affchage de la page, tu peux mettre le bout de code directement dans ton fichier html, entre les balises et , juste après l’appel aux trois fichiers javascript (tu as juste besoin d’ajouter les balises indiquant que c’est du code javascript) :

    <script type="text/javascript">
    $(document).ready( function () {
    $(’#myGallery’).spacegallery({loadingClass: ‘loading’});
    });
    </script>
  3. bourgevin dit :

    Ok merci pour la réponse ;)
    A plus
    Lilian

  4. mimmme dit :

    Bonjour,
    J’ai un problème, l’effet ne se fait pas sur internet explorer.
    Est ce du au css ??

  5. julien dit :

    Bonjour, serait t’il possible que les images bouge seul sans avoir besoins d’un click
    merci par avance ^^

  6. Yuki dit :

    Pas mal m’enfin il manque la gestion de la roulette quand même.

  7. akrev dit :

    Bonjour,
    Superbe réalisation.
    Comment pourrait on afficher un commentaire ou un titre par photo ?
    J’ai fait des tests mais soit j ai tous les titres qui s’affichent en même temps soit rien…
    Merci.

  8. hanen dit :

    vraiment bravo

  9. hifi dit :

    Bonjour,
    super merci très bien,
    par contre en partant de l’exemple fourni,
    si j’enleve

    test
    avant


    cela ne fonctionne plus, je ne comprend pas pourquoi, pourriez vous m’éclairer ?

  10. hifi dit :

    dsl les balises code on rendu test….

    c’était donc si j’enleve

    test

    avant

  11. rastlin dit :

    salut comment on fais pour mettre du texte et des lien pour chaque image merci

    très beaux tuto :)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>