[TUTORIAL] Colocar avatar do membro mencionado

Item: [TUTORIAL] Colocar avatar do membro mencionado
Rating: 1

por Luiz 29.04.18 21:52

Colocar avatar do membro mencionado

Com este tutorial, ao mencionar um membro, o avatar deste membro aparecerá à esquerda da menção.

Colocar avatar do membro mencionado

TUTORIAIS, DICAS E ASTÚCIAS

Páginas JavaScript

As páginas JavaScript ativas em seu fórum possibilita inserir scripts e jQuery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de Controle Visualização Módulos HTML & JavaScript Gestão dos códigos JavaScript Criar um novo JavaScript

(carregue na imagem para aumentar)
[TUTORIAL] Colocar avatar do membro mencionado Javaac10

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

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.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

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:: (function() { 'DEVELOPED BY ANGE TUTEUR'; 'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR'; 'ORIGIN : http://fmdesign.forumotion.com/t399-display-the-user-avatar-before-mentions#3207'; window.faMentionAvatar = { // position modifies the position of the avatar // 0 = before mention // 1 = after mention position : 0, cacheTime : 1*60*60*1000, // amount of time the avatar is cached ( 1 hour ) mentions : null, // mention node list index : -1, // current index in the mentions array // checks if the mention is valid and then gets the avatar getter : function() { var mention = faMentionAvatar.mentions[++faMentionAvatar.index], storage = window.localStorage, id; if (mention) { id = mention.href.replace(/.*?\/u/, ''); if (storage && storage['mentionAvatar_' + id] && storage['mentionAvatar_' + id + '_exp'] > +new Date - faMentionAvatar.cacheTime) { var avatar = document.createElement('IMG'); avatar.className += ' mention-ava'; avatar.src = storage['mentionAvatar_' + id]; faMentionAvatar.position ? mention.appendChild(avatar) : mention.insertBefore(avatar, mention.firstChild); faMentionAvatar.getter(); } else { $.get('/ajax/index.php?f=m&user_id=' + id, function(d) { var avatar = $('.tooltip-content > img', d)[0]; if (avatar) { faMentionAvatar.position ? mention.appendChild(avatar) : mention.insertBefore(avatar, mention.firstChild); if (storage) { storage['mentionAvatar_' + id] = avatar.src; storage['mentionAvatar_' + id + '_exp'] = +new Date; } } faMentionAvatar.getter(); }); } } } }; // write the stylesheet into the HEAD section document.write('<style type="text/css">.mentiontag img { height:20px; width:20px; vertical-align:middle; border-radius:100px; background:#FFF; box-shadow:0px 1px 1px rgba(0, 0, 0, 0.3), 0px -0px 1px rgba(0, 0, 0, 0.3); margin:1px 3px; padding:1px; }</style>'); // statements that need execution when the document is ready $(function() { faMentionAvatar.mentions = $('.mentiontag'); faMentionAvatar.getter(); }); }());

Resultado: