Avatar no widget últimos assuntos

Ir para baixo

Tutorial Avatar no widget últimos assuntos

Mensagem por Shek 11.07.14 20:59


tutorial - Avatar no widget últimos assuntos Grpes_et_ut

Avatar no widget


A elegância é um dom que a maioria dos Administradores tem com seus fóruns, e com o código a seguir poderemos adicionar o avatar dos usuários em todas as versões no widget de "Últimos assuntos".



-->Tutoriais, dicas e astúcias <--
Avatar no widget "Últimos assuntos" para PhpBB3




- Páginas .JS:
Para aplicarmos o tutorial, deveremos aceder à:
Painel administrativo ->> Módulos ->> HTML & JAVASCRIPT ->> Gestão dos códigos JavaScript
tutorial - Avatar no widget últimos assuntos Painel13

tutorial - Avatar no widget últimos assuntos 110111tutorial - Avatar no widget últimos assuntos 398853 Título Correspondente ao nome da página JavaScript/jQuery que será criada.
tutorial - Avatar no widget últimos assuntos 110210tutorial - Avatar no widget últimos assuntos 398853 Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos nos tópicos.
tutorial - Avatar no widget últimos assuntos 110310tutorial - Avatar no widget últimos assuntos 398853 Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
tutorial - Avatar no widget últimos assuntos 110410tutorial - Avatar no widget últimos assuntos 398853 Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.


- Código a ser usado:
Cole este novo código:
Código:
/***
* Avatar in Recent Topics Widget!
* Version: phpbb2
* Only one request per session to read member profile to get avatar!
* Optimization by JScript - 2013/07/04
*/
$(window).load(function() {
    var sCSS = '' +
        '<style>' +
        '.ipsUserPhoto {' +
            'background: none repeat scroll 0 0 #FFFFFF;' +
            'border: 1px solid #D5D5D5 !important;' +
            'box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);' +
            'padding: 1px;' +
        '}' +
        '.ipsUserPhoto_mini {' +
            'height: 30px;' +
            'width: 30px;' +
        '}' +
        '</style>';
    document.head.insertAdjacentHTML('beforeEnd', sCSS);   
    /* DOM chached for fast execution! */
 //var widgetLeft = jQuery('#left')[0]; // Left widget;
 var widgetRight = jQuery('#right')[0]; // Right widget;
    var oTarget = jQuery(widgetRight).find('.forumline tr td.row1 a[href^="/t"]');
   
    setTimeout(function() {
 oTarget.each(function () {
        oThis = jQuery(this); /* DOM chached for fast execution! */
        var temp = oThis.next().next().next();
 var UserURL = temp.attr('href');
        var UserTitle = temp.text();
        var def_img = "http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png"; /* In case request profile errors! */
        var UserIMG = 0;//sessionStorage.getItem(UserURL); /* Gets the avatar saved in local storage (Fastest!)*/
        var sHtml = '<a id="user_photo" style="float: left; margin-top: 3px; margin-right: 10px;" class="ipsUserPhoto" href="' + UserURL + '" title="' + UserTitle;
        /* If avatar alread saved, then no request member profile! */
        if(UserIMG) {
            oThis.prepend(sHtml + '"><img class="ipsUserPhoto_mini" src="' + UserIMG + '" alt="" /></a>');
        } else {
            /* if not, then only request per session!!! */
           
            /* Pre-loaded user img... */
            oThis.prepend(sHtml + '" title="' + UserTitle + '"><img class="ipsUserPhoto_mini" src="' + def_img + '" alt="" /></a>');
           
            // user img
            jQuery(this).children('a').load(UserURL + ' #emptyidcc .row1.gensmall img:eq(0)', function() {
                jQuery(this).children('img').attr('class','ipsUserPhoto_mini');
                var profile_img = jQuery(this).children('img').attr('src');
                //Saves the member avatar in local storage
                sessionStorage.setItem(UserURL, profile_img);
            });
        }
 oThis.find('a[href^="/u"]').insertBefore(jQuery(this));
 });
    }, 10000);
});

  • Resultado
    tutorial - Avatar no widget últimos assuntos 79v4YRn





:copyright: Fórum dos Fóruns & JScript


tutorial - Avatar no widget últimos assuntos Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Avatar no widget últimos assuntos
Shek
Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos