4

Tutorial plugin JQuery #1 : galerie photo avec SpaceGallery

le 2 avril 2009

tags tags : , ,

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.

Sur le même sujet (en théorie ) :

tags catégorie : JQuery

4 commentaires :

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

  2. 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>
  3. bourgevin dit :
    8 avril 2009 à 18:53

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

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

Ajouter un commentaire