diminuer la taille du texte augmenter la taille du texte

Accueil · Dewslider

Dewslider un diaporama d'images en Flash
simple à utiliser

Utilisez cette animation Flash pour faire défiler des images ou photos ! Définissez une liste d'images et laissez Dewslider faire le reste. Il est possible d'indiquer un titre pour chaque photo, d'utiliser des boutons de défilement, des liens, des actions, et de préciser le temps d'affichage de chaque image. La molette de la souris permet de faire défiler les images.

Démo

Dewslider est libre d'utilisation et gratuit même dans un cadre professionnel ou commercial. Néanmoins, si vous désirez une version personnalisée pour une utilisation professionnelle, n'hésitez pas à nous contacter.

Téléchargement

Le fichier au format SWF est téléchargeable ici :


Télécharger dewslider.swf
(version 5.2)

Utilisation

Son utilisation est très simple car il suffit d'utiliser le code HTML fourni pour une animation flash, en spécifiant les noms de fichiers images à lire (de type JPG), dans le code HTML ou via un fichier XML. En précisant les fichiers en argument (ex : dewslider.swf?img=image1.jpg,image2.jpg,image3.jpg) vous ne pouvez pas indiquer de légende pour chaque image, ce n'est possible qu'avec l'emploi d'un fichier XML. De même, il est possible en XML d'indiquer des liens à cliquer pour chaque image (voir l'exemple ci-dessous avec href="..."), des targets, une action rollover, une action rollout. Par défaut, l'animation cherche un fichier dewsilder.xml dans le même répertoire, mais il est possible de préciser toute location grâce à ?xml=chemin/vers/fichier.xml.

Exemple HTML seulement

<object type="application/x-shockwave-flash" data="dewslider.swf?img=image1.jpg,image2.jpg,image3.jpg" width="500" height="300">
<param name="movie" value="dewslider.swf?img=image1.jpg,image2.jpg,image3.jpg" />
</object>

Exemple XHTML + fichier XML

Dans ce cas, tous les paramètres (options) et adresses des fichiers images sont contenus dans le fichier XML (encodage UTF-8 dans votre éditeur de texte). Attention aux chemins utilisés et à l'endroit où vous avez placé dewslider.swf.

<object type="application/x-shockwave-flash" data="dewslider.swf?xml=dewslider.xml" width="500" height="300">
<param name="movie" value="dewslider.swf?xml=dewslider.xml" />
</object>

Fichier XML :

<?xml version="1.0" ?>
  <album
    showbuttons="yes"
    showtitles="yes"
    randomstart="yes"
    timer="5"
    aligntitles="bottom"
    alignbuttons="bottom"
    transition="push"
    speed="20"
  >
  <img src="img/1.jpg" title="Titre 1" />
  <img src="img/2.jpg" title="Titre 2" href="test.html" />
  <img src="img/3.jpg" title="Titre 3" href="http://www.blup.fr/" />
  <img src="img/4.jpg" title="Titre 4" href="http://www.blup.fr/" target="_blank" rollover="alert('yay');" rollout="showdiv('pub');" />
  <img src="img/5.jpg" title="Titre 5" />
</album>

Transitions

Effets possibles :

Fade Slide Push Pop Warp Blur

Générateur de code HTML

Le plus simple est d'utiliser ce générateur de code XHTML, qui va produire deux versions à copier-coller selon vos besoins. La première étant très complète (non valide W3C), la seconde étant plus propre mais avec un fonctionnement non garanti sur des navigateurs préhistoriques. Préférez des noms de fichier sans espace ni caractère accentué.

Source 
URLs* des images
ou fichier XML (voir exemple)
  
Options 
Largeur ? px
Hauteur ? px
Transition
Vitesse transition (speed) en ms
Délai d'affichage ? (timer) en secondes, 0 = infini
Afficher les boutons ? (showbuttons)
Position en haut   en bas
Afficher les titres ? (showtitles, XML uniquement)
Position en haut   en bas
Début aléatoire ? (randomstart)
 

* chemins relatifs ou absolus : spécifiez les adresses des différents fichiers séparées par le caractère , (virgule).
Exemple : /media/images/photo1.jpg,/media/images/photo2.jpg

Options générales

A préciser en argument du fichier SWF (ex : dewslider.swf?option=valeur) dans le cas d'un non-emploi du fichier XML.

Début aléatoire : Il est possible de lancer automatiquement la lecture avec l'option randomstart et la valeur yes, true ou 1.
Exemple : dewslider.swf?img=test.jpg,test2.jpg&randomstart=1

Afficher les boutons : boutons image suivante ou précédente, avec showbuttons et la valeur 1, true ou yes.
Exemple : dewslider.swf?img=test.jpg,test2.jpg&showbuttons=1

Position des boutons : alignbuttons=top ou alignbuttons=bottom (défaut).

Durée d'affichage : grâce à l'option timer, indiquant un délai en secondes.
Exemple : dewslider.swf?img=test.jpg,test2.jpg&timer=3. Pour un délai infini, utilisez timer=0.

Transition : grâce à l'option transition, indiquant le mode de transition entre chaque image.
Exemple : dewslider.swf?img=test.jpg,test2.jpg&transition=blur. Valeurs possibles : fade (défaut), slide, push, pop, warp, blur, none (pas de transition).

Vitesse de transition : grâce à l'option speed, indiquant un délai en millisecondes.
Exemple : dewslider.swf?img=test.jpg,test2.jpg&speed=20.

Options pour chaque slide

Titre : grâce à l'option title.
Exemple : <img ... title="Légende de l'image" ... />.

Lien : grâce à l'option href.
Exemple : <img ... href="http://www.blup.fr" ... />.

Target : grâce à l'option target.
Exemple : <img ... target="_blank" ... />.

Rollover : grâce à l'option rollover.
Exemple : <img ... rollover="alert('arf');" ... />.

Rollout : grâce à l'option rollout.
Exemple : <img ... rollout="autre_fonction_js();" ... />.

Conception : Dew.