Bannière défilante sur la version mobile ?

[p_bernard]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : 30/10/2023
Lien du forum : https://vlr-delahaye.forumactif.com/

Description du problème

Bonjour à tous,

En suivant plusieurs tutos je suis arrivé à créer une bannière défilante qui donne satisfaction aux utilisateurs de la version Web du forum.

Je souhaite maintenant installer la même bannière sur la version mobile (PWA) mais les scripts trouvés ne semblent pas fonctionner en phpBB3, même pour une image fixe différente de celle du logo mobile qui figure dans la gestion des images.

J'ai supprimé/réinstallé "l'appli" sur mon smartphone et vidé mon historique mais cela ne change rien. De plus je n'arrive pas à vous mettre mon CSS et mon JS dans des blocs sur fond noir comme je le vois dans tant d'autres demandes (snif).

merci d'avance pour votre aide.

[Toryudo]

Bonjour !
Il faut mettre le code entre les balises [code][ /code], en cliquant sur le petit bouton
Il nous faudra en effet le code pour essayer de l'adapter, afin de voir s'il peut fonctionner sur la version mobile.

[p_bernard]

Bonjour Toryudo,

Merci beaucoup pour cette astuce. Voici donc mon CSS dans lequel seule la 2ème partie a été ajoutée pour limiter la largeur de la bannière mobile:

Code:

div#fa_search {display:none!important;}
    a.mainmenu[href="/search"] {
    display: none !important; }

#m-bann img {
  display: block;
  max-width: 100%;
  margin: auto;
}

et le JS copié sur ce forum pour créer à terme une bannière mobile :

Code:

(function(){
  $('#mpage-body #top>div[style="padding-top:33px;"]').prepend('<a id="m-bann"><img src="https://i.servimg.com/u/f19/20/13/18/09/2023-139.jpg" /></a> ');
});

Bonne journée à tous,
Philippe

[Toryudo]

Bonjour !

Alors, pour l'image sur version mobile, ce n'est pas très pratique à cause du CSS de base.
Je dirais que le plus simple, c'est de remplacer l'image déjà présente, un peu comme ceci :

Code:

(function(){
  $('#mpage-body-modern .forum-header-content img').attr('src', 'https://i.servimg.com/u/f19/20/13/18/09/2023-139.jpg');
});

A priori, vous n'avez pas besoin de mettre du CSS supplémentaire, je vois que la taille de l'image est déjà limitée en largeur par défaut. Est-ce que ça vous convient comme ça ?

[p_bernard]

Bonjour Toryudo,
Bonjour à tous,

Merci pour le script transmis mardi soir et que j'ai recopié dans un nouveau JS "bannière mobile".
Comme cela ne changeait pas l'image qui provient de Affichage / Images et Couleurs / Gestion des Images / Logo version mobile, et ayant sur que la MAJ sur certains systèmes pouvait parfois prendre du temps, j'ai supprimé l'appli sur mon mobile et me tablette et j'ai attendu 24 heures avant de tout réinstaller.

Le point positif après ces manips c'est que maintenant je vois bien apparaitre les couleurs flashies que j'avais mises pour la toolbar et le fond de page de démarrage  dans Module / Application mobile / PWA, et comme ce n'était pas le cas avant une MAJ a bien été prise en compte. Par compte le logo de la gestion des images n'est pas remplacé par celui du JS "bannière mobile".

A toutes fins utiles et pour le cas ou vous y trouveriez des incompatibilités, je vous remets:

mon CSS

Code:

div#fa_search {display:none!important;}
    a.mainmenu[href="/search"] {
    display: none !important; }

#m-bann img {
  display: block;
  max-width: 100%;
  margin: auto;
}

mon JS "bannière défilante" qui fonctionne parfaitement en version web

Code:

$(function() {
  var duration = 3;
  var a = [
    "https://i.servimg.com/u/f19/20/13/18/09/2023-139.jpg",
    "https://i.servimg.com/u/f19/20/13/18/09/2023-140.jpg",
    "https://i.servimg.com/u/f19/20/13/18/09/2023-141.jpg",
    "https://i.servimg.com/u/f19/20/13/18/09/2023-142.jpg",
    "https://i.servimg.com/u/f19/20/13/18/09/2023-143.jpg",
  ];
 
  b=function(){$("#pun-logo img,#i_logo,#logo img").attr("src",a[i++%a.length])};b();setInterval(b,duration*1000);
 
});

et le JS "bannière mobile" qui pour l'instant ne donne pas le résultat attendu

Code:

(function(){
  $('#mpage-body-modern .forum-header-content img').attr('src', 'https://i.servimg.com/u/f19/20/13/18/09/2023-139.jpg');
});

Merci d'avance à tous pour votre aide en vue d'arriver à une version mobile au top de mon forum.

[Toryudo]

Bonjour !

Oui, en effet, il faut "fusionner" les deux scripts pour que ça fonctionne.
Comme ceci, ça devrait aller :

Code:

    $(function() {
      var duration = 3;
      var a = [
        "https://i.servimg.com/u/f19/20/13/18/09/2023-139.jpg",
        "https://i.servimg.com/u/f19/20/13/18/09/2023-140.jpg",
        "https://i.servimg.com/u/f19/20/13/18/09/2023-141.jpg",
        "https://i.servimg.com/u/f19/20/13/18/09/2023-142.jpg",
        "https://i.servimg.com/u/f19/20/13/18/09/2023-143.jpg",
      ];
   
      b=function(){$("#pun-logo img,#i_logo,#logo img, #mpage-body-modern .forum-header-content img").attr("src",a[i++%a.length])};b();setInterval(b,duration*1000);
   
    });

[p_bernard]

Un grand merci à toi Toryudo !
Un copié / collé de ton dernier JS et ça fonctionne immédiatement.
y'a des membres de mon forum qui vont être super contents.