Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

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:





MattiaDes
Moderattivo
Moderattivo

Sesso : Maschile
Età : 20
Messaggi : 2334
Località : Modena, Italy


Vedere 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

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum