Créer un diaporama (images défilantes)

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Tutoriel Créer un diaporama (images défilantes)

Message par Shadow Mar 24 Mar 2015 - 16:05

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.

Créer un diaporama (images défilantes) 15-07-10

Présentation du formulaire


Après avoir cliqué sur le bouton Accéder au formulaire, vous devriez arriver sur la page ci-dessous :

Créer un diaporama (images défilantes) 15-07-12

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.

    1. Durée d'affichage d'une diapo : Définit la durée pendant laquelle une diapositive est affichée en millisecondes ;

    2. 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).

    1. Hauteur : Définit la hauteur des images ;

    2. 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...).

    1. Couleur de fond : Définit la couleur de fond du diaporama ;

    2. 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 :

  1. Lien : C'est le lien vers lequel on est redirigé lors du clic sur l'image ;

  2. Lien de l'image : C'est l'adresse de l'image (se finit couramment en .jpg, .png) ;

  3. 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.

Créer un diaporama (images défilantes) 15-07-15

  1. Supprimer la diapo : Supprime la dernière diapo créée ;

  2. Ajouter la diapo : Enregistre la diapo et permet d'en ajouter une suivante ;

  3. 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.

Panneau d'administration  Affichage  Page d'accueil - Généralités

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des pages HTML

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.

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des pages HTML

  1. Créer une page HTML (en mode avancé) ;

  2. Titre de la page : Formulaire diaporama ;

  3. Voulez-vous utiliser le haut et le bas de page de votre forum ? : Non ;

  4. Utiliser cette page en tant que page d'accueil ? : Non.

  5. Ouvrir le fichier slide show generator.html (qui se trouve ici) et copier le contenu ;

  6. Puis coller le contenu dans le contenu de la page.


N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Shadow

Shadow
Modéractive
Modéractive

Féminin
Messages : 24353
Inscrit(e) le : 30/03/2007

Voir le profil de l'utilisateur
Shadow a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum