Bannière défilante type diaporama

augrasaugras Messages 431Moderateur
juillet 2021 modifié dans Scripts amis de Zwii
C'est une variante de la Bannière défilante réalisée par @sylvainlelievre et @mulanee,
https://forum.zwiicms.com/discussion/159/banniere-defilante#latest
qui a un effet diaporama plutôt que défilement, avec fading au passage d'une image à l'autre : c'est une simple modification du css initial.
Les fonctionnalités sont exactement les mêmes et les modalités d'utilisation aussi.
Vous pouvez vous rendre compte du rendu là : https://augras.eu/ZwiiCMS.

Les caractéristiques du script initial sont toutes conservées.
Il modifie uniquement les 2 fichiers personnalisables head.inc.html et custom.css en y ajoutant les scripts, la bannière défilante continuera de fonctionner après une mise à jour de ZwiiCMS.

Principales fonctionnalités
  • Bannière défilante ou fixe sur des pages déclarées,
  • Paramétrage du nombre d'images constituant la bannière, de leur largeur,
  • Réglages de l'animation, vitesse, sens, etc...
  • Installation automatique

Installation
    1. Décompresser l'archive,
    2. placer vos images dans le dossier bannieredefilante_diaporama/images ( ou utiliser les images par défaut ),
    3. transférer le dossier bannieredefilante_diaporama à la racine de votre site comme les dossiers core, module ou site,
    4. dans un navigateur saisissez l'adresse complète : votre_site/bannieredefilante_diaporama/install.php  ,
    5. plus de précisions  dans le fichier install.php.

    Paramétrages

    https://youtu.be/6mQ-KHzZt9Y
    c'est la vidéo initialement réalisée par @sylvainlelievre

    Par rapport à la bannière initiale il y a des paramètres supplémentaires et différents sur lesquels vous pouvez vouloir intervenir :

    animation:fading 13s infinite;
    Les 13s de l'animation résultent de la durée de l'animation indiquée dans le code ci-dessous, 260s, divisée par le nombre d'images, ce qui ici donne : 260/20=13
    Si vous intervenez sur la durée ci-dessous il faudra obligatoirement adapter cette valeur également en appliquant la formule ci-dessus.

    animation-duration : 260s;

    C'est le code ci-dessous qui donne l'effet diaporama plutôt que défilement en continu.
    animation-timing-function: steps(20, jump-none);
    Le chiffre 20 correspond au nombre d'images par défaut : vous devez le modifier en fonction du nombre d'images que vous avez.

    Tous ces paramètres sont générés automatiquement au moment de l'installation de la bannière avec comme base un affichage de 13s par image.

    Si vous voulez modifier les images et leur nombre il peut être plus simple de relancer l'installation en ayant simplement préparé votre dossier images en conséquence. Vous pouvez aussi modifier le fichier directement pour que les paramètres d'affichage d'une image soient automatiquement calculés et que vous n'ayez ainsi pas à faire les adaptations expliquées ci-dessus.

    Si vous souhaitez par exemple avoir un affichage à 10s au lieu de 13 il faut modifier les lignes 195 et 222 de install.php en conséquence.

    Merci à @sylvainlelievre pour ses judicieux conseils et cette automatisation.

    Je pense que ce fichier install.php a vocation à service de base pour l'installation des scripts dans ZwiiCMS.
    Philippe
    Post edited by augras on
    ______________________________________________________
                 Logo de la boutique bi1sur.com
             https://bi1sur.com

    Commentaires

    • Bonjour @augras ,
      Merci pour ces scripts qui viennent enrichir les fonctionnalités de Zwii !
      Cordialement
      Sylvain
    • augrasaugras Messages 431Moderateur
      Je n'ai fait qu'adapter ce que tu as fait... et en plus il y a des dysfonctionnements que tu m'as indiqués.
      Je retire ces deux zip pour le moment et reposte en ayant adapté avec ton installation totalement automatique.
      Merci @sylvainlelievre
      ______________________________________________________
                   Logo de la boutique bi1sur.com
               https://bi1sur.com
    • augrasaugras Messages 431Moderateur
      La version totomatique est là : normalement sans erreurs...
      ______________________________________________________
                   Logo de la boutique bi1sur.com
               https://bi1sur.com
    Connectez-vous ou Inscrivez-vous pour répondre.