Saute-Mouton - Générateur de galeries de vignettes paramétrables

Navigation

Collectionnite

Infos site

Entoileuse : Isa

6224 passants
1 visiteur en ligne

A propos du site - infos techniques - mambo-jumbo légal

Habillage du site

Recherche

Newsletter

E-cartes

Flux RSS

CSS et standards

Catalogues de softs

Cinéma

Furl

GuppY

Infos et actus

Insolites

Langue française

Liens Del.icio.us

Mon del.icio.us

Del.icio.us cloud

Générateur de galeries de vignettes paramétrables

Ce générateur génère le code à copier-coller dans un article ou un billet de GuppY, pour afficher une planche de vignettes agrandissables. Les images agrandies s'affichent en surimpression sur la page, au lieu de s'ouvrir dans une popup. Le résultat est très élégant !

D'ailleurs, une démonstration vaut mieux qu'un long discours : jetez donc un oeil à cet exemple de galerie, inséré dans un article.

Nouveau ! Retrouvez-vous sur le chat de ce générateur pour en discuter !

Mise en place des fichiers

Vous ne faites cette mise en place qu'une seule fois, même si vous voulez créer plusieurs galeries.

Téléchargez les fichiers suivants et placez-les dans le dossier inc/ de GuppY :
- lightbox.js (mise à jour : 2.04.2006)
- lightbox.css (mise à jour : 2.04.2006, 22h24)
Téléchargez l'image suivante et placez-la dans le dossier pages/ de GuppY, ainsi qu'à la racine du site :
- loading.gif (mise à jour : 5 avril 2006)

Ouvrez le fichier inc/hpage.inc. Insérez les lignes suivantes entre les balises <head> et </head>, sauvegardez et réuploadez le fichier par FTP :

<script type="text/javascript" src="<? echo CHEMIN; ?>inc/lightbox.js" language="javascript"></script>

<link href="<? echo CHEMIN; ?>inc/lightbox.css" rel="stylesheet" type="text/css">

Préparation des images

Réunissez les images de votre galerie. Vos images :

auront forcément l'extension *.jpg
porteront toutes le même nom - sans majuscules, ni caractères spéciaux, ni espaces - suivi d'un chiffre incrémenté de 1 à partir de 1 (ex : italie1.jpg, italie2.jpg, italie3.jpg, etc.)
seront rassemblées dans un dossier du même nom qu'elles (ex : italie)

Chargez le répertoire d'images dans le dossier img/ de GuppY.

Génération de la galerie

Renseignez les champs du formulaire. Une aide contextuelle apparaît dans une infobulle, quand vous passez la souris sur les intitulés des champs.
Vous pouvez prévisualiser le rendu de votre page de vignettes, mais notez bien que la fonction d'agrandissement des vignettes est alors désactivée et qu'une image de test est utilisée.
Pressez le bouton Générer pour récupérer le code correspondant à votre galerie. Copiez-collez ce code dans un article.

Le générateur

Notes de développement

Crédits :

Le générateur est basé sur ce générateur de creatingonline, dont j'ai nettoyé, remanié et étoffé le code.
Lokesh Dhakar est le développeur de lightbox.js v.1 et lightbox.js v.2.01, les scripts qui permettent l'affichage des images agrandies en surimpression sur la page.

Remerciements :

Merci à Vanix pour son aide dans la correction du couic d'affichage des menus déroulants.
Merci à Zeblai qui a signalé le problème des bordures d'images de la v.2.

Change log :

5.04.2006 : nouvelle image loading.gif
2.04.2006 : modification de la CSS (ajout de l'opacité pour Konqueror, réduction de l'opacité CSS3 pour Opera)
2.04.2006 : [v.3] rétablissement du border="0" pour les images dans les générateurs. Une modification de la feuille de la CSS aurait été plus simple, mais je la réserve pour la prochaine version DIV/CSS des galeries.
2.04.2006 : [v.2] correction du couic des menus déroulants, modification de lightbox.js, modification de la CSS, suppression des images de fond, amélioration du rendu sur IE
1.04.2006 : [v.1]