Galerie photo jQuery Transition

Qu'est-ce que c'est ?

Transition est un plugin jQuery permettant d'afficher une galerie photo animée. Sobre et légère (4,5 Ko en version compacte), cette galerie est conçue pour s'intégrer facilement à vos pages. Transition est distribué selon les termes de la licence GPL.

Ce plugin nécessite jQuery version 1.2 ou supérieure. Testé avec Firefox, Opera, Safari PC, Explorer 7, Explorer 6 (Note : les utilisateur d'IE6 auront une version dégradée, mais après tout on n'écoute pas de la Hi-Fi sur une antique radio à lampes !).

Instructions

1 | Installation

Téléchargez et décompressez l'archive du plugin. Copiez le répertoire transition à l'emplacement que vous souhaitez sur votre site (dans la suite de ces instructions, nous supposerons qu'il est placé dans le répertoire js).

2 | Contenu de votre galerie

Vous pouvez spécifier de deux manières différentes le contenu de votre galerie.

première méthode : Définissez le contenu de la galerie directement dans le <body> de votre page, sous forme d'une liste à puces (<ul>...</ul>) ou d'une liste ordonnée (<ol>...</ol>) :

<ul id="galerie" title="Fruits rouges">
   <li><a href="gallery/photo01.jpg" title="Framboises"><img src="gallery/thumb01.jpg" alt=""></a></li>
   <li><a href="gallery/photo02.jpg" title="Groseilles"><img src="gallery/thumb02.jpg" alt=""></a></li>
   ...
</ul>

Chaque ligne de cette liste est constituée d'un lien vers la photo à afficher et de l'image miniature correspondante.

Vous pouvez indiquer le titre de chaque image dans l'attribut title du lien. Vous pouvez donner un titre général à votre galerie dans l'attribut title de la liste elle-même.

Deuxième méthode : Créez une <div> vide dans le code de votre page et définissez le contenu de votre galerie dans le paramètre images lors de l'initialisation du plugin (voir la section Paramètres). Exemple :

$("#galerie").transition({
   title: "Fruits rouges",
   images: [
      {image: "galerie/photo1.jpg", thumb: "vignette1.jpg", title: "Framboises"},
      {image: "galerie/photo2.jpg", thumb: "vignette2.jpg", title: "Groseilles"},
      ...
   ]
});

Dans le <body> de votre page, déclarez alors simplement :

<div id="galerie"></div>

3 | Activation

Incluez la feuille de style du plugin ainsi que les scripts jquery et jquery.transition dans la section <head> de votre page :

<link rel="stylesheet" type="text/css" href="js/transition/default.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/transition/jquery.transition-0.2.pack.js"></script>

Lancez l'exécution du plugin, toujours dans la section <head> de la page :

<script type="text/javascript">
   $(document).ready(function() {
      $("#galerie").transition({
      ...paramètres...
      });
   });
</script>

Pour une documentation complète sur jQuery et sur la syntaxe utilisée ci-dessus, reportez-vous à la documentation officielle de jQuery.

paramètres

Lorsque vous lancez l'exécution du plugin, vous pouvez lui founir des paramètres afin de personnaliser la galerie, par exemple :

$("#galerie").transition({
   displayTime: 10000,
   transitionTime: 500
});
autoRun (booléen)
Si vous fournissez ce paramètre avec la valeur true, la galerie démarrera immédiatement en mode animé (slideshow). La valeur par défaut de ce paramètre est false.
title (texte)
Titre de votre galerie. Ce paramètre est utile si vous indiquez le contenu de la galerie au moyen du paramètre images. Sinon, utilisez l'attribut title de la liste des images dans votre code HTML.
images (liste)
Liste des images de votre galerie. Chaque élément de cette liste est un ensemble de clés/valeurs :
{image: "adresse de l'image", thumb: "adresse de la vignette", title:"titre de l'image"}, par exemple : 
$("#galerie").transition({
   title: "Fruits rouges",
   images: [
      {image: "galerie/photo1.jpg", thumb: "vignette1.jpg", title: "Framboises"},
      {image: "galerie/photo2.jpg", thumb: "vignette2.jpg", title: "Groseilles"},
      ...
   ]
});
displayTime (entier)
Indique la durée d'affichage d'une photo en mode slideshow. Cette durée est exprimée en millisecondes. La valeur par défaut est 5000 (5 secondes).

Note : la durée réelle d'affichage peut varier, l'image suivante n'étant affichée que lorsque son chargement est terminé.

transitionTime (entier)
Indique la durée de la transition entre deux images en mode slideshow. Cette durée est exprimée en millisecondes. La valeur par défaut est 1000 (1 seconde).
width (entier)
Largeur, en pixels, de la plus grande image de votre galerie. La largeur par défaut est 400 pixels.
height (entier)
Hauteur, en pixels, de la plus grande image de votre galerie. La hauteur par défaut est 300 pixels. Ce paramètre et le précédent permettent de définir les dimensions de la zone d'affichage des photos.
thumbs (entier)
Nombre de vignettes affichées en bas de la galerie. Par défaut, 5 vignettes sont affichées.
thumbSize (entier ou liste)
Dimension en pixels des vignettes. La valeur par défaut est 76 pixels (ce qui permet d'afficher précisément 5 vignettes espacées de 5 pixels sur une largeur totale de 400 pixels). Note: si vos vignettes ne sont pas carrées, indiquez leur largeur et leur hauteur sous la forme d'une liste de clés/valeurs, par exemple : {width: 76, height: 90}.
displayCaption (booléen)
Si ce paramètre vaut true (valeur par défaut), le titre de l'image est affiché lorsque la galerie est survolée par la souris.
displayTitle (booléen)
Si ce paramètre vaut true (valeur par défaut), le titre de la galerie est affiché lorsqu'elle est survolée par la souris.

Téléchargement

Historique

Contact

Pour toute information complémentaire, remarque, suggestion : contact@surlignage.com.