Affichage spacial d'images avec Jquery

Par Laurent | 07.12.09 17:51 | 0 commentaire(s) | programmation

J'ai trouv� sympathique de pr�senter un script s'appellant Spacegallery tr�s bien con�u qui va vous permettre de cr�er une galerie esth�tiquement tr�s �l�gante avec des photographies, qui seront list�s l'une derri�re l'autre (un peu comme Mille-Feuilles plac� verticalement)
Ce script est construit en s'appuyant sur la librairie Javascript Jquery.
Je vais pr�senter rapidement comment int�grer au plus vite sur une page html ce script avec quelques photos.

Tout d'abord il est utile de r�cup�rer Jquery (pour avoir la derni�re version).
Sinon le fichier jquery.js(de fin 2007) est aussi pr�sent dans la source du code de ce plugin galerie : Eyecon Spacegallery

Une fois le fichier Zip t�l�charg� et d�zipp�, vous verrez plusieurs r�pertoires dont :
images / css / js et un fichier index.html .En lan�ant index.html vous verrez le script de galerie fonctionner.
Voici un rapide exemple d'int�gration sur une page html avec un minimum de code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Spacegallery</title> <link rel="stylesheet" media="screen" type="text/css" href="spacegallery.css" /> <link rel="stylesheet" media="screen" type="text/css" href="custom.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="eye.js"></script> <script type="text/javascript" src="utils.js"></script> <script type="text/javascript" src="spacegallery.js"></script> <script type="text/javascript"> (function($){ var initLayout = function() { $('#myGallery').spacegallery({loadingClass: 'loading'}); }; EYE.register(initLayout, 'init'); })(jQuery) </script> </head> <body> <div id="myGallery" class="spacegallery"> <img src="photos/ex-0.jpg" alt="" /> <img src="photos/ex-1.jpg" alt="" /> <img src="photos/ex-2.jpg" alt="" /> <img src="photos/ex-3.jpg" alt="" /> <img src="photos/ex-4.jpg" alt="" /> </div> </body> </html>
Et voici l'exemple en images
Les images � charger dans la galerie sont plac�es dans le div d'id myGallery, pour ajouter plus d'images, il suffit d'ajouter d'autres lignes avec ex-5.jpg , ex-6.jpg , .... ou le nom que vous souhaitez...

Important : suivant la taille des images que vous chargerez dans la galerie, il est utile de modifier dans le fichier de style custom.css la ligne #myGallery {width: 100%;height: 300px;} par ceci : #myGallery {width: 100%;height: 450px;}

En fait 450 px repr�sente la hauteur du div qui affiche l'image et en l'occurence je le fixe � la taille max de mon image la plus haute de ma galerie(ex :440px) avec une petite majoration, par exemple 10 px ceci permet ainsi de voir la totalit� de mon image..

Des infos compl�mentaires pour customiser la galerie sont pr�sentes dans la partie implement du site.

Voil� donc un excellent script pour r�aliser des galeries qui attirent l'oeil et donne du relief aux visuels...

Affichage spacial d'images avec Jquery

Commentaires

Thèmes

Tags récents

Populaires