* Aplicação: Widget [Últimos assuntos] com avatar.
* Descrição: Este código mostra o widget [Últimos assuntos] com o avatar dos membros.
* Versão: 1.03172014-jq1.9.1 - Narmer (Menés, Meni)
* Made and Optimizations by JScript - 2014/03/17

No painel de controle, siga os passos da imagem abaixo:

Spoiler:

Código para ser adicionado:

Código:


/***
* Application: Avatar in Recent Topics Widget!
* Description: This application can displays the members avatar.
* Version: 1.03172014-jq1.9.1 - Narmer (Menés, Meni)
* Made and Optimizations by JScript - 2014/03/17
* View more in: http://ajuda.forumeiros.com
* Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
* This work is free. You can redistribute it and/or modify it
* under the terms of the WTFPL, Version 2
*/
jQuery(function () {
   /***
   * User Definition Variables
   ***/
   /* Put here the widget title for your native language!!! */
   var sWidgetTitle = 'Últimos assuntos';  
   /***
   * System Defined Variables - Do not edit if you don't know!
   ***/
   var oConfig = {
       sInfo:
           '<!--' +
           '* Application: Avatar in Recent Topics Widget!' +
           '* Description: This application can displays the members avatar.' +
           '* Version: 1.03172014-jq1.9.1 - Narmer (Menés, Meni)' +
           '* Made and Optimizations by JScript - 2014/03/17' +
           '* View more in: http://jscript.forumeiros.com/forum & http://ajuda.forumeiros.com' +
           '* Copyright (c) 2014 JScript <jscriptbrasil at live dot com>' +
           '* This work is free. You can redistribute it and/or modify it' +
           '* under the terms of the WTFPL, Version 2' +
           '-->',
       sDefaultAvatar: 'http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png',
       sWidgetTitle: sWidgetTitle,
       sCSS:
           '<style>' +
           '.ipsUserPhoto.widget {' +
               'float: left;' +
               'margin-top: 3px;' +
               'margin-right: 10px;' +
           '}' +
           '.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 !important;' +
               'width: 30px !important;' +
           '}' +
           '</style>',
       sTarget: '',
       sCommon: 'a[href^="/t"]',
       sGetIMG: ''
   };

   // Add CSS
   jQuery(oConfig.sCSS).insertBefore('body');

   /* Forum versions! */
   var phpBB2 = jQuery('.bodyline');
   var phpBB3 = jQuery('#wrap');
   var punbb = jQuery('#pun-intro');
   var invision = jQuery('#ipbwrapper');
   
   if (phpBB2.length) {
       oConfig.sTarget = '.forumline:contains("' + oConfig.sWidgetTitle + '") tr td.row1 ' + oConfig.sCommon;
       oConfig.sGetIMG = ' #emptyidcc .row1.gensmall img:eq(0)';
       jQuery('.forumline tr td span:contains("' + oConfig.sWidgetTitle + '")').attr('id', 'last-topics');
   } else if(phpBB3.length) {
       oConfig.sTarget = '.module .inner:contains("' + oConfig.sWidgetTitle + '") ' + oConfig.sCommon;
       oConfig.sGetIMG = ' #profile-advanced-right .module:first .inner img:eq(0)';
       jQuery('.module .inner:contains("' + oConfig.sWidgetTitle + '")').attr('id', 'last-topics');
   } else if(punbb.length) {
       oConfig.sTarget = '.module.main:contains("' + oConfig.sWidgetTitle + '") .main-content ' + oConfig.sCommon;
       oConfig.sGetIMG = ' #profile-advanced-right .main-content img:first';
       jQuery('.module.main:contains("' + oConfig.sWidgetTitle + '")').attr('id', 'last-topics');
   } else if(invision.length) {
       oConfig.sTarget = '.module.borderwrap:contains("' + oConfig.sWidgetTitle + '") .box-content ' + oConfig.sCommon;
       oConfig.sGetIMG = ' #profile-advanced-right .box-content.profile.center img:first';
       jQuery('.module.borderwrap:contains("' + oConfig.sWidgetTitle + '")').attr('id', 'last-topics');
   };
   
   var oTarget = jQuery('#right, #left').find(oConfig.sTarget);
   oTarget.prepend('<a class="ipsUserPhoto widget" href="#" title="No avatar!"><img class="ipsUserPhoto_mini" src="' + oConfig.sDefaultAvatar + '" alt="" /></a>');

   // Fire event for 'scroll' to show the content only if is visible in view port...
   var elem = document.getElementById("last-topics");
   if (isInViewPort(elem)) {
       LastTopics(oTarget, oConfig.sExpression0, oConfig.sGetIMG);
   } else {
       jQuery(window).on('scroll.lasttopics', callFunction(elem, oTarget, oConfig.sExpression0, oConfig.sGetIMG));
   }
});
// Function to check if an element is visible in view port
function isInViewPort(elem) {
var rect = elem.getBoundingClientRect();
console.log(rect);
return (
rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ );
}
// Start function to show the content...
function callFunction(elem, oTarget, sExpression0, sGetIMG) {
return function() {
       // Chech if the element is visible in view port!
if (isInViewPort(elem)) {
           // If visible, stop event!!!
jQuery(window).off('scroll.lasttopics');
           
           LastTopics(oTarget, sExpression0, sGetIMG);
}
}
}
// Show member avatar in Recent Topics Widget!
function LastTopics(oTarget, sExpression0, sGetIMG) {
oTarget.each(function () {
       var oThis = jQuery(this); // DOM chached for fast execution!
       var temp = oThis.next().next();
       var UserURL = temp.attr('href');
       if (!UserURL) {
           temp = temp.next();
           UserURL = temp.attr('href');
       }
       var UserTitle = temp.text();
       var oImgTag = oThis.find('.ipsUserPhoto_mini');
       var UserIMG = 0;//sessionStorage.getItem(UserURL); // Gets the avatar saved in local storage (Fastest!)

       oThis.find('a.ipsUserPhoto.widget').attr('href', UserURL).attr('title', UserTitle);

       // If avatar alread saved, then no request member profile!
       if(UserIMG) {
           oImgTag.attr('src', UserIMG);
       } else {
           // if not, then only request per session!!!
           jQuery.get(UserURL, function(data){
               var profile_img = jQuery(sGetIMG, data).attr('src');

               if (profile_img !== undefined) {
                   oImgTag.attr('src', profile_img);
                   // Saves the member avatar in local storage
                   sessionStorage.setItem(UserURL, profile_img);
               }
           });
       }        
});    
}


