Intégrer PicLens à votre site Web


Article paru dans SVM n°269, avril 2008 Texte : Thomas Cherrier

Ce mois-ci, nous allons utiliser le module PicLens pour enrichir votre site Web ou votre blog personnel. PicLens permet d’insérer de magnifiques diaporamas au sein de vos pages et, ainsi, les embellit encore un peu plus.

1 Installer PicLens

PicLens, développé par Google, n’était au départ qu’une simple extension destinée au navigateur Firefox qui permettait de diffuser des diaporamas. Depuis, ce module a été développé pour d’autres navigateurs tels qu’Internet Explorer, Safari, etc. Et il peut désormais s’appliquer aussi à un support en ligne, de manière à faire défiler des clichés sur son espace de la Toile.
Seul bémol : l’application est en anglais.


Attention ! Avant de vous tourner vers PicLens, vérifiez bien que, sur votre ordinateur (tournant sous Windows 2000, XP ou Vista) vous êtes équipé du .net framework 2.0. Kèsaco ? Un moteur de développement de Microsoft, disponible gratuitement en téléchargement sur le site Windows Update en tant qu’installation facultative. Mais il est fort possible que cette application soit déjà présente sur votre machine, notamment par le biais de votre carte graphique.
Une fois ce point vérifié, nous pouvons installer PicLens. Rendez-vous sans plus attendre sur le site www.piclens.com pour le télécharger : prenez garde de ne pas télécharger le plug-in pour navigateur. Nous, c’est l’application qui génère des diaporamas en ligne qui nous intéresse. Pour éviter de vous perdre, l’adresse directe est www.piclens.com/lite/publisher-win.php.
Cliquez sur Download pour télécharger l’installeur (il “pèse” 2,5 Mo) et suivez la procédure d’installation, somme toute très simple.

2 Préparer les photos

Lancez l’application PicLens Publisher en double-cliquant sur l’icône du même nom. Première étape, cliquez sur Select Folder afin de sélectionner le dossier où sont enregistrées les photos à mettre en ligne, puis cliquez sur Next. Ensuite, vous pouvez éventuellement décocher des photos du dossier et/ou cliquer sur Add files pour ajouter un autre dossier. Cela fait, cliquez sur Next. Enfin, sélectionnez ou créez un dossier où PicLens déposera les fichiers générés pour le diaporama (images, vignettes, Javascript, Flash et HTML). Il ne vous reste plus qu’à cliquer sur Next. Ouvrez maintenant le dossier de destination, vous y trouverez un fichier nommé Gallery.html.
Un simple double clic ouvre le diaporama sur votre poste. Tout est prêt pour être mis en ligne.

3 Mise en ligne

À l’aide de votre habituel logiciel de publication FTP (comme d’habitude, nous vous recommandons l’excellent FileZilla, www.filezilla.fr), connectez-vous sur votre hébergement et envoyez le dossier généré. Dans ce cas précis, votre diaporama est consultable sur ce modèle : http://monsite.com/mondossier/gallery.html.
N’hésitez pas à renommer votre fichier gallery.html en index.html, votre diaporama s’en trouvera directement consultable sur le modèle suivant : http://monsite.com/mondossier.
Encore mieux, maintenant, nous allons insérer le diaporama dans une page Web existante. Dans l’entête ()
de la page concernée, ajoutez la ligne suivante :



Ensuite, au même endroit, insérez le lien vers le Javascript :



Enfin, faites un lien dans le body vers le diaporama sur le modèle qui suit :

clic

Vous trouverez ces codes source dans les fichiers gallery.html et instructions.html