Avatar dell'utente che ha postato il messaggio sull'indice del Forum

Avatar dell'utente che ha postato il messaggio sull'indice del Forum Empty Avatar dell'utente che ha postato il messaggio sull'indice del Forum

Messaggio Da Insane Mar 4 Dic 2012 - 11:47

Avatar dell'utente che ha postato il messaggio sull'indice del Forum


1- Definizione

Ecco un tutorial che vi permetterà di mostrare l'avatar dell'utente che ha postato il messaggio sull'indice del Forum, ecco un esempio:

Avatar dell'utente che ha postato il messaggio sull'indice del Forum Avatar12

2- Javascript

PDA---> Modul---i> HTML e Javascript---> codice Javascript gestione---> creare un nuovo codice Avatar dell'utente che ha postato il messaggio sull'indice del Forum 713205:

Mettere il titolo che si desidera e inserire il seguente codice:

Codice:
$(function(){
 
    if(!window.localStorage) return;
 
    // Avatar par défaut
    var default_avatar= 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
 
    // Temps de cache, ici 24 h * 60 m * 60 s * 1000 ms donc un jour
    var caching_time= 24*60*60*1000;
 
    // Temps de cache d'une erreur, ici 60 s * 1000 ms donc une minute
    var caching_error= 60*1000;
 
    var set_avatar= function(id) {
        $('.mini_ava.member'+id).html('<img src="'+get_avatar(id)+'" />');
    };
 
    var get_avatar= function(id) {
        if(localStorage.getItem('t_ava'+id) < +new Date - caching_time || (localStorage.getItem('d_ava'+id)==default_avatar && localStorage.getItem('t_ava'+id) < +new Date - caching_error))
        {
            localStorage.setItem('d_ava'+id, default_avatar);
            $.get('/u'+id, function (d){
                localStorage.setItem('t_ava'+id,+new Date);
                localStorage.setItem('d_ava'+id, $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img',d).first().attr('src')||default_avatar);
                set_avatar(id);
            });
        }
        return localStorage.getItem('d_ava'+id);
    };
 
    var to_replace= {};
 
    $('dd.lastpost strong a.gensmall, .ipbtable tr td:last-child span strong a.gensmall, .table td.tcr strong a.gensmall, .forumline .row3.over strong a.gensmall').each(function(){
        to_replace[$(this).attr('href').substr(2)]= 1;
        $(this).closest('td,dd').prepend('<div class="mini_ava member'+$(this).attr('href').substr(2)+'"></div>');
    });
 
    for(i in to_replace)
    {
        set_avatar(i);
    };
 
});

3-CSS

PDA---> visualizzazione---> immagini e colori---> CSS:

Codice:
.mini_ava {
  float: left;
}
.mini_ava img {
  width: 40px;
  height: 40px;
  margin: 0 5px;
  border-radius: 10px;
  transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
}
.mini_ava img:hover
{
  width: 80px;
  height: 80px;
}

E' possibile personalizzare questo codice cambiando (colori, bordi ...)

4-Risultato finale

Avatar dell'utente che ha postato il messaggio sull'indice del Forum Avat10

Tutoriale pubblicato da : Celina tradotto da Insane
Copyrigth © FORUMATTIVO.COM


Insane
Insane
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 32
Messaggi : 4178
Località : Varese

https://aiuto.forumattivo.it/
Insane è 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.