Observações:

1- Funciona em todas as versões e em ambos os lados!
2- O código entra em ação somente quando o elemento está visível na tela, com isso poupa-se recursos e evita-se o Resquest Limit.
3- * Poderá deixar o código compatível com outros idiomas além do PT, para isso basta editar a variável sWidgetTitle com o valor que aparece no título do widget em seu idioma, exemplo: var sWidgetTitle = 'Latest topics';
Não alterando o que está em negrito!

Resultado:


Exemplo com a variável sWidgetTitle no idioma inglês:

Spoiler:

JS

Ja vi muita gente atrás disso, ótima contribuição JScript

Obrigado por compartilhar connosco amigo.

Funcionou perfeitamente no meu fórum na versão PhpBB3 veja:

Excelente código amigo @JScript confesso que já tinha desistido de utilizar os avatares nos últimos assuntos, vi alguns que tinham que mudar o template, trabalhoso sem falar que entrava em conflito direto com outros códigos. Mas esse, além de fácil instalação não entra em conflito em nada.

Júnior Duarte escreveu:Excelente código amigo @JScript confesso que já tinha desistido de utilizar os avatares nos últimos assuntos, vi alguns que tinham que mudar o template, trabalhoso sem falar que entrava em conflito direto com outros códigos. Mas esse, além de fácil instalação não entra em conflito em nada.

Exatamente, pensava que no meu também ia dar conflitos mas ficou perfeito.