Ajouter une bannière - Version mobile !

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Ajouter une bannière - Version mobile !

Message par adrien_69 le Jeu 16 Juil 2015 - 19:51

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.


Dernière édition par adrien_69 le Ven 17 Juil 2015 - 22:14, édité 1 fois

adrien_69
****

Masculin
Messages : 233
Inscrit(e) le : 09/02/2005

http://www.passionlachasse.com
adrien_69 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une bannière - Version mobile !

Message par MlleAlys le Ven 17 Juil 2015 - 0:15

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 ajout
- 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

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une bannière - Version mobile !

Message par adrien_69 le Ven 17 Juil 2015 - 14:57

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

Merci pour tout ! Very Happy

adrien_69
****

Masculin
Messages : 233
Inscrit(e) le : 09/02/2005

http://www.passionlachasse.com
adrien_69 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une bannière - Version mobile !

Message par adrien_69 le Ven 17 Juil 2015 - 16:20

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 !


adrien_69
****

Masculin
Messages : 233
Inscrit(e) le : 09/02/2005

http://www.passionlachasse.com
adrien_69 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une bannière - Version mobile !

Message par MlleAlys le Ven 17 Juil 2015 - 17:22

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 ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter une bannière - Version mobile !

Message par adrien_69 le Ven 17 Juil 2015 - 22:13

Parfait ! Cool

Merci beaucoup... Very Happy

adrien_69
****

Masculin
Messages : 233
Inscrit(e) le : 09/02/2005

http://www.passionlachasse.com
adrien_69 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum