Créer un diaporama (images défilantes)

[Shadow]

Créer un diaporama (images défilantes)

Cette astuce vous explique comment créer facilement un diaporama d'images (images défilantes - slide show) à l'aide d'un formulaire. Présentation du formulaire Après avoir cliqué sur le bouton Accéder au formulaire, vous devriez arriver sur la page ci-dessous : La première partie explique comment le remplir et la deuxième partie contient les champs à renseigner afin de créer un diaporama personnalisé. Les explications suivantes vous permettront de compléter facilement le formulaire pour créer le diaporama que vous souhaitez. Comment remplir le formulaire ? Le formulaire offre différents paramètres pour la présentation des images ou leur défilement. Si les instructions sur la page du formulaire ou les infobulles n'étaient pas assez détaillées, voici des explications sur comment remplir correctement le formulaire. Configuration générale Il y a 6 champs à paramétrer, divisés dans 3 groupes: paramètres de défilement, paramètres de taille, paramètres de couleurs. Voir illustration : Paramètres de défilement : Les paramètres sont définis en millisecondes. Une milliseconde est un millième de seconde. Ainsi 1000 millisecondes (ms) = 1 seconde. Durée d'affichage d'une diapo : Définit la durée pendant laquelle une diapositive est affichée en millisecondes ; Durée de l'effet de transition : Définit la durée de l'effet de transition (ici fondu) en millisecondes. Paramètres de taille :Ils permettent de définir la taille des images du diaporama. La taille est à indiquer en pixel (px). Hauteur : Définit la hauteur des images ; Largeur : Définit la largeur des images. Paramètres de couleur : Ils définissent la couleur de fond et des bordures du diaporama. Les couleurs sont à définir à l'aide de codes hexadécimaux (#FFF) ou en indiquant le nom des couleurs (black, blue...). Couleur de fond : Définit la couleur de fond du diaporama ; Couleur de la bordure : Définit la couleur de la bordure. Pour les codes couleurs, vous pouvez consulter le tutoriel : Nomination & Couleurs. Configuration des diapos Pour chaque diapositive, trois champs, dont un obligatoire sont disponibles: lien, lien de l'image, titre de l'image. Voir illustration : Lien : C'est le lien vers lequel on est redirigé lors du clic sur l'image ; Lien de l'image : C'est l'adresse de l'image (se finit couramment en .jpg, .png) ; Titre de l'image : C'est une brève description de l'image (exemple: Thème HitSkin Harry Potter). Les boutons du formulaire Une fois les informations remplies, trois boutons sont affichés. Supprimer la diapo : Supprime la dernière diapo créée ; Ajouter la diapo : Enregistre la diapo et permet d'en ajouter une suivante ; Générer le code : Une fois terminé le code peut être généré pour être collé sur le forum. Le code généré Une fois le code généré, il est possible de le copier sur son forum. Voir illustration : Il est également possible de prévisualiser le diaporama pour modifier avant copie du code. Enfin, en copiant une code dans le champ vierge, il est possible de le modifier en cliquant sur éditer le code. Où placer le code du diaporama? Le code du diaporama peut être placé n'importe où le HTML est accepté, par exemple dans une page HTML, un message de page d'accueil ou un widget. Citation : Panneau d'administration  Affichage  Page d'accueil - Généralités Citation : Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des pages HTML Citation : Panneau d'administration  Modules  Portail & Widgets - Gestion des widgets du forum Comment installer le formulaire sur mon forum ? Le formulaire est libre de droit et vous pouvez utiliser son code ou le modifier si vous le souhaitez. Le code a été créé par Ange Tuteur du forum de support anglais et est disponible ici. Citation : Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des pages HTML Créer une page HTML (en mode avancé) ; Titre de la page : Formulaire diaporama ; Voulez-vous utiliser le haut et le bas de page de votre forum ? : Non ; Utiliser cette page en tant que page d'accueil ? : Non. Ouvrir le fichier slide show generator.html (qui se trouve ici) et copier le contenu ; Puis coller le contenu dans le contenu de la page. N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Ce tutoriel a été rédigé par Ange Tuteur et traduite par Vivi. Et actualisée par Bipo (juillet 2021). Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.