Tutorial plugin JQuery #1 : galerie photo avec SpaceGallery

Publié le 2 avril 2009 par arnaud

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.

Pas encore de billet sur le même sujet !

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

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

bourgevin dit :

5 avril 2009 à 14:32

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
arnaud dit :

5 avril 2009 à 22:46
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>
bourgevin dit :

8 avril 2009 à 18:53

Ok merci pour la réponse
A plus
Lilian
mimmme dit :

14 mai 2009 à 14:35

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

21 septembre 2010 à 09:27

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

11 octobre 2010 à 07:17

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

21 février 2011 à 12:18

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.
hanen dit :

5 juin 2011 à 19:38

vraiment bravo
hifi dit :

12 juin 2011 à 20:10

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 ?
hifi dit :

12 juin 2011 à 20:12

dsl les balises code on rendu test….

c’était donc si j’enleve

test

avant
rastlin dit :

26 avril 2012 à 20:20

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

très beaux tuto