Aujourd'hui je vais vous montrer comment installer le plugin jQuery GalleryView !
J'ai regroupé dans ce tutoriel deux styles de GalleryView différents, vous pourrez choisir celui qui vous plait et l'installé sur votre site en suivant les instructions correspondantes.
J'attends de voir les commentaires mais à mon avis c'est une des meilleures formules.
Le cadre de la galerie peut être placé en haut du cadre ou en bas, vous pouvez même le placer sur les côtés si vous vous amusez à bricoler un peu. Mais dans tous les cas, ça démontre la très grande souplesse de cette galerie.
Le film strip partant du bas du cadre qui permet d'afficher les miniatures des différentes photos de l'album, les images se chargent dans le cadre principale en cliquant sur les miniatures, conventionnel et pratique.
Le gif animé pendant le chargement des photos permet d'informer les visiteurs que la galerie a bien reçue la requête et qu'elle est en cours de traitement (ça dissuadera les visiteurs de cliquer intempéstivement au cas ou la galerie ne réagit pas immédiatement).
La taille du cadre principale ne s'adapte pas automatiquement aux différentes tailles de photos, c'est donc à vous de faire en sorte que les photos que vous y mettrez seront toutes plus ou moins de la même taille, si vous n'y prêtez pas attention vous remarquerez assez rapidement un mauvais rendu pour les images qui sont au format portrait alors que votre galerie est plutôt structurée pour displayer les images tournées en paysage (ou le contraire selon la configuration de celle-ci).
La gourmandise est un vilain défaut, sur le web aussi ! En effet notre chère GalleryView requière non moins de 5 scripts pour la faire fonctionner (avec les effets), vous pouvez certes enlever les effets, mais le rendu ne sera pas aussi bon qu'avec.
Conclusion : A mon goût, ce plugin galerie jQuery est l'un des meilleurs qui soit, premièrement parce qu'il n'utilise pas la technologie Flash mais uniquement du HTML et du Javascript (ce qui du point de vue de la compatibilité des navigateurs, assure quand même mieux que du Flash ou d'autres technologies propriétaire et deuxièment parce qu'il respect les standards du web. Troisième et dernier point : une bonne finition générale même si on regrette une adaptation du cadre aux différentes tailles de photos.
Bref ! Assez causé, on commence le tutoriel !
Décompressez l'archive à la racine de votre site, renommez si vous voulez le nom du dossier. Attention, si vous décidez de changez un ou plusieurs fichiers de place n'oubliez pas de changer les liens dans tous les documents liés.
Inclure le code suivant entre les balises <head> et </head> de votre page.
<link href="galleryview/galleryview.css" type="text/css rel="stylesheet" />
<script type="text/javascript" src="galleryview/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="galleryview/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="galleryview/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="galleryview/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script>
Vous voilà déjà à la quatrième étape de ce tutoriel, on va attaquer la partie HTML qui va détérminer la structure de votre galerie.
Je vais décomposer avec vous la structure de la galerie type.
Premièrement on à la balise div générale qui a pour id "photos" celui ci va permettre au plugin jQuery de répérer ou se trouve votre galerie dans la page html est de la faire fonctionner.
Deuxièmeme la div ayant pour classe panel, c'est cette balise qui va initaliser le cadre principale ou s'afficheront les images/photos, cependant il n'inclut pas le filmstrip des miniatures, ça on y reviendra après.
Troisièmement la div qui a pour classe panel-overlay va permettre d'afficher des informations dans le bandeau opaque entre le filmstrip des miniatures et le cadre ou les images s'affichent.
Voilà c'est tout pour la première partie de l'étape HTML.
<div id="photos" class="galleryview"> <div class="panel"> <img src="img/gallery/01.jpg" /> <div class="panel-overlay"> <h2>Effet du soleil sur le paysage</h2> <p>Photo by <a href="http://www.sxc.hu/profile/tomharry" target="_blank">tomharry</a>. View full-size photo <a href="http://www.sxc.hu/photo/158829" target="_blank">here</a>.</p> </div> </div> <div class="panel"> <img src="img/gallery/02.jpg" /> <div class="panel-overlay"> <h2>Eden</h2> <p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>. View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p> </div> </div> <div class="panel"> <img src="img/gallery/03.jpg" /> <div class="panel-overlay"> <h2>Snail on the Corn</h2> <p>Photo by <a href="http://www.sxc.hu/profile/baines" target="_blank">baines</a>. View full-size photo <a href="http://www.sxc.hu/photo/34453" target="_blank">here</a>.</p> </div> </div> <div class="panel"> <img src="img/gallery/04.jpg" /> <div class="panel-overlay"> <h2>Flowers</h2> <p>Photo by <a href="http://www.sxc.hu/profile/jazza" target="_blank">jazza</a>. View full-size photo <a href="http://www.sxc.hu/photo/990169" target="_blank">here</a>.</p> </div> </div> <div class="panel"> <img src="img/gallery/06.jpg" /> <div class="panel-overlay"> <h2>Alone Beach 2B</h2> <p>Photo by <a href="http://www.sxc.hu/profile/sgursozlu" target="_blank">sgursozlu</a>. View full-size photo <a href="http://www.sxc.hu/photo/738279" target="_blank">here</a>.</p> </div> </div> <div class="panel"> <img src="img/gallery/05.jpg" /> <div class="panel-overlay"> <h2>Sunrise Trees</h2> <p>Photo by <a href="http://www.sxc.hu/profile/a_glitch" target="_blank">a_glitch</a>. View full-size photo <a href="http://www.sxc.hu/photo/289581" target="_blank">here</a>.</p> </div> </div> <div class="panel"> <img src="img/gallery/07.jpg" /> <div class="panel-overlay"> <h2>Waterfall</h2> <p>Photo by <a href="http://www.sxc.hu/profile/thesaint" target="_blank">thesaint</a>. View full-size photo <a href="http://www.sxc.hu/photo/174331" target="_blank">here</a>.</p> </div> </div> <div class="panel"> <img src="img/gallery/08.jpg" /> <div class="panel-overlay"> <h2>Death Valley</h2> <p>Photo by <a href="http://www.sxc.hu/profile/djkmart" target="_blank">djkmart</a>. View full-size photo <a href="http://www.sxc.hu/photo/270109" target="_blank">here</a>.</p> </div> </div> <ul class="filmstrip"> <li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li> <li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li> <li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li> <li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li> <li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li> <li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li> <li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li> <li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li> </ul> </div>
Pour obtenir le style de GalleryView Light vous devrez copier/coller ce bout de code juste en dessous du code que vous avez copiez dans l'étape 2. Toujours dans l'en-tête.
<script type="text/javascript"> $(document).ready(function(){ $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100 }); }); </script>
Pour obtenir le style de GalleryView Light vous devrez copier/coller ce bout de code juste en dessous du code que vous avez copiez dans l'étape 2. Toujours dans l'en-tête.
<script type="text/javascript"> $(document).ready(function(){ $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 30, frame_height: 30, overlay_color: '#222', overlay_text_color: 'white', caption_text_color: '#222', background_color: 'transparent', border: 'none', nav_theme: 'light', easing: 'easeInOutQuad', pause_on_hover: true }); }); </script>
Copiez d'abord le code de la fenêtre ci-dessous et passer à la rubrique explications pour les configurer.
panel_width | nombre entier (en pixels) | largeur du panel |
panel_height | nombre entier (en pixels) | hauteur du panel |
frame_width | nombre entier (en pixels) | largeur des miniatures |
frame_height | nombre entier (en pixels) | hauteur des miniatures |
overlay_height | nombre entier (en pixels) | hauteur du panel-overlay |
overlay_font_size | n'importe quel valeur (en px,em,pt,%) | Taille de la police par défaut |
overlay_position | 'top' | 'bottom' | Position de l'overlay par rapport au panel |
filmstrip_position | 'top' | 'bottom' | Position du filmstrip par rapport à la galerie |
transition_speed | jQuery time value (200,'slow',etc) 400 | Vitesse de l'effet de transition |
transition_interval | jQuery time value (200,'slow',etc) 6000 | Temps entre deux transitions (0 = pas de transition automatique) |
overlay_opacity |
nombre à virgule 0.0 – 1.0 0.6 | Opacité du panel-overlay |
overlay_color | jQuery color value (rgb,hex,name) 'black' | Couleur du background pour l'overlay-panel |
background_color |
jQuery color value (rgb,hex,name) 'black' | Couleur de fond du filmstrip |
overlay_text_color | jQuery color value (rgb,hex,name) 'white' | Couleur du texte dans le panel-overlay |
caption_text_color | jQuery color value (rgb,hex,name) 'white' | Couleur des textes dans les infos du filmstrip |
border | css value (e.g. '3px dotted #343434') '1px solid black' | Taille, style et couleur des contours de la galerie |
nav_theme | ('light' | 'dark') 'light' | Couleur des pointeurs de la galerie et du filmstrip |
easing | jQuery easing value ('linear','swing',etc) 'swing' | Contrôle l'effet d'animation utilisé pour les transitions |
show_captions | boolean false | Determines whether or not frame captions are displayed |
fade_panels | boolean true | Determines whether panels fade during transitions or switch instantly. |
pause_on_hover | boolean false | If true, animations will pause when the mouse hovers over the panel (requires 500ms hover to pause) |
Et voilà ! Vous pouvez maintenant utilisez et admirez votre galerie.