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

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:

mini avatar - 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 :

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

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