Afficher les images sur la version mobile

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

  • 0

Astuce Afficher les images sur la version mobile

Message par Shadow le Ven 28 Aoû 2015 - 16:56

Afficher les images sur la version mobile


Attention : depuis le 13 juin 2016, une nouvelle version mobile existe sur les forums. Ce tutoriel est inutile pour cette nouvelle version qui affiche, par défaut, les images à une taille réduite, rendant la navigation plus confortable sur mobile.


Afin de réduire le temps de chargement des pages au maximum, les images sont affichées par défaut sous forme de liens sur la version mobile des forums.

Ce tutoriel vous expliquera comment afficher les images dans les messages sans quitter la page ou basculer en version classique.



1. Installer le CSS


Un des risques d'afficher les images dans les messages sous la version mobile est que certaines images trop larges peuvent dépasser du sujet et déformer la page.

Pour prévenir cela, il est nécessaire d'ajouter ces quelques lignes de CSS à votre feuille de style. Pour cela, rendez-vous dans Panneau d'administration > Affichage > Couleurs > Feuille de style CSS et ajoutez la règle suivante:

Code:
.mobile_image { max-width:99% }
#mpage-body .postbody > .content > div { overflow:hidden }

Ceci va permettre de réduire la taille des images afin qu'elles s'adaptent à la taille du message et va les empêcher de dépasser. Wink

2. Installer le Javascript


Pour afficher les images au lieu de leur lien, il est nécessaire d'installer un script. Pour cela, allez dans Panneau d'administration > Module > Gestion de codes Javascript et créez un nouveau script:

Titre: Images version mobile
Placement: Sur toutes les pages
Code:
$(function() {
  var mode = 0;
  /* -- Options -- */
  // 0 : Montre toutes les images par défaut
  // 1 : Montre les images uniquement au clic
 
  if (!_userdata.page_desktop) return;
 
  var a = document.getElementsByTagName('A'), i = 0, j = a.length,
      showImage = function() {
        if (/img_link/.test(this.className)) {
          this.onclick = null;
          this.removeAttribute('class');
          this.innerHTML = '<img class="mobile_image" src="' + this.href + '" alt="' + this.innerHTML + '" />';
          return false;
        }
      };
 
  for (; i < j; i++) {
    if (/img_link/.test(a[i].className)) {
     
      switch (mode) {
        case 0 :
          a[i].removeAttribute('class');
          a[i].innerHTML = '<img class="mobile_image" src="' + a[i].href + '" alt="' + a[i].innerHTML + '" />';
          break;
         
        case 1 :
          a[i].onclick = showImage;
          break;
         
        default :
          a[i].onclick = showImage;
          break;
      }
     
    }
  }
});

2.1 Modification du script


Il est possible de faire une modification dans ce script pour la variable mode à la deuxième ligne. Cette variable peut prendre deux valeurs différentes, ce qui modifie les options d'affichage des images.

mode = 0 : C'est le mode par défaut, indiquer 0 affiche toutes les images. Ainsi, les sujets où les images apparaissaient comme des liens doivent désormais les afficher normalement.

mode = 1 : en indiquant 1 comme valeur, les images ne seront affichées qu'au clic sur le lien. Préférez cette option pour garantir un temps de chargement plus rapide du forum sous version mobile tout en laissant à vos membres la possibilité d'afficher les images dans les messages directement.



Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

Féminin
Messages : 23799
Inscrit(e) le : 30/03/2007

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.
  • 0

Astuce Re: Afficher les images sur la version mobile

Message par Walt le Jeu 25 Aoû 2016 - 13:29

Attention : depuis le 13 juin 2016, une nouvelle version mobile existe sur les forums. Ce tutoriel est inutile pour cette nouvelle version qui affiche, par défaut, les images à une taille réduite, rendant la navigation plus confortable sur mobile.

Walt
Modéractif
Modéractif

Masculin
Messages : 1016
Inscrit(e) le : 08/09/2015

http://forum.forumactif.com
Walt 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