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.
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>
<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>
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
Copiez-collez le code ci-dessous droit après le code de l'étape 4.
$('#myGallery').spacegallery({loadingClass: 'loading'});
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
Si vous avez bien suivi les étapes de ce tutoriel vous devriez avoir votre SpaceGallery !
Manière originale de présenter ses photos
pas étudié pour contenir beaucoup de photos
rame un peu avec les grandes images