Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Aparecer pop-up de login ao clicar em Conectar-se
Hoje à(s) 05:42 am por Luiz

» Colocar link do perfil no menu
Hoje à(s) 05:39 am por Luiz

» Personalizar barra de ferramentas
Hoje à(s) 05:25 am por Flames

» Logo do fórum
Hoje à(s) 05:04 am por Luiz

» Cor do fundos dos tópicos
Hoje à(s) 05:02 am por Luiz

» Como adicionar um Painel de Usuário no fórum?
Hoje à(s) 04:59 am por Luiz

» Categoria do fórum
Hoje à(s) 12:06 am por PrisoN†BreaK

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
Luiz
 
Fatalisss
 
Holkis
 
Flames
 
JulioPais
 
Shek
 
APOllO
 
Forumpw
 

Quem está conectado
222 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 220 Visitantes :: 2 Motores de busca

Flames, Luiz

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Widget top postadores com avatar redondo

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Widget top postadores com avatar redondo

Mensagem por Jhool em 09/03/17, 07:51 am

Detalhes da questão


Endereço do fórum: http://familiawarning.forumeiros.com
Versão do fórum: PunBB

Descrição


Procurei em diversos locais e não encontrei, poderiam me ajudar?

Eu gostaria deste sistema, aparecer a Foto, Nick e Quantidade de posts do usuário. A foto redondinha desta forma.


Fórum em que vi tal sistema:
http://www.brasilplayshox.com.br/

O widget vai estar neste menu da direita.
avatar

Jhool
Nível 8

Masculino
Inscrito dia : 10/01/2017
Mensagens : 128
Pontos Ativos : 210

http://familiawarning.forumeiros.com/forum

Resolvido Re: Widget top postadores com avatar redondo

Mensagem por Kyo Panda em 09/03/17, 08:31 am

Acredito que seja esse widget que procura.

o/


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Resolvido Re: Widget top postadores com avatar redondo

Mensagem por Jhool em 09/03/17, 09:01 am

Resultou, sabe se tem como criar um com a mesma função só que para:

- Os mais ativos da semana
- Os mais ativos do mês

O código fornecido pelo ajudero do tópico que você enviou
Código:
<script>
jQuery(document).ready(function() {
 var members_top_posters = sessionStorage.getItem('members_top_posters');
 if(members_top_posters) {
  jQuery('#members_top_posters').html(members_top_posters);
 } else {
 jQuery.get('/memberlist?mode=posts&order=DESC&submit=Ok&username', function(d) {
  var members = jQuery('.table a[href^="/u"]:lt(5)', d);
  jQuery('#members_top_posters').html(members);
  jQuery('#members_top_posters').find('a[href^="/u"]').each(function() {
  jQuery(this).wrap('<div class="m_b"></div>');
  var post = jQuery(this).attr('href');
    jQuery(this).after('<span class="posts"></span>');
    jQuery(this).next().load(post+' .main #field_id-6 dd div', function() {
    jQuery(this).text(jQuery(this).text());
    sessionStorage.setItem('members_top_posters', jQuery('#members_top_posters').html());
    });
  });
 });
 }
});
</script>
<div id="members_top_posters">
</div><style>
#members_top_posters .m_b {
margin: 4px 0;
}
#members_top_posters .m_b:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#members_top_posters a span {text-decoration: none;}
#members_top_posters .m_b img {
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
background: #fff;
border: 1px solid #D5D5D5!important;
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
float: left;
height: 32px;
margin: 0 3px;
padding: 1px;
width: 32px;
}
#members_top_posters .m_b img:hover {
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.5);
border-color: #666;
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
}
#members_top_posters .posts {
display: block;
margin-top: 5px;
margin-left: 45px;
font: 11px helvetica, arial, sans-serif;
color: #777777;
}
#members_top_posters .posts:after {
content: ' posts';
}
</style>
avatar

Jhool
Nível 8

Masculino
Inscrito dia : 10/01/2017
Mensagens : 128
Pontos Ativos : 210

http://familiawarning.forumeiros.com/forum
  • 0

Resolvido Re: Widget top postadores com avatar redondo

Mensagem por Kyo Panda em 09/03/17, 10:15 am

Não, pois o plugin em questão puxa as informações da página de busca de membros, e a listagem para os membros da semana/mês não existe lá.

---

Tive que produzir novos:

Adicione a um novo Javascript com investimento em No índice:

Membros da semana:
Código:
(function($) {
   'use strict';

   if (!window.sessionStorage || !window.JSON) {
      return;
   }

   var config = {
      title: 'Os membros mais ativos da semana',
      storage_id: 'fa.top-posters.week',
      avatar_selector: '#profile-advanced-right > .module:first-child img[alt="avatar"]',
      module_content_selector: '.main-content',
      i18n_posts: 'posts',
   };

   var render = function(data) {
      var $content = $('table[summary="' + config.title + '"]')
         .closest(config.module_content_selector);

      var list = [];

      $.each(data, function(index, member) {
         list.push([
            '<li>',
            '  <a href="' + member.profile_url + '" class="fa-top-poster-avatar">',
            '    <img src="' + member.avatar_url + '" alt="' + member.username + '" />',
            '  </a>',
            '  ' + member.username_html,
            '  <span class="fa-top-poster-count">' + member.post_count + ' ' + config.i18n_posts,
            '</li>',
         ].join('\n'));
      });

      $content.html([
         '<ul class="fa-top-poster">',
         '  ' + list.join('\n'),
         '</ul>',
      ].join('\n'));
   };

   $(function() {
      var stored = window.sessionStorage.getItem(config.storage_id);

      if (stored) {
         render(JSON.parse(stored));
         return;
      }

      var $table = $('table[summary="' + config.title + '"]');

      if (!$table.length) {
         return;
      }

      var posters = [];

      $table.find('a').each(function(index, elem) {
         var $elem = $(elem);

         posters.push({
            profile_url: $elem.attr('href'),
            username: $elem.attr('title'),
            username_html: $elem.prop('outerHTML'),
         });
      });

      $table.find('table').each(function(index, elem) {
         var $elem = $(elem);
         var data = $elem.attr('title').split(' ');

         posters[index].post_count = data.shift();
         posters[index].post_percentage = data.pop();
      });

      var promises = [];

      $.each(posters, function(index, poster) {
         var promise = $.get(poster.profile_url, function(data) {
            posters[index].avatar_url = $(config.avatar_selector, data).attr('src');
         });

         promises.push(promise);
      });

      $.when.apply(null, promises).done(function() {
         window.sessionStorage.setItem(config.storage_id, window.JSON.stringify(posters));
         render(posters);
      });
   });
}(jQuery));

Membros do mês:
Código:
(function($) {
   'use strict';

   if (!window.sessionStorage || !window.JSON) {
      return;
   }

   var config = {
      title: 'Os membros mais ativos do mês',
      storage_id: 'fa.top-posters.month',
      avatar_selector: '#profile-advanced-right > .module:first-child img[alt="avatar"]',
      module_content_selector: '.main-content',
      i18n_posts: 'posts',
   };

   var render = function(data) {
      var $content = $('table[summary="' + config.title + '"]')
         .closest(config.module_content_selector);

      var list = [];

      $.each(data, function(index, member) {
         list.push([
            '<li>',
            '  <a href="' + member.profile_url + '" class="fa-top-poster-avatar">',
            '    <img src="' + member.avatar_url + '" alt="' + member.username + '" />',
            '  </a>',
            '  ' + member.username_html,
            '  <span class="fa-top-poster-count">' + member.post_count + ' ' + config.i18n_posts,
            '</li>',
         ].join('\n'));
      });

      $content.html([
         '<ul class="fa-top-poster">',
         '  ' + list.join('\n'),
         '</ul>',
      ].join('\n'));
   };

   $(function() {
      var stored = window.sessionStorage.getItem(config.storage_id);

      if (stored) {
         render(JSON.parse(stored));
         return;
      }

      var $table = $('table[summary="' + config.title + '"]');

      if (!$table.length) {
         return;
      }

      var posters = [];

      $table.find('a').each(function(index, elem) {
         var $elem = $(elem);

         posters.push({
            profile_url: $elem.attr('href'),
            username: $elem.attr('title'),
            username_html: $elem.prop('outerHTML'),
         });
      });

      $table.find('table').each(function(index, elem) {
         var $elem = $(elem);
         var data = $elem.attr('title').split(' ');

         posters[index].post_count = data.shift();
         posters[index].post_percentage = data.pop();
      });

      var promises = [];

      $.each(posters, function(index, poster) {
         var promise = $.get(poster.profile_url, function(data) {
            posters[index].avatar_url = $(config.avatar_selector, data).attr('src');
         });

         promises.push(promise);
      });

      $.when.apply(null, promises).done(function() {
         window.sessionStorage.setItem(config.storage_id, window.JSON.stringify(posters));
         render(posters);
      });
   });
}(jQuery));

E adicione ao CSS:

Código:
/**
 * BEGIN FA.Members.TopPosters
 */

.fa-top-poster {
    list-style: none;
    padding: 0 !important;
    margin: 0;
}

.fa-top-poster li {
    overflow: hidden;
    padding-bottom: 5px;
}

.fa-top-poster-avatar {
    display: block;
    float: left;
    background: #fff;
    border: 1px solid #D5D5D5;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    height: 32px;
    margin-right: 5px;
    padding: 1px;
    width: 32px;
}

.fa-top-poster-avatar img {
    width: 100%;
    height: 100%;
}

.fa-top-poster-count {
    display: block;
    font-size: 11px;
    color: #777777;
    margin-top: 5px;
}

/**
 * END FA.Members.TopPosters
 */

---

Ambos os Widgets não atualizam em tempo real. Eles armazenam a listagem enquanto a sessão do navegador durar (enquanto você tiver com a aba do fórum aberta). Faço isso para não sobrecarregar o fórum, dado ao alto número de requisições para carregar os avatares.

o/


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Resolvido Re: Widget top postadores com avatar redondo

Mensagem por Jhool em 09/03/17, 11:06 am

Ficou meio bugadinho assim, sabe o que pode ser?
avatar

Jhool
Nível 8

Masculino
Inscrito dia : 10/01/2017
Mensagens : 128
Pontos Ativos : 210

http://familiawarning.forumeiros.com/forum

Resolvido Re: Widget top postadores com avatar redondo

Mensagem por Kyo Panda em 09/03/17, 11:14 am

Erro meu. Para convidados fica assim:



Troque os códigos por esse:

Código:
(function($) {
  'use strict';
 
  if (!window.sessionStorage || !window.JSON) {
      return;
  }
 
  var config = {
      title: 'Os membros mais ativos da semana',
      storage_id: 'fa.top-posters.week',
      avatar_selector: '#profile-advanced-right img[alt="avatar"]:first',
      module_content_selector: '.main-content',
      i18n_posts: 'posts',
  };
 
  var render = function(data) {
      var $content = $('table[summary="' + config.title + '"]')
        .closest(config.module_content_selector);
 
      var list = [];
 
      $.each(data, function(index, member) {
        list.push([
            '<li>',
            '  <a href="' + member.profile_url + '" class="fa-top-poster-avatar">',
            '    <img src="' + member.avatar_url + '" alt="' + member.username + '" />',
            '  </a>',
            '  ' + member.username_html,
            '  <span class="fa-top-poster-count">' + member.post_count + ' ' + config.i18n_posts,
            '</li>',
        ].join('\n'));
      });
 
      $content.html([
        '<ul class="fa-top-poster">',
        '  ' + list.join('\n'),
        '</ul>',
      ].join('\n'));
  };
 
  $(function() {
      var stored = window.sessionStorage.getItem(config.storage_id);
 
      if (stored) {
        render(JSON.parse(stored));
        return;
      }
 
      var $table = $('table[summary="' + config.title + '"]');
 
      if (!$table.length) {
        return;
      }
 
      var posters = [];
 
      $table.find('a').each(function(index, elem) {
        var $elem = $(elem);
 
        posters.push({
            profile_url: $elem.attr('href'),
            username: $elem.attr('title'),
            username_html: $elem.prop('outerHTML'),
        });
      });
 
      $table.find('table').each(function(index, elem) {
        var $elem = $(elem);
        var data = $elem.attr('title').split(' ');
 
        posters[index].post_count = data.shift();
        posters[index].post_percentage = data.pop();
      });
 
      var promises = [];
 
      $.each(posters, function(index, poster) {
        var promise = $.get(poster.profile_url, function(data) {
            posters[index].avatar_url = $(config.avatar_selector, data).attr('src');
        });
 
        promises.push(promise);
      });
 
      $.when.apply(null, promises).done(function() {
        window.sessionStorage.setItem(config.storage_id, window.JSON.stringify(posters));
        render(posters);
      });
  });
}(jQuery));

Código:
(function($) {
  'use strict';
 
  if (!window.sessionStorage || !window.JSON) {
      return;
  }
 
  var config = {
      title: 'Os membros mais ativos do mês',
      storage_id: 'fa.top-posters.month',
      avatar_selector: '#profile-advanced-right img[alt="avatar"]:first',
      module_content_selector: '.main-content',
      i18n_posts: 'posts',
  };
 
  var render = function(data) {
      var $content = $('table[summary="' + config.title + '"]')
        .closest(config.module_content_selector);
 
      var list = [];
 
      $.each(data, function(index, member) {
        list.push([
            '<li>',
            '  <a href="' + member.profile_url + '" class="fa-top-poster-avatar">',
            '    <img src="' + member.avatar_url + '" alt="' + member.username + '" />',
            '  </a>',
            '  ' + member.username_html,
            '  <span class="fa-top-poster-count">' + member.post_count + ' ' + config.i18n_posts,
            '</li>',
        ].join('\n'));
      });
 
      $content.html([
        '<ul class="fa-top-poster">',
        '  ' + list.join('\n'),
        '</ul>',
      ].join('\n'));
  };
 
  $(function() {
      var stored = window.sessionStorage.getItem(config.storage_id);
 
      if (stored) {
        render(JSON.parse(stored));
        return;
      }
 
      var $table = $('table[summary="' + config.title + '"]');
 
      if (!$table.length) {
        return;
      }
 
      var posters = [];
 
      $table.find('a').each(function(index, elem) {
        var $elem = $(elem);
 
        posters.push({
            profile_url: $elem.attr('href'),
            username: $elem.attr('title'),
            username_html: $elem.prop('outerHTML'),
        });
      });
 
      $table.find('table').each(function(index, elem) {
        var $elem = $(elem);
        var data = $elem.attr('title').split(' ');
 
        posters[index].post_count = data.shift();
        posters[index].post_percentage = data.pop();
      });
 
      var promises = [];
 
      $.each(posters, function(index, poster) {
        var promise = $.get(poster.profile_url, function(data) {
            posters[index].avatar_url = $(config.avatar_selector, data).attr('src');
        });
 
        promises.push(promise);
      });
 
      $.when.apply(null, promises).done(function() {
        window.sessionStorage.setItem(config.storage_id, window.JSON.stringify(posters));
        render(posters);
      });
  });
}(jQuery));

Lembre-se que terá que fechar as abas do seu fórum e reabrí-las. o/


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Resolvido Re: Widget top postadores com avatar redondo

Mensagem por Jhool em 09/03/17, 11:17 am

Obrigado Kyo, você é uma lenda desse FDF.

Se poder me ajudar no outro pedido:
http://ajuda.forumeiros.com/t108273-tabela-de-novidades-do-forum

Resultou, TMJ !
avatar

Jhool
Nível 8

Masculino
Inscrito dia : 10/01/2017
Mensagens : 128
Pontos Ativos : 210

http://familiawarning.forumeiros.com/forum

Resolvido Re: Widget top postadores com avatar redondo

Mensagem por Kyo Panda em 09/03/17, 11:20 am

Uma hora eu chego lá. o/

---
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3708
Pontos Ativos : 4952

http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum