Utiliser un Simple Viewer pour son site

Introduction du cours

Vous avez un site web et vous voulez créer un album de vos photos de vacances facilement ? Partager vos clichés avec des amis, des parents ?

Pas de problème, ce tuto est fait pour vous. Je vais vous apprendre à vous servir de Simple Viewer.

Je vous propose de commencer tout de suite par la présentation de l'application.

Simple Viewer, c'est quoi ?Simple Viewer

D'abord cette question qui vous brûle les lèvres :

Euh... c'est quoi, Simple Viewer ? :euh:

Simple Viewer, c'est une application flash gratuite développée par Airtight Interactive servant à créer un album photo en ligne.
En clair, elle va vous permettre de publier vos photos sur votre site web assez facilement.

À la fin de ce tutoriel, vous pourrez réaliser ceci :

Comment ça marche ?

Pas si vite, jeune Padawan, d'abord, on va télécharger l'archive :

Télecharger Simple Viewer (67,7 Ko)

Enregistrez l'archive et décompressez-la où vous voulez sur votre disque (moi, c'est sur le bureau).

Voilà, vous êtes prêts à passer à l'étape suivante. :lol:

Analysons les outilsLe contenu

Commencez par ouvrir le dossier (c'est mieux :-° ) et observez ce qu'il contient.

Beuh mais il y a plein de fichiers, lesquels vont me servir à moi ? :'(

Rhaaa mais ne pleurez pas ! Ce n'est pas bien compliqué :

Dossier/Fichier

Description

Images

C'est le dossier qui contient les images en grand format.

Thumbs

Ce sont les icônes des images à afficher.

Gallery

C'est un fichier XML avec tous les raccourcis des images.

Index

C'est la page HTML qui contient l'album en lui-même.

Readme

C'est le fichier "Lisez moi".

SWFobject

C'est le fichier JavaScript.

Viewer

C'est l'application permettant l'affichage de l'album en lui-même.

Tous les fichiers sont nécessaires sauf le ReadMe.

Vous avez tout compris ? Oui ?

Bon, eh bien passons à la partie suivante. ^^

Créons notre album !

Tout d'abord, je tiens à préciser qu'il n'y a pas que cette méthode qui soit valable pour créer votre album, il y en a d'autres que vous pouvez consulter ICI (en anglais).

Les images

Alors, maintenant que vous savez à quoi servent tous ces répertoires et fichiers, on va pouvoir commencer.

Commencez par choisir vos photos puis faites-les glisser dans le répertoire "Images".

Faites de même pour le répertoire "Thumbs".

Donc si vous avez bien compris, les images du répertoire "Thumbs" seront les icônes, celles du répertoire "Images" seront les photos grand format.

Note : j'ai renommé mes images en "01", "02", etc. pour des raisons de commodité, vous pouvez bien sûr les appeler autrement.

Donc maintenant que nous avons des photos et des icônes, nous pouvons attaquer le code.

Le code

Ouvrons le fichier Gallery.xml avec un éditeur comme Notepad++ ; vous devriez avoir ceci :

Qu'est-ce que c'est que ce truc ? :o

C'est un fichier XML, qui contient une simplification du module.

<image> <filename>tall.jpg</filename> <caption>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</caption> </image>

1. La balise <image> représente l'ensemble de la diapo : l'image, l'icône et le commentaire

2. La balise <filename> (ici, tall.jpg) est l'image qui sera affichée en premier.

   L'icône dans "thumbs" doit impérativement porter le même nom que la photo dans "Images" pour qu'elle puisse être affichée et le chemin doit être relatif (les dossiers "Images" et "Thumbs" doivent être dans le même répertoire que les fichiers "gallery", "index", "SWFobject" et "viewer").

3. La balise <caption> contient le texte qui sera affiché en commentaire ("One morning,[...]into stiffs sections.").

Vous avez sans doute remarqué la seconde ligne du fichier : on s'en occupera plus tard, ne vous en préoccupez pas pour l'instant.

Dans mon cas, le fichier modifié avec mes images donne cela :

Ouvrez ensuite index.html et admirez votre travail. :soleil:

Voilà ce que ça donne chez moi :

Voilà pour la base. Vous pouvez vous arrêter là, mais je vous conseille fortement de lire l'annexe, votre album sera déjà plus beau et plus personnalisé.

Annexe : aller plus loinLes options des diapos

Rappelez-vous : plus haut, je vous ai dit de ne pas vous occuper de la seconde ligne du fichier .xml ; eh bien, c'est ce qu'on va faire maintenant ! :waw:
Analysons le contenu :

<simpleviewergallery maxImageWidth="480" maxImageHeight="480" textColor="0xFFFFFF" frameColor="0xFFFFFF" frameWidth="20" stagePadding="40" navPadding="40" thumbnailColumns="3" thumbnailRows="3" navPosition="left" vAlign="center" hAlign="center" title="SimpleViewer Gallery" enableRightClickOpen="true" backgroundImagePath="" imagePath="" thumbPath="">

Beuh, ça veut dire quoi tout ça ? o_O

Facile : ce sont les options paramétrables des diapos, je vais vous montrer comment ça marche.

Modifier les options des diapos

Ceci est une traduction de ce qui est écrit ICI (en anglais)

Nom

Fonction de l'option

maxImageWidth="480"

La largeur des photos en pixels (ici 480).

maxImageHeight="480"

Idem mais cette fois, c'est avec la hauteur (480 pixels aussi).

textColor="0xFFFFFF"

La couleur du texte (en valeur hexadécimale).

frameColor="0xFFFFFF"

Couleur des boutons de navigation et des cadres (en valeur hexadécimale aussi)

frameWidth="20"

La largeur du cadre entourant les photos (en pixels).

stagePadding="40"

La largeur de la marge entre les icônes de diapos et l'affichage des photos.

thumbnailColumns="3"

Le nombre de colonnes d'icônes de diapos dans la liste de sélection.

thumbnailRows="3"

Le nombre de lignes d'icônes de diapos dans la liste de sélection.

navPosition="left"

La position des icônes de sélections des diapos sur la page. Peut être Top , Bottom , Left , Right .

vAlign="center"

Alignement de la galerie par rapport à la page. Peut être Top , Bottom , Center .

hAlign="center"

Idem mais de façon horizontale. Peut être Left , Center , Right .

title="SimpleViewer Gallery"

Tout bêtement le titre de la galerie.

enableRightClickOpen="true"

Activer / désactiver le clic droit. true (oui) ou false (non)

backgroundImagePath=""

Le chemin de l'image de fond, qui peut être relatif ou absolu. (Dans le cas d'un lien relatif, l'image de fond doit être dans le même répertoire que celui du fichier gallery.xml).

imagePath=""

Le chemin relatif au dossier "images". Si le dossier est dans le même répertoire que le fichier gallery.xml, il est inutile d'en spécifier un autre.

thumbPath=""

Idem mais pour les icônes des diapos.

Le fichier index.html

Certaines options pratiques comme l'emplacement du fichier gallery.xml peuvent être activées via la page index.html. Voici ce que l'on peut voir en ouvrant ledit fichier :

<!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>SimpleViewer</title> <!-- Download SimpleViewer at www.airtightinteractive.com/simpleviewer --> <script type="text/javascript" src="swfobject.js"></script> <style type="text/css"> /* hide from ie on mac \*/ html { height: 100%; overflow: hidden; } #flashcontent { height: 100%; } /* end hide */ body { height: 100%; margin: 0; padding: 0; background-image: http://i89.servimg.com/u/f89/13/29/76/34/fond511.jpg; color:#ffffff; font-family:sans-serif; font-size:20; } a { color:#cccccc; } </style> </head> <body> <p><a href="#">Retour arrière</a></p> <div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div> <script type="text/javascript"> var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818"); // SIMPLEVIEWER CONFIGURATION OPTIONS // To use an option, uncomment it by removing the "//" at the start of the line // For a description of config options, go to: // http://www.airtightinteractive.com/simpleviewer/options.html //fo.addVariable("xmlDataPath", "gallery.xml"); //fo.addVariable("firstImageIndex", "5"); //fo.addVariable("langOpenImage", "Open Image in New Window"); //fo.addVariable("langAbout", "About"); ...