Un diaporama simple

Voici un exemple de diaporama simple, facilement intégrable dans GuppY, que ce soit dans un billet, comme ici ou dans un article - démonstration ici ; notez la possibilité de désactiver les boîtes latérales pour profiter d'un affichage élargi le cas échéant.

Préparation des images

Réunissez une série d'images, ayant la même extension (*.gif, *.jpg, *.png... ) et, de préférence, des dimensions identiques. (Notez toutefois que le diaporama fonctionnera même si vos images sont de tailles variées). Nommez les images avec un même radical suivi d'un chiffre incrémenté de 1 à partir de 1, comme ceci : test1.jpg, test2.jpg, test3.jpg, etc. Enfin envoyez-les par FTP dans le dossier img/ de GuppY.

Le code à insérer

Non seulement le code à insérer est court, mais en plus, il est propre et valide ! Copiez-collez le code suivant à l'endroit où vous voulez voir le diaporama :

<script type="text/javascript">idimg=1;total=3;function diapo(imgsuiv){idimg=idimg + imgsuiv;if(idimg > total){idimg = 1;} if(idimg == 0){idimg = total;};document.photo.src="img/test" + idimg + ".jpg";}</script>
<div align="center"><form name="form5" method="post" action="_self" id="form5"><img src="img/test1.jpg" id="photo" name="photo" alt="Photo" style="padding: 10px; border: 1px outset; margin: 10px;" />
« <a href="javascript:diapo(-1)" title="Précédent">Précédent</a> | <a href="javascript:diapo(1)" title="Suivant">Suivant</a> »</form></div>

Attention ! Vous ne pourrez insérer ce code dans GuppY qu'avec le mini-éditeur natif (le textarea en mode source), car les autres éditeurs ne le digéreront pas. J'ai surligné les valeurs à personnaliser :

3 : indiquez le nombre total de photos composant le diaporama
test : indiquez le nom-radical de vos images
jpg : indiquez l'extension de vos images
test1.jpg : indiquez le nom de la première image du diaporama
padding: 10px; border: 1px outset; margin: 10px : modifiez le style des cadres des images à votre guise

Pour faciliter ce paramétrage, je prépare actuellement un générateur ; il produira un code personnalisé prêt à l'emploi.

Saute-Mouton - http://realia.free.fr/sautemouton_avril/newsprt.php?lng=fr&pg=2111 - [Version PDF]