Vegas, tutoriel de base |
Répondre |
Auteur |
Sujet Recherche Options des sujets
|
|||||
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6507 |
Sujet: Vegas, tutoriel de base Envoyé : 17 Sep 2015 à 11:52 |
|||||
Édité le 11 décembre 2015, Hobby001 Édité le 15 décembre 2015 pour les particularités de renommage de fichiers aux étapes 3e et 8b, Hobby001 Édité le 06 février 2016, ajout de mises en évidence en bleu, Hobby001 Édité le 05 mai 2017, mise è jour en fonction de Vegas 2.4.0, Hobby001 Édité le 27 avril 2020, ajout de l'option III Les mises en évidence en rouge indiquent les endroits des erreurs les plus courantes. Tuto de base pour implanter le carrousel Vegas 2.4.0 en plein écran Étapes d'installation 1. Téléchargez le fichier fournis pour le module Vegas sur le site de l'auteur Extrayez tous les fichiers ainsi que le répertoire "overlays" et son contenu 2. Ajoutez les fichiers du module dans votre projet
3. Ouvrez votre projet OE 4. Choisissez les images de fond que vous voulez utiliser et importez les dans la bibliothèque d'images du projet. a. Explorateur de site b. Ressources c. Images d. Ajouter des fichiers Pour cet exercice, j’ai choisi des images nommées : Fond01.jpg (voir la note qui suit) Fond02.png Fond03.png Fond04.png Fond05.png Note: Attention à la casse, si le fichier s'appelle fond01.JPG ou Fond01.Jpg, la casse doit être respectée en tout temps 5. Créez une nouvelle page 6. Passez-la en mode "responsive" plein écran 7. Insérer un panneau d'éléments a. Changez l’ID du panneau pour : WEVEGAS b. coordonnées 0,0 c. mode "relative" d. largeur réglée à 100% e. assignez-lui la classe: vegas 8. Code HTML a. Créez un bloc de code source HTML en position Header b. Insérez le code suivant :
9. Code CSS a. Créez un bloc de code source CSS en position Header b. Insérez le code suivant :
10. Code Javascript a. Céez un bloc de code source Javascript en position EndBody b. Insérez le code suivant :
===================================================================================================== Option I, élément déclencheur d'arrrêt-départ de Vegas par un click dans la fenêtre du fureteur.
===================================================================================================== Option II, bloc de texte utilisé comme élément déclencheur d'arrêt-départ de Vegas
===================================================================================================== Option III, boutons suivant et précédant
Créez vos flèches et remplacez les id dans ce code ===================================================================================================== Au moment de la mise en ligne finale, les fichiers photo sélectionnés n'étant pas inclus dans un élément d'openElement, ils ne seront pas mis en ligne automatiquement. Vous devrez les ajouter manuellement de la façon suivante: Onglet Projet Explorateur de projet, Ressources ou icone Ressources (coffre doré) Onglet Images sélectionnez les images à transférer click sur 6e icône du menu (flèche verte vers le haut) pour transférer vers le serveur Edité par Hobby001 - 28 Avr 2020 à 01:55 |
||||||
ridp
Senior Member Depuis le: 18 Nov 2007 Pays: France Status: Inactif Points: 286 |
Envoyé : 26 Sep 2015 à 23:26 | |||||
Bonsoir,
je ne vois pas comment on peut faire pour ralentir le diaporama. merci |
||||||
xplorer
Senior Member Depuis le: 04 Sep 2015 Status: Inactif Points: 241 |
Envoyé : 27 Sep 2015 à 00:09 | |||||
C'est pas trop dur à trouver, c'est de mémoire soit directement dans le code soit dans les propriétés que tu gères les milisecondes. Edit : dans le code, tu vois 12 000 et 15 000 ? c'est ça. Regardes aussi sur le site de Vegas, il y a des codes pour différentes animations etc .. c'est là que j'ai dû trouver certains éléments je crois. // implantation de vegas $('#WEVEGAS').vegas( { slides: [ { src: 'Files/Image/Fond01.jpg' }, { src: 'Files/Image/Fond02.jpg' }, { src: 'Files/Image/Fond03.jpg' }, ], animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ], animationDuration: '12000', transitionDuration: '15000' } ); // déclencheur: arrêt-départ au click dans le fonc de l'écran $(XBody).click( function(){ if ($('#WEVEGAS').vegas('playing')){ $('#WEVEGAS').vegas('pause'); }else{ $('#WEVEGAS').vegas('play'); } } );
Edité par xplorer - 27 Sep 2015 à 00:37 |
||||||
Répondre | |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |