Colocar avatar no widget ultimos assuntos

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Mozilla Firefox
Membros afetados : Todos os membros do fórum
Problema começou : Há uma semana
Endereço do fórum : http://www.suportedesign.forumeiros.com

Descrição do problema

Bem eu desejava saber como colocar o widget de últimos assuntos com os avatares dos usuários.

Aqui fica um exemplo:
- http://www.bestskins.net/forum

Eu uso este código:

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);
               }
           });
       }        
});    
}

Mais informações ->

Olá,

Amigo a mim não realizou efeito nenhum infelizmente...

Tem como tirar o seu fórum de manutenção para que eu possa realizar uns testes ?

PlayBoy1 escreveu:Tem como tirar o seu fórum de manutenção para que eu possa realizar uns testes ?

Claro amigo, retirado!

Olá!

Acesse seus templates em Visualização > Templates > Portal > mod_recent_topics e substitua o template por:

Código:


    <!-- JScript - 2013-07-08 - http://punbb.forumeiros.com -->
    <!-- BEGIN scrolling_row -->
    <div class="module main">
      <div class="main-head"><div class="h3">Tópicos Recentes</div></div>
        <div id="mod_recent_topics" class="main-content _sbcollapsable" style="margin: 0px; height: 225px; max-height: 225px; overflow: auto;">
            <ul class="ipsList_withminiphoto" style="margin: 0px !important;">
                <!-- BEGIN recent_topic_row -->
                <li class="clearfix">
                    <!-- BEGIN switch_poster -->
                    <a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}" class="ipsUserPhotoLink left">
                        <img src="" alt="Foto" class="ipsUserPhoto ipsUserPhoto_mini"
                            style="width: 30px; height: 30px; border: 1px solid rgb(213, 213, 213); background: none repeat scroll 0% 0% rgb(255, 255, 255);
                                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); padding: 1px;">
                    </a>
                    <!-- END switch_poster -->
                    <div class="list_content" style="margin-left: 40px; word-wrap: break-word;">
                        <a onmouseover="document.getElementById('comments_scroll_container').stop();"
                            onmouseout="document.getElementById('comments_scroll_container').start();" class="ipsType_small" style="font-size: 12px;"
                            href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE} - criado em {scrolling_row.recent_topic_row.S_POSTTIME}">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}
                        </a>
                        <p class="desc ipsType_smaller" style="color: rgb(119, 119, 119);">
                            <!-- BEGIN switch_poster -->
                            <a onmouseover="document.getElementById('comments_scroll_container').stop();"
                                onmouseout="document.getElementById('comments_scroll_container').start();"
                                href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}" style="font-size: 11px !important;">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}
                            </a>
                            <!-- END switch_poster -->

                            <!-- BEGIN switch_poster_guest -->
                            {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}
                            <!-- END switch_poster_guest -->

                            - {scrolling_row.recent_topic_row.S_POSTTIME}
                        </p>
                    </div>
                </li>
                <!-- END recent_topic_row -->
          </ul>
      </div>
    </div>

    <script type="text/javascript">
    //<![CDATA[
    $(function(){
        div_marquee('mod_recent_topics', 'comments_scroll_container', '{SCROLL_WAY}', '{SCROLL_STEP}', '{SCROLL_DELAY}', '{SCROLL_HEIGHT}');
    });
    //]]>
    </script>
    <!-- END scrolling_row -->

    <!-- BEGIN classical_row -->
    <div class="module main">
      <div class="main-head"><h3>Tópicos Recentes</h3></div>
      <div id="mod_recent_topics" class="main-content _sbcollapsable" style="margin: 0px; height: 225px; max-height: 225px; overflow: auto;">
            <ul class="ipsList_withminiphoto" style="margin: 0px !important;">
                <!-- BEGIN recent_topic_row -->
                <li class="clearfix">
                    <!-- BEGIN switch_poster -->
                    <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}" class="ipsUserPhotoLink left">
                        <img src="" alt="Foto" class="ipsUserPhoto ipsUserPhoto_mini"
                            style="width: 30px; height: 30px; border: 1px solid rgb(213, 213, 213); background: none repeat scroll 0% 0% rgb(255, 255, 255);
                                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); padding: 1px;">
                    </a>
                    <!-- END switch_poster -->
                    <div class="list_content" style="margin-left: 40px; word-wrap: break-word;">
                        <a href="{classical_row.recent_topic_row.U_TITLE}" class="ipsType_small" style="font-size: 12px;"
                            title="{classical_row.recent_topic_row.L_TITLE} - criado em {classical_row.recent_topic_row.S_POSTTIME}">{classical_row.recent_topic_row.L_TITLE}</a>
                        <p class="desc ipsType_smaller" style="color: rgb(119, 119, 119);">
                            <!-- BEGIN switch_poster -->
                            <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}" style="font-size: 11px !important;">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
                            <!-- END switch_poster -->

                            <!-- BEGIN switch_poster_guest -->
                            {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
                            <!-- END switch_poster_guest -->

                            - {ON} {classical_row.recent_topic_row.S_POSTTIME}
                        </p>
                    </div>
                </li>
                <!-- END recent_topic_row -->
          </ul>
      </div>
    </div>
    <!-- END classical_row -->
    <script type="text/javascript">
    //<![CDATA[
    /***
    * Widget Recent Topics
    * Only one request per session to read member profile to get avatar!
    * Only show the widget if is visible in browser window (view port)!!!
    * Made and Optimizations by JScript - 2013/07/12
    */
   
    /* Fire event for 'scroll' to show the widget... */
    $(window).load(function() {
        if (location.pathname == '/forum') {
            jQuery(window).on('scroll.mod_recent_topics', showRecentTopics(document.getElementById("mod_recent_topics")));
        }
    });
    /* Function to check if an element is visible in view port */
    function isInViewPort(elem) {
      var rect = elem.getBoundingClientRect();

      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 widget... */
    function showRecentTopics(elem) {
      return function() {
            /* Chech if the widget is visible in view port! */
          if (isInViewPort(elem)) {
                /* If visible, stop event!!! */
            jQuery(window).off('scroll.mod_recent_topics');
                /* DOM chached for fast execution! */
                var oTarget = $('#mod_recent_topics').find('ul.ipsList_withminiphoto > li');

                oTarget.each(function () {
                    oThis = $(this); /* DOM chached for fast execution! */
                 
                    if (oThis.find('a.ipsType_small').text().indexOf('_Log') !== -1) oThis.remove();
                 
                    var load_container = oThis.children('a');
                    var UserURL = load_container.attr('href');
                    var def_img = "http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png"; /* In case request profile errors! */
                    var sHtml = '<img src="' + def_img + '" alt="Foto" class="ipsUserPhoto ipsUserPhoto_mini" ' +
                                '    style="width: 30px; height: 30px; border: 1px solid rgb(213, 213, 213); background: none repeat scroll 0% 0% rgb(255, 255, 255);' +
                                '        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); padding: 1px;">';
                    var UserIMG = sessionStorage.getItem(UserURL); /* Gets the avatar saved in local storage (Fastest!)*/
         
                    /* If avatar alread saved, then no request member profile! */
                    if(UserIMG) {
                        load_container.children('img').attr('src', UserIMG);
                    } else {
                        /* if not, then only request per session!!! */         
                        load_container.load(UserURL + ' #profile_tabs p img', function() {
                            var imgTag = load_container.children('img');
                 
                            if (imgTag.length == 0) {
                                load_container.append(sHtml);
                                /* Saves the default avatar in local storage */
                                sessionStorage.setItem(UserURL, def_img);
                            } else {
                                imgTag.attr('class','ipsUserPhoto ipsUserPhoto_mini');
                                imgTag.css({ 'width' : '30px', 'height' : '30px', 'border' : '1px solid rgb(213, 213, 213)', 'padding' : '1px',
                                    'background' : 'none repeat scroll 0% 0% rgb(255, 255, 255)', 'box-shadow' : '0px 2px 2px rgba(0, 0, 0, 0.1)' });
                                /* Saves the member avatar in local storage */
                                sessionStorage.setItem(UserURL, imgTag.attr('src'));
                            }
                        });
                    }
                });
          }
      }
    }
    //]]>
    </script>


Tenha em mente a nova atualização do widegt que não está definida no código: https://ajuda.forumeiros.com/t98609-atualizacao-do-template-do-widget-topicos-recentes Este código foi editado pelo @JScript.

Atenciosamente,
Shek

Olá!

Sim já tinha reparado da notícia amigo, mas agora voltando à dúvida alterei, mas agora não aparece nada...

Olá!

A melhor forma de encontrar tópicos para sanar sua dúvida é usando o sistema de busca do FDF.
https://ajuda.forumeiros.com/t98643-
https://ajuda.forumeiros.com/t93895-
https://ajuda.forumeiros.com/t98030-

Olá!

Infelizmente nenhum resultou, mas deixe estar fica assim, pode dar como resolvido, obrigado!

Na verdade, há um script deles que funciona. O detalhe é que, o seu template sendo alterado acaba por dificultar o código encontrar determinados seletores no template, e por este motivo, não funciona. Enfim, ficamos gratos pela sua dúvida.

Até mais!

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.