[FORUMEIROS] Avatar nos membros do chatbox

Avatar nos membros do chatbox

--> Fóruns forumeiros <--

Introdução:Este tutorial explica como adicionar o avatar do usuário na lista de membros conectados assim como nas mensagens de estado, como por exemplo " [AVATAR] * iChees está criando um tutorial".

1º Adicionando o código Javascript

P.C. > Módulos > HTML & JavaScript > Gestão dos códigos JavaScript > Criar um novo JavaScript:

Investimento: Recomendável usar em todas as páginas, para que funcione também no link /chatbox.

Código:

Código:

 $(window).load(function() {
  var chatbox_script = function() {
 
    var default_avatar = 'http://2img.net/i/fa/invision/pp-blank-thumb-38px.png';
    var ava_in_member_list = true;
    var ava_in_indirect_message = true;
 
    var avatars = {};
    var d;
    var set_avatar = function(pseudo, elem_to_prepend){
      var avatar = avatars[pseudo];
      var el = $(this);
      elem_to_prepend.find('.cb-avatar').remove();
      elem_to_prepend.prepend('<span class="cb-avatar"><img src="'+(avatar||default_avatar)+'"></span>&nbsp;');
      if(!avatar) {
        if(!d) {
          d = $.get('/memberlist?change_version=prosilver').done(function(c){
            $('.avatar-mini img', c).each(function(){
              avatars[$(this).parent().text().substr(1)]= $(this).attr('src')
            })
          })
        }
        d.done(function(){
          var avatar = avatars[pseudo];
          elem_to_prepend.find('.cb-avatar img').attr('src', avatar||default_avatar)
        })
      }
    };
    var overrided = Chatbox.prototype.refresh;
    Chatbox.prototype.refresh = function(data) {
      var next_scroll = false;
      if (data.messages && data.messages.length) {
        $.each(data.messages, function(_,m){
          if(ava_in_indirect_message)
            m.msgColor+='\' data-username=\''+$('<div/>').text(m.username).html();
          if(m.user && m.user.avatar)
            avatars[m.username] = m.user.avatar
        });
        next_scroll = !this.messages || this.messages.length != data.messages.length;
      }
      overrided.call(this, data);
      d = null;
      ava_in_member_list && $('#chatbox_members .chatbox-username').each(function(){
        set_avatar($(this).text(), $(this).parent());
      });
      ava_in_indirect_message && $('#chatbox p > .msg').wrap('<span class="user-msg indirect-user-msg" />').each(function(){
        set_avatar($(this).children().attr('data-username'), $(this).parent());
      });
      if(next_scroll) $("#chatbox")[0].scrollTop = $("#chatbox").prop('scrollHeight') * 2
    };
  };
  var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
});

https://2img.net/i/fa/invision/pp-blank-thumb-38px.png - Altere para a imagem padrão desejada, para ser usada quando o membro não tem avatar.

Para não adicionar o avatar na lista de usuários conectados troque o valor de [codebox]ava_in_member_list[/codebox] para false em vez de true.

Para não adicionar o avatar nas mensagens de estado troque o valor de [codebox]ava_in_indirect_message[/codebox] para false em vez de true.

2º Adicionando o código CSS:

P.C. > Visualização > Imagens & Cores > Cores > Folha de estilos CSS:

Código:

 #chatbox_members .cb-avatar > img {
  height:30px;
width:30px;
  vertical-align: middle;
}

Troque [codebox] height: 30px; [/codebox] pela altura em px desejada.
Troque [codebox] width: 30px; [/codebox] pela altura em px desejada.

tech

[FORUMEIROS] Avatar nos membros do chatbox