Avatarul postatorului la "Ultimele mesaje"

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Avatarul postatorului la "Ultimele mesaje"

Mesaj Scris de Cassius Dio la data de Mar 6 Aug - 13:08

Avatar la ultimul postator

Bun gasit, La revedere

1. Introducere:

Idee Cu ajutorul acestui tutorial puteti adauga la casuta "Ultimele mesaje" avatarul ultimului postator. Acest avatar va fi afisat la fiecare forum in parte, in functie de ultimul utilizator care a raspuns. Tutorialul functioneaza pentru orice versiune de forum.

2. Codurile JavaScript:

Pentru inceput vizitati:
Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript
Faceti click pe butonul Creati un nou cod JavaScript.

Completati rubricile astfel:

  • Titlu: Avatar la ultimul postator
  • Amplasare: Indexul forumului
  • Cod Javascript: Adaugati codul de mai jos...

Cod:
$(function(){
 
    if(!window.localStorage) return;
 
    // Avatar par défaut
    var default_avatar= 'http://illiweb.com/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. Codurile CSS:

Acum trebuie sa vizitati:
Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS
Adaugati urmatorul cod:
Cod:
.mini_ava {
  float: left;
}
.mini_ava img {
  width: 40px;
  height: 40px;
  margin: 0 5px;
  border-radius: 10px;
  transition: all 1s;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
}
.mini_ava img:hover
{
  zoom: 130%;
}
Faceti click pe butonul Valideaza pentru a salva modificarile.

Felicitari! Noroc

Tutorial scris de Celina, optimizat de Ea si tradus de Tecko

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Multumiri : 82
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum