$ 20.00

Tuto Diaporama xml avec préchargement et transitions avec JavaScript

$ 20.00

  • Une formation vidéo de 3h45m
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Dans ce tuto Javascript en vidéo, vous aller apprendre, pas à pas , à réaliser un diaporama compatible avec tous les navigateurs, instanciable en une ligne et entièrement paramétrable en moins de 10 lignes.

Ce diaporama adaptera sa taille aux valeurs que vous aurez spécifiées lors de son instanciation et indiquera l'état de son chargement . Il charge des photos à partir d'un fichier XML spécifié lors de son instanciation, les pré-charge et les redimensionne en respectant leur ratio d'origine puis leur affecte un descriptif également spécifié dans le fichier XML. Il centre ensuite les images dans un conteneur (une div) spécifié lors de l'instanciation et crée un système de navigation par vignettes.

Ce diaporama apparaît centré sur la page par rapport à la résolution de l'écran du client et est doté d'une transition alpha entre ses images.

Un système de vignettes est créé pour permettre à l'utilisateur de naviguer manuellement dans le diaporama, et un bouton permettant de lancer la lecture automatique.

Les fichiers sources sont fournis avec ce tuto, vous permettant de suivre plus facilement encore ce dernier.

Table des matières de cette formation JavaScript (durée : 3h45m)

    • Introduction 00:02:01
    • Création des écouteurs sur les boutons 00:01:31
    • Création de la fonction clic sur les boutons 00:07:00
    • Création des fonctions de survols 00:03:55
    • Création du bouton diaporama 00:05:07
    • Création de la fonction play pause 00:05:17
    • Création des effets de transition 00:00:32
    • Mise en place 00:07:51
    • Création d'effet de transition alpha 00:09:03
    • Centrage de la photo dans le conteneur 00:08:50
    • Paramètrages 00:03:05
    • Position fixe pour le conteneur 00:10:44
    • Ajoute des marges 00:01:45
    • Couleurs 00:03:13
    • Suppression de la cible 00:02:32
    • Création des boutons 00:09:28
    • Création des actions des vignettes 00:16:02
    • Disposition des vignettes 00:25:30
    • Mise en place 00:06:30
    • Création du fichier XML 00:04:47
    • Charger les données 00:07:58
    • Création et préchargement des images 00:06:41
    • Mise à l'échelle des images 00:08:21
    • Création des vignettes 00:02:54
    • Création des effets 00:05:54
    • Création des écouteurs sur les vignettes 00:04:56
    • Préparation du calque cible 00:08:15
    • Positionnement de l'image 00:10:24
    • Message de chargement 00:13:03
    • Création du système de diaporama 00:12:04
    • Création du système de navigation 00:00:19
    • Création du conteneur de fond 00:09:01
    • Conclusion 00:00:41



Formateur : Joe Charier

Joe Charier a publié 13 tutoriels et obtenu une note moyenne de 2,6/5 sur 310 tutoriels vendus. Voir les autres formations de Joe Charier

accédez à plus de 1559 tuto gratuits


non, je ne veux pas me former gratuitement