• DewSlider, un diaporama en flash.

    Vous êtes nombreux à désirer mettre un diaporama sur votre blog et pour cause, cela donne un peu de vie à vos pages.

    S'il existe plusieurs façons de les réaliser (CSS3, Javascript, Flash), certaines peuvent apparaître comme plus rapides ou plus faciles à mettre en oeuvre.

    C'est pourquoi je vous propose ce petit tuto pour réaliser votre diaporama en flash avec excellent outil d'Alsacreation qu'est Dewslider.

    Je vais vous montrer ici la façon de mettre un diaporama  réalisé avec lui sur votre blog.

    La première des choses consiste à télécharger ce fichier. C'est un fichier zip qui contient 3 fichiers et un répertoire d'images.

    Extrayez le contenu du zip dans un répertoire de votre disque dur.

    Dans votre blog, allez dans Contenu / Gérer les fichiers et cliquez sur Nouveau dossier. Donnez lui un nom (par exemple diaporama). Copiez dans ce répertoire le fichier dewslider.swf
    Dans diaporama, créez un répertoire images et placez-y les images que vous allez utiliser.

    Une fois cela fait, récupérez le chemin des images et des fichiers.

    Par exemple, sur le diaporama en exemple ici, les chemins sont:

    http://data0.eklablog.com/kcn/perso/diaporama/images/  pour les images et
    http://data0.eklablog.com/kcn/perso/diaporama/            pour les fichiers.

    Si vous ne savez pas comment trouver ce chemin, il vous suffit de retourner dans Contenu / Gérer les fichiers  et de double-cliquer sur une des images que vous avez mis dans le répertoire diaporama/images. Vous avez le chemin qui est alors indiqué dans la barre d'adresses de votre navigateur.

     

    Il faut maintenant indiquer les images que l'on va mettre, les temps et les types de transition etc.
    Cela se passe dans le fichier dewslider.xml 

    Ouvrez le avec notepad++ (ou à défaut avec le bloc notes) et vous obtenez quelque chose comme:  

    Dans ce fichier, rien de bien compliqué. Il faut avant tout mettre les bonnes images. Pour cela, vous allez remplacer les lignes <img src="..........................."/> par des lignes du type:

    <img src="http://data0.eklablog.com/kcn/perso/diaporama/images/image1.jpg" title="Ma première image" />

    Le chemin en orange étant celui des images que vous avez préalablement noté (attention celui ci-dessus est celui de mon blog !). Et vous remplacez bien entendu le nom d'image en vert par une image de votre répertoire diaporama/images.

    Si vous ne souhaitez pas de titre à vos images, vous supprimez la partie title pour obtenir (ou alors supprimer la ligne showtitles="yes"):

    <img src="http://data0.eklablog.com/kcn/perso/diaporama/images/image1.jpg"  />

    Une fois vos images définies, enregistrez le fichier puis mettez le dans le répertoire diaporama.

    Voilà, le moteur est prêt à fonctionner. Il ne reste plus qu'à mettre la clef de contact. Pour cela, à la page de votre blog ou vous voulez faire apparaître le diaporama, il vous suffit de mettre le code suivant dans la partie html.

     

    Pensez à bien remplacer les liens par ceux de votre répertoire diaporama et à fixer la largeur (width) et la hauteur (height) de votre diaporama.

    Votre diaporama est maintenant fonctionnel ! Vous pouvez modifier les options en éditant directement votre fichier dewslider.xml par Contenu / Gérer les fichiers/Editer le fichier

    Pour les différentes options (faire un lien, modifier les vitesses, changer la position des boutons etc.) je vous renvoie à la page officiele de Dewslider.

    Les textes dans le diaporama d'exemple ont été inscrits directement dans les images avec Gimp, photofiltre ou inkscape. Ce ne sont donc pas ceux offerts par dewslider.