Bannières aléatoires sous modernbb

[Melodiam]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://funkytown-bakemono.forumactif.com

Description du problème

Bonjour !

J'aimerais savoir s'il est possible de mettre plusieurs images pour la bannière, qui changeraient selon la page etc.

J'avais trouvé un code via ce sujet : cliquez

Or il ne fonctionne pas...

MERCI BEAUCOUP!

[Melodiam]

Up !

[MasDan]

Bonjour Melodiam,

Essayer ce javascript (placement sur toutes les pages).

Code:

"use strict";
/*---------------------*
 | Forum    | Version |
 |-----------|---------|
 | phpBB2    |    0    |
 | phpBB3    |    1    |
 | punBB    |    2    |
 | Invision  |    3    |
 | ModernBB  |    4    |
 | AwesomeBB |    5    |
 *---------------------*/
let version = 4;
let tabImg = new Array(" url image 1 ",
                      " url image 2 ",
                      " url image 3 ",
                      " url dernière image");
$(function() {
  switch(version) {
    case 0:
      $("#i_logo").attr("src", tabImg[ Math.floor(Math.random() * tabImg.length) ]);
      break;
    case 1:
    case 3:
      $("#logo img").attr("src", tabImg[ Math.floor(Math.random() * tabImg.length) ]);   
      break;
    case 2:
      $("#pun-logo img").attr("src", tabImg[ Math.floor(Math.random() * tabImg.length) ]);
      break;
    case 4:
      $(".headerbar").css("background-image", "url(" + tabImg[ Math.floor(Math.random() * tabImg.length) ] + ")"); 
      break;
    case 5:
      $("#header-banner").css("background-image", "url(" + tabImg[ Math.floor(Math.random() * tabImg.length) ] + ")"); 
      break;
  }
});

Il ne manque que l'ajout de vos images (lignes 13 à 16).

Idéalement, supprimer l'image à votre PA. (Évite de voir apparaître l'image à votre PA le temps que le JS soit exécuté).

[Melodiam]

Bonjour !!!


Merci pour le code - il fonctionne, les images sont bien aléatoires, en revanche elles se répètent : https://i.goopics.net/28WlK.png et ne s'affichent pas entièrement - enfin elles sont à moitié rongées ahah

Faut-il un css pour régler cela ?

merci encore !

[MasDan]

Bonjour Melodiam,

Voici une nouvelle version pour éviter d'afficher consécutivement deux fois la même image.

Code:

"use strict";
/*---------------------*
 | Forum    | Version |
 |-----------|---------|
 | phpBB2    |    0    |
 | phpBB3    |    1    |
 | punBB    |    2    |
 | Invision  |    3    |
 | ModernBB  |    4    |
 | AwesomeBB |    5    |
 *---------------------*/
let version = 4;
let tabImg = new Array(" url image 1 ",
                      " url image 2 ",
                      " url image 3 ",
                      " url dernière image");
let img = sessionStorage.getItem("urlImg");
let neoImg = "";
do{
  neoImg = tabImg[Math.floor(Math.random() * tabImg.length)];
} while (img == neoImg);
sessionStorage.setItem("urlImg", neoImg);

$(function() {
  switch(version) {
    case 0:
      $("#i_logo").attr("src", neoImg);
      break;
    case 1:
    case 3:
      $("#logo img").attr("src", neoImg);   
      break;
    case 2:
      $("#pun-logo img").attr("src", neoImg);
      break;
    case 4:
      $(".headerbar").css("background-image", "url(" + neoImg + ")"); 
      break;
    case 5:
      $("#header-banner").css("background-image", "url(" + neoImg + ")"); 
      break;
  }
});

1) Ajouter les liens de vos images aux lignes 13 à 16.
2) Remplacer à la ligne 37 .headerbar par a#logo (raison: template modifié).

Bien que remarqué, j'ai oublié d'indiquer la modification (réf #2) pour cause de template modifié. Désolé de l'oubli.

[Melodiam]

MERCI BEAUCOUP !!!
C'est top