Accueil > galerie > space-gallery

{ Spacegallery }

Introduction

SpaceGallery jQuery

SpaceGallery jQuery

Placement des fichiers

Décompressez l'archive à la racine du site et placez-y les dossiers tels qu'il sont dans l'archive. Si vous avez déjà des dossiers se nommant comme ceux de l'archive, rajoutez simplement les fichiers qui s'y trouvent dans votre arborescence existante.

Code à inclure dans l'en-tête

Ajouter le code ci-dessous dans l'en-tête de la page ou vous souhaitez voir apparaître la SpaceGallery Attention : il est important que les éléments soient dans cet ordre là.

<link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
	
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/eye.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/spacegallery.js"></script>

Le code html

<div id="myGallery" class="spacegallery">

<img src="images/space_gallery.jpg" alt="" />
<img src="images/space_gallery(1).jpg" alt="" />
<img src="images/space_gallery(2).jpg" alt="" />
<img src="images/space_gallery(3).jpg" alt="" />
<img src="images/space_gallery(4).jpg" alt="" />
<img src="images/space_gallery(5).jpg" alt="" />
<img src="images/space_gallery(6).jpg" alt="" />

</div>

Le css

Copiez/collez les trois propriétés CSS dans votre feuille de style déjà existante ou alors laissez le code dans le fichier spacegallery.css. Toutefois si vous décidez de le fusionner avec votre feuille de style n'oubliez pas de corriger le lien dans l'en-tête de votre page.

.spacegallery {
position: relative;
overflow: hidden;
}

.spacegallery img {
position: absolute;
left: 50%;
}

.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/blank.gif);
}

#myGallery {
width: 100%;
height: 600px;
}

#myGallery img {
border: 2px solid #52697E;
}

a.loading {
background: #fff url(../images/ajax_small.gif) no-repeat center;
}

Dans ce code, il y a une propriété que vous serez surement amené à modifier : #myGallery qui définit la largeur ainsi que la hauteur de votre galerie.

La propriété a.loading permet d'afficher un gif animé pendant le chargement de la SpaceGallery

Appels du plugin jquery

Copiez-collez le code ci-dessous droit après le code de l'étape 4.

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

Configuration de la spacegallery

Ouvrez le fichier spacegallery.js Entre les lignes 15 et 21 se trouve sept variables qui vont vous permettre de configurer un minimum votre Galerie jQuery.

J'ai volontairement pas expliqué les deux dernière variables afin que ce tutoriel reste accessible. Donc ne les touchez pas ;-)

border		Bordure autour des images (en px). par défaut 6
duration		Durée de l'animation (en ms). par défaut 800
perspective		Hauteur de la perspective. par défaut 140
minScale		Minimum scale for the image in the back. Default: 0.2
loadingClass	classe CSS appliquée aux éléments en cours de chargement.
before			Callback function triggered before going to the next image
after			Callback function triggered after going to the next image

Conclusion

Si vous avez bien suivi les étapes de ce tutoriel vous devriez avoir votre SpaceGallery !

Avantages

Manière originale de présenter ses photos

Inconvénients

pas étudié pour contenir beaucoup de photos

rame un peu avec les grandes images