Accueil > galerie > galerie-jquery-galleryview

{ Galerie jquery galleryview }

Introduction

GalleryView Light

gallerie-view style Light

GalleryView Dark

gallery-view style Dark

 

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.

Avantages

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

Inconvénients

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 !

Placement des fichiers

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.

Script et feuille de styles dans l'en-tête

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>

Le html

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>

Le plugin light

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>

Le plugin dark

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>

Options de configurations

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.