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 :
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.
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>
La balise <image> représente l'ensemble de la diapo : l'image, l'icône et le commentaire
La balise <filename> (ici, tall.jpg) est l'image qui sera affichée en premier.
La balise <caption> contient le texte qui sera affiché en commentaire ("One morning,[...]into stiffs sections.").
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é.
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 :
Facile : ce sont les options paramétrables des diapos, je vais vous montrer comment ça marche.
Modifier les options des diapos
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");
//fo.addVariable("preloaderColor", "0xFFFFFF");
fo.write("flashcontent");
</script>
</body>
</html>
On ne va garder que ce qui nous interesse, à savoir cette partie :
<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");
//fo.addVariable("preloaderColor", "0xFFFFFF");
fo.write("flashcontent");
</script>
Voici les différentes options supplémentaires et leur effet :
Nom
Fonction de l'option
fo.addVariable("xmlDataPath", "gallery.xml");
Donne le chemin relatif pour le fichier xml. Permet aussi de créer un fichier avec un nom différent, à votre guise.
fo.addVariable("firstImageIndex", "5");
L'image d'acceuil quand on ouvre la galerie. Plus précisément la première image qui se charge quand on ouvre l'album. Attention cependant, la numérotation démarre à 0. Si vous voulez afficher la première image, renseignez 0 où ne l'activez pas . ;)
fo.addVariable("langOpenImage", "Open Image in New Window");
Permet d'afficher un texte personnalisé à la place de "Open image in a new window". Remplacez par ce que vous voulez.
fo.addVariable("langAbout", "About");
De la même manière, remplacer le "About" par défaut par une autre formulation.
fo.addVariable("preloaderColor", "0xFFFFFF");
Changer la couleur de la barre de chargement à l'ouverture de l'album. Renseigner une notation hexadécimale.
En modifiant tout cela, vous pouvez changer radicalement l'apparence de votre album et lui donner un air plus personnel. Le mieux étant encore de tester, d'expérimenter.
Voilà ce que j'obtiens après personnalisation : :magicien:
C'est déjà plus esthétique, non ? Si on enlève les photos super méga laides de ma webcam, ça donne un rendu assez sympathique. ;)
Vous avez terminé votre album et vous voulez le publier sur le web ? Rien de plus simple, je m'en vais vous expliquer la méthode.
Tout d'abord, il faut savoir qu'il y a plusieurs méthodes, et que certaines sont plus simples que d'autres :
Première méthode, l'envoi sur un serveur FTP.
Cette méthode est la plus simple si vous disposez d'un serveur web, mais elle a des inconvénients.
Étape 1 : que faut-il envoyer ?
Pour que l'album soit pleinement disponible, vous devez envoyer tout le dossier simpleviewer sur votre serveur (le ficher readme est inutile, vous n'êtes pas obligé de l'envoyer). Par exemple, envoyez le dans à la racine "www" de votre serveur web.
Étape 2 : comment afficher votre album.
Pour afficher votre album, il vous suffit simplement de créer un lien vers la page "index.html". le fichier xml contenu dans le dossier fera le reste. ;) Par exemple, dans le cas précédent, le ficher se trouve à l'adresse "http://mondomaine.fr/simpleviewer/index.html".
Avantages/inconvénients
Avantages
Inconvénients
Accessible depuis n'importe quel ordinateur...
Donc accessible par n'importe qui.
Permet de mettre les dossiers à différents emplacements sur le serveur.
Par défaut inaccessible hors connexion.
Simple à mettre à jour.
Nécessite un serveur web.
Deuxième méthode : l'envoi par fichier compressé.
Plus simple si vous n'avez pas de serveur web, mais moins pratique pour le visionnnage.
Étape 1 : Compresser votre dossier.
Tout d'abord, commencez par sélectionner votre dossier simpleviewer, puis compressez-le avec winrar ou winzip. Ouvrez l'archive et vérifiez que tout vos fichiers ont été correctement compressés (deux précautions valent mieux qu'une ;) ).
Étape 2 : uploader votre fichier compressé.
Il vous faut maintenant envoyer votre fichier compressé sur le web. Vous pouvez utiliser une plate-forme d'upload de fichiers comme Megaupload. Envoyez le fichier et copiez le lien de téléchargement vers le fichier. Ensuite, envoyez le à vos amis ! :soleil:
Avantages/inconvénients
Avantages
Inconvénients
Accessible hors ligne une fois téléchargé et décompressé.
Moins simple à mettre à jour.
Moins accessible par des personnes indésirables.
Ne permet pas de placer les dossiers "images" et "thumbs" où vous voulez.
À vous de faire la part des choses entre ces deux méthodes. Voulez-vous créer un album de famille pour un usage plus privé ou créer un album facilement accessible pour faire connaître votre groupe de musique ?
Voilà, vous savez maintenant envoyer votre album sur le web ! :magicien:
J'espère vous avoir permis de réaliser ce que vous vouliez et n'oubliez pas que si vous avez des questions, vous pouvez me les envoyer par MP. ;)
Merci à Coyote et à Carma001 pour leur travail de validation et leurs commentaires précis.
