Affichage photos cotés bannière sur smartphone en version web

[Clyde_66]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : non défini
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://f6c-fan-6-club.forumactif.com/

Description du problème

Bonjour,
Nous avons installé le Javascript pour avoir une photo de chaque coté de la bannière avec le code javascript préconisé ci-dessous:

$(function(){
//LE LIEN DE L IMAGE DU GATEAU A GAUCHE HAUTEUR MAXI 177PX
var M14_CAKELEFT='https://i.servimg.com/u/f62/20/13/93/28/1500_313.png';
//LE LIEN DE L IMAGE DU GATEAU A DROITE HAUTEUR MAXI 177PX
var M14_CAKERIGHT='https://i.servimg.com/u/f62/20/13/93/28/1800_312.png';
$('img[id="i_logo"]').closest('a').before('<img src="'+M14_CAKELEFT+'"style="position:absolute;left:0px;"/>');
$('img[id="i_logo"]').closest('a').after('<img src="'+M14_CAKERIGHT+'"style="position:absolute;right:0px;"/>');
});

Sur ordinateur, c'est parfait. En revanche, sur smartphone, en mode d'affichage web, l'image de droite chevauche la bannière centrale.

Il y a t il un code à rajouter ?

Restant à votre écoute, bien cordialement.

[Clyde_66]

Apparemment, je n'avais pas sélectionné le mode code pour le javascript, le voici:

Code:

$(function(){
//LE LIEN DE L IMAGE DU GATEAU A GAUCHE HAUTEUR MAXI 177PX
var M14_CAKELEFT='https://i.servimg.com/u/f62/20/13/93/28/1500_313.png';
//LE LIEN DE L IMAGE DU GATEAU A DROITE HAUTEUR MAXI 177PX
var M14_CAKERIGHT='https://i.servimg.com/u/f62/20/13/93/28/1800_312.png';
$('img[id="i_logo"]').closest('a').before('<img src="'+M14_CAKELEFT+'"style="position:absolute;left:0px;"/>');
$('img[id="i_logo"]').closest('a').after('<img src="'+M14_CAKERIGHT+'"style="position:absolute;right:0px;"/>');
});

Avec mes excuses.

[Toryudo]

Bonjour !
J'ai modifié le script, il a l'air de fonctionner correctement sur la version PC classique, pourriez-vous vérifier s'il fonctionne également sur votre téléphone ?

Code:

//LE LIEN DE L IMAGE DU GATEAU A GAUCHE HAUTEUR MAXI 177PX
var M14_CAKELEFT = 'https://i.servimg.com/u/f62/20/13/93/28/1500_313.png';
//LE LIEN DE L IMAGE DU GATEAU A DROITE HAUTEUR MAXI 177PX
var M14_CAKERIGHT = 'https://i.servimg.com/u/f62/20/13/93/28/1800_312.png';

$(function(){
   var $link = $('img[id="i_logo"]').closest('a');
   var dec_left = $link.position().left;

   var $elem_left = $('<img src="' + M14_CAKELEFT + '" alt="" style="position:absolute;left:0;margin-left:-' + dec_left + 'px;" />');
   var $elem_right = $('<img src="' + M14_CAKERIGHT + '" alt="" style="position:absolute;right:0;margin-right:-' + dec_left + 'px;" />');

   $link.css('position', 'relative').prepend($elem_left).append($elem_right);
});

L'explication est un peu complexe, mais sur téléphone, 100% du width d'une page n'est pas égal à 100% de la taille de l'écran, contrairement au PC. Du coup, right: 0 n'est pas la droite de l'écran, juste la droite du width 100%... Mais je pourrai vous faire un schéma si la technique vous intéresse.

[Clyde_66]

Bonjour,

Cela fonctionne nickel sur Iphone et Androïd.

J'ai bien compris le principe mais étant nul en codage...

Un très très grand merci pour votre réactivité et votre efficacité

Je mets le sujet en résolu.!

[Clyde_66]

Résolu.