Bonjour,
Disponibilité de ZwiiCMS 10.6.03.
La dernière de version de la branche 10.6 de ZwiiCMS est publiée.
L'équipe de dév,
Sylvain et Fred.

[Résolu] Bannière défilante

mulaneemulanee Messages 116Membre
30 avril modifié dans Migration du forum
Bonjour,
Il me semble me souvenir qu'un sujet existait sur l'ancien forum concernant la possibilité de faire une bannière défilante.
J'ai tenté de trouver ici et sur l'ancien forum, sans succès; est-ce que ça a existé?
Post edited by mulanee on

Réponses

  • fredfred Messages 238Administrateur
    Bonjour,
    Tu as regardé dans http://ipboard.zwiicms.fr/ ?
    The f....g boss
  • sylvainlelievresylvainlelievre Messages 110Administrateur
    Bonjour,
    La bannière défilante est du domaine des scripts js / jquery. Ils peuvent facilement être intégrés dans head.inc.html et ou body.inc.html.
    Il faudra d'ailleurs que l'on crée une catégorie sur ce forum, par exemple 'Téléchargements de scripts'.
    Pour ma part j'ai testé avec succès les scripts proposés par https://www.jlmconsultant.fr/test/defiltexte.php

    Bonne journée
    Sylvain

  • sylvainlelievresylvainlelievre Messages 110Administrateur
    oups ! le lien pour la bannière c'est plutôt https://www.jlmconsultant.fr/test/defilimg.php

  • mulaneemulanee Messages 116Membre
    30 avril modifié
    oups ! le lien pour la bannière c'est plutôt https://www.jlmconsultant.fr/test/defilimg.php

    Bonjour,
    Super, c'est exactement le comportement attendu.
    edit: Juste, je ne parviens pas à aligner la taille des images à la largeur du site (960), l'image étant toujours un peu plus petite en largeur, quels que soient les paramètres de largeur rentrés dans le script (taille image/taille fenêtre).
    Post edited by mulanee on
  • sylvainlelievresylvainlelievre Messages 110Administrateur
    @mulanee,
    Si tu as une solution satisfaisante de ce script, je pense qu'elle mériterait d'être partagée : liens démo, script(s), mode d'emploi...
    Tu peux mettre ça ici en attendant une catégorie spécifique.
    Merci
  • mulaneemulanee Messages 116Membre
    30 avril modifié
    @mulanee,
    Si tu as une solution satisfaisante de ce script, je pense qu'elle mériterait d'être partagée : liens démo, script(s), mode d'emploi...
    <div align="center">
    <div id="DivImg" style="width:960px;height:150px;border:1px solid;overflow:hidden;" >
    <div style="font-size:1px;letter-spacing:-1px;white-space:nowrap;display:inline;float:left" >
    <img src="/site/file/source/banniere/1.jpg" width="960" height="150" ><img src="/site/file/source/banniere/2.jpg" width="960" height="150" ><img src="/site/file/source/banniere/3.jpg" width="960" height="150" >
    </div>
    </div>
    </div>
    <script type="text/javascript">
    // SLIDE SHOW
    var Timer ;
    var Vitesse = 10 ;
    var Scroll = 0 ;
    var Images = document.getElementById("DivImg") ;
    function Affiche()
    {
    Scroll++ ;
    if ( Scroll == 960 ) // Largeur de l'image
    {
    Images.scrollLeft = 0 ;
    Scroll = 0 ;
    }
    Images.scrollLeft += 2 ;
    Timer = setTimeout('Affiche()', Vitesse) ;
    }
    window.onload = Affiche ;
    </script>
    • La ligne
    <div id="DivImg" style="width:960px;height:150px;border:1px solid;overflow:hidden;" >
    indique la dimension de la fenêtre  qui s'affichera (ici 960x150)
    • La ligne
    <img src="/site/file/source/banniere/1.jpg" width="960" height="150" ><img src="/site/file/source/banniere/2.jpg" width="960" height="150" ><img src="/site/file/source/banniere/3.jpg" width="960" height="150" >
    indique les images qui défileront ainsi que leur dimension, les unes à la suite des autres
    • La ligne
    var Vitesse = 10 ;
    indique la vitesse de défilement
    • La ligne
    Images.scrollLeft += 2 ;	
    indique le nombre d'images à prendre en compte, moins 1 (valeur à 2 pour 3 images)
    • La ligne
    if ( Scroll == 960 ) // Largeur de l'image
    je ne sais pas, dans le doute c'est la la largeur de la page; je suppose que cela permet de scroller dans le cas d'images trop grandes.
    • Config du header du site:


    edit:Je n'ai pas trouvé comment enlever la ligne blanche en dessous de la bannière.

    En tous cas, merci à https://www.jlmconsultant.fr pour ce script et tous les autres :)



    Post edited by mulanee on
  • sylvainlelievresylvainlelievre Messages 110Administrateur
    Un grand merci @mulanee
    je vais créer une catégorie prochainement et tu pourras y recopier tout ça.

    Quelques points de détail :   
    if (Scroll == 960) permet de réinitialiser la position de l'image et de remettre la variable Scroll à 0.
    Images.scrollLeft +=2; réalise un décalage de l'image de 2 pixels. Ce qui influe aussi sur la vitesse de défilement de l'image.
    Pour un fonctionnement en ligne il faut indiquer dans le chemin des images ainsi
    <img src="<?php echo helper::baseUrl(false); ?>site/file/source/banniere/1.jpg" width="960" height="150" >
    Bonne soirée et encore bravo
    Sylvain




  • mulaneemulanee Messages 116Membre
    Bonjour
    Merci.
    Mais cette bannière défilante n’est pas responsive.
  • sylvainlelievresylvainlelievre Messages 110Administrateur
    Bonjour @mulanee ,
    Tu as raison, il reste du travail de mise en forme css, mais ça devrait pouvoir se faire à la manière d'une bannière réglée sur responsive cover.
    Bon dimanche
    Sylvain
  • sylvainlelievresylvainlelievre Messages 110Administrateur
    2 mai modifié
    Bonsoir @mulanee
    Peux_tu tester ces modifications (en les adaptant à tes images) ?
    <!-- Bannière défilante JLM consultants -->
    <div align="center">
    <div id="DivImg" style=" border:0px solid; overflow: hidden" >
    <div style="font-size:1px;letter-spacing:-1px;white-space:nowrap;display:inline;float:left" >
    <img src="<?php echo helper::baseUrl(false); ?>site/file/source/banniere/baie2.jpg">
    <img src="<?php echo helper::baseUrl(false); ?>site/file/source/banniere/baie1.jpg">
    <img src="<?php echo helper::baseUrl(false); ?>site/file/source/banniere/baie2.jpg">
    </div>
    </div>
    </div>
    <script type="text/javascript">

    var Timer ;
    var Vitesse = 5; // Une augmentation diminue la vitesse de défilement
    var Scroll = 0 ;
    var Images = document.getElementById("DivImg") ;
    var WidthImage = 960; // Largeur des images
    var nbImages = 3; // Nombre d'images au minimum 2

    // Dimensionnement de la bannière en fonction du client
    $.DivImg = function(){
    if(document.body.clientWidth < WidthImage ){
    $("#DivImg").css('width', '100%');
    }
    else{
      $("#DivImg").css('width', WidthImage+'px');
    }};
    $(window).resize(function(){
        $.DivImg();
    });

    function Affiche()
    {
    Scroll++ ;
        if ( Scroll == (nbImages-1)*WidthImage ) // Largeur de l'image
        {
        Images.scrollLeft = 0 ;
        Scroll = 0 ;
        }
    Images.scrollLeft += 1;   
    Timer = setTimeout('Affiche()', Vitesse) ;
    }
    window.onload = Affiche ;
    </script>
    <!-- fin bannière défilante -->
    Bonne soirée
    Sylvain


    Post edited by sylvainlelievre on
  • mulaneemulanee Messages 116Membre
    2 mai modifié

    Peux_tu tester ces modifications (en les adaptant à tes images) ?

    Sylvain


    Bonsoir,
    Ca a l'air parfait B)
    Encore un succès de @sylvainlelievre
    Autre exemple ici http://bouvier.atspace.eu

  • mulaneemulanee Messages 116Membre
    fred a dit :
    Bonjour,
    Tu as regardé dans http://ipboard.zwiicms.fr/ ?
    Bonjour, l'adresse est devenue introuvable
  • fredfred Messages 238Administrateur
    Depuis l'URL a changé, il faut regarder dans forum.zwiicms.com, ipboard est désormais hébergé chez moi.
    Attention il ne sera pas possible de se connecter.
     

    The f....g boss
  • sylvainlelievresylvainlelievre Messages 110Administrateur
    26 mai modifié
    Bonjour Mulanee
    Voici en PJ une version plus aboutie avec des réglages supplémentaires.
    Il est possible de déclarer des pages qui seront en bannière fixe et de placer des espaces avant et après la bannière. Le défilement est plus fluide.
    Il y a un fichier install (il faut supprimer le code correspondant à la précédente bannière).
    Les réglages sont à faire dans head.inc.html ET custom.css
    Bons tests
    Cordialement
    Sylvain
    Post edited by sylvainlelievre on
  • sylvainlelievresylvainlelievre Messages 110Administrateur
    Bonjour Mulanee,
    J'ai modifié le message précédent et mis une nouvelle version.
    A plus
    Sylvain
  • mulaneemulanee Messages 116Membre
    26 mai modifié
    C'est super!!
    Une remarque, il peut y avoir confusion/amalgame entre la bannière défilante et le texte défilant "breaking news" dans les commentaires de la partie CSS, si les deux sont présents.
    Je ne suis pas passé par l'install.php, j'ai fait des copier/coller.
    edit:pour la bannière défilante, ça serait super aussi d'avoir le choix "bannière cliquable" pour revenir à l'accueil, comme pour la version bannière fixe
  • sylvainlelievresylvainlelievre Messages 110Administrateur
    edit:pour la bannière défilante, ça serait super aussi d'avoir le choix "bannière cliquable" pour revenir à l'accueil, comme pour la version bannière fixe
          <!-- Renseigner ici les images de la bannière défilante, la première sera utilisée sur les pages en bannière fixe -->
          <a href="<?php echo helper::baseUrl(false); ?>"><img src="<?php echo helper::baseUrl(false); ?>site/file/source/banniere/defaut1.jpg"></a>
    Il suffit d'ajouter les parties
    <a href="<?php echo helper::baseUrl(false); ?>">
    et
    </a>
    à chaque ligne <img....>
    Bons tests
    Sylvain


  • mulaneemulanee Messages 116Membre
    Il suffit d'ajouter les parties
    Excellent!

Connectez-vous ou Inscrivez-vous pour répondre.