Visualizza immagini nella versione mobile


Tutorial Visualizza immagini nella versione mobile

Messaggio Da MattiaDes il Sab 29 Ago 2015 - 15:59

Visualizza immagini nella versione mobile

Di default, le immagini nella versione mobile sono mostrati come link, per lo più per ridurre i tempi di caricamento. Al giorno d'oggi questo non dovrebbe essere troppo un problema, grazie ai progressi della tecnologia. Questo tutorial ha lo scopo di offrire 2 metodi per visualizzare le immagini nella versione mobile senza dover cambiare la pagina o l'apertura di una nuova scheda.


Aggiungere il CSS


Bene! Ora è il momento di aggiungere del CSS. Uno degli svantaggi di visualizzare le immagini all'interno dei messaggi, è il fatto che le immagini più grandi possono traboccare il post e allungare la pagina. Per evitare questo, è necessario aggiungere un po' di CSS nel foglio di stile.

Pannello di amministrazione Visualizzazione Colori "Foglio di stile CSS"


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

Grazie a max-width riusciremo ad impostare una larghezza massima, in percentuale, per le immagini nella mobile.

Aggiungere JavaScript



Ora, bisognerà aggiungere un nuovo codice javascript. Recati nella seguente pagina:

Pannello di amministrazione Moduli Gestione del codice javascript


- Titolo: Immagini Mobile;

- Posizione: Gli argomenti;

- Codice:

Codice:
$(function() {
  var mode = 0;
  /* -- Mode Options -- */
  // 0 : Mostra tutte le immagini di default
  // 1 : Mostra le immagini solo quando sono cliccate
 
  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;
      }
    
    }
  }
});

Modifiche



C'è solo una modifica che si può apportare nello script, ovvero alla variabile "mode" nella parte superiore dello script . Questa variabile assume un valore numerico che permette di scegliere come le immagini sono visualizzate. Si prega di leggere la spiegazione di seguito.

mode = 0 : La modalità di default, 0, rende tutte le immagini senza l'URL [Vedi foto]. Ora quando si visiterà un argomento contente una immagine, essa sarà visualizzata senza alcun link o scritta.

mode = 1 : Scegliete questa opzione se si vuole ancora mantenere i tempi di caricamento veloci , ma dare alla gente la possibilità di visualizzare le immagini direttamente nel messaggio. Bisognerà infatti cliccare il link [Vedi foto] per poter aprire l'immagine direttamente nel topic:


In breve, scegliete la modalità che meglio si adatta al vostro forum. Very Happy

Buona giornata!  :zen:


avatar
MattiaDes
Amminattivo
Amminattivo

Sesso : Maschile
Età : 21
Messaggi : 2930
Località : Modena, Italy


Vedi il profilo dell'utente http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum