Visualizza immagini nella versione mobile


Tutorial Visualizza immagini nella versione mobile

Messaggio Da MattiaDes 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.

Visualizza immagini nella versione mobile Affich10

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 }

Modificando 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 ► Modul ► HTML & Javascript ► gestione del codice Javascript, e creiamo un nuovo codice:

  • Titolo: a tua scelta
  • Dove: negli 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:


Visualizza immagini nella versione mobile Mobile11

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

Buona giornata!  :zen:


Visualizza immagini nella versione mobile Z_user10

Visualizza immagini nella versione mobile 1300 Visualizza immagini nella versione mobile 2203 Visualizza immagini nella versione mobile 392
MattiaDes
MattiaDes
Amministratore
Amministratore

Sesso : Maschio
Età : 26
Messaggi : 5047
Località : Italy

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

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

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