Ajouter une bannière - Version mobile !

[adrien_69]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.passionlachasse.com

Description du problème

Bonjour,

J'aimerais ajouter une bannière UNIQUEMENT sur la version mobile de mon forum, mais je ne sais pas du tout comment m'y prendre, java script, version mobile ?

Voilà où j'aimerais qu'elle soit :



Et donc que ça ressemble à cela par exemple :



Merci de votre aide !

Cordialement, Adrien.

[MlleAlys]

Bonjour,
Essayez ainsi :
Dans modules > html et javascript > gestion des codes javascript :
- vérifiez que la gestion des codes est cochée sur OUI
- créez un nouveau code
- donnez lui un nom ("bannière version mobile" par exemple)
- cochez sur toutes les pages
- dans la zone de saisie, copiez/collez le code suivant :

Code:

$(function(){
  $('#mpage-body #top>div[style="padding-top:33px;"]').prepend('<a id="m-bann" href="ADRESSE DU LIEN"><img src="URL DE L'IMAGE" /></a> ');
});

- remplacez ADRESSE DU LIEN et URL DE L'IMAGE par ceux du lien et de l'image voulue
- enregistrez

- dans affichage > couleurs > onglet feuille de style css, ajoutez le code suivant :

Code:

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

- enregistrez

[adrien_69]

C'est parfait, ça fonctionne correctement. Concernant la bannière qu'elle serait la taille idéale ?

Merci pour tout !

[adrien_69]

Pour la taille, j'ai trouvé un bon compromis, c'est bon !

Pour le code :

Code:

$(function(){
  $('#mpage-body #top>div[style="padding-top:33px;"]').prepend('<a id="m-bann" href="ADRESSE DU LIEN"><img src="URL DE L'IMAGE" /></a> ');
});


Si j'ai plusieurs bannières et que j'aimerais qu'elle s'affiche aléatoirement, est ce possible ? merci !

[MlleAlys]

Normalement avec le code css donné, la bannière ne devrait jamais être plus large que le reste du forum ^^

Pour l'aléatoire, remplacez le code javascript précédent par le suivant :

Code:

$(function(){
 
  var a = ["URL IMAGE 1", "URL IMAGE 2", "URL IMAGE 3"];

  $('#mpage-body #top>div[style="padding-top:33px;"]').prepend('<a id="m-bann" href="/"><img src="' + a[Math.floor(Math.random() * a.length)] + '" /></a> ');

});

Remplacez URL IMAGE 1, URL IMAGE 2, URL IMAGE 3 par les url de vos bannières.
Vous pouvez bien sûr en ajouter à la suite, sans oublier de les séparer par une virgule et de les mettre entre guillemets ^^

[adrien_69]

Parfait !

Merci beaucoup...