[TUTORIAL] Avatar do membro no widget

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

  • 0

[TUTORIAL] Avatar do membro no widget

Mensagem por ddik em Dom 26 Set 2010 - 19:04

  Avatar do membro no widget
Através deste tutorial você aprenderá como colocar o avatar do usuário conectado em um widget (porém o código funciona em qualquer outra parte do fórum que aceite códigos HTML). Ela baseia-se em javascript e localiza na página de edição dos avatares o avatar atual do usuário.


-->  Tutoriais, dicas e astúcias  <--
Avatar do membro no widget





- Os códigos que serão usados para cada versão:

phpBB3
Código:
<script>
jQuery(document).ready(function(){
  jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
      link = jQuery('.panel dl:first img', data).attr('src');
      if(link){
        jQuery('#avatar').html('<center><img src="'+link+'" alt=""></center>');
      }else{
        jQuery('#avatar').html('');
      }
  });
});
</script><div id="avatar"><center>Carregando avatar...</center></div>

phpBB2
Código:
<script>
jQuery(document).ready(function(){
  jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
      link = jQuery('#register .forumline td.row1 img', data).attr('src');
      if(link){
        jQuery('#avatar').html('<center><img src="'+link+'" alt=""></center>');
      }else{
        jQuery('#avatar').html('');
      }
  });
});
</script><div id="avatar"><center>Carregando avatar...</center></div>

PunBB
Código:
<script>
jQuery(document).ready(function(){
  jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
      link = jQuery('.frm dl dd img', data).attr('src');
      if(link){
        jQuery('#avatar').html('<center><img src="'+link+'" alt=""></center>');
      }else{
        jQuery('#avatar').html('');
      }
  });
});
</script><div id="avatar"><center>Carregando avatar...</center></div>

Invision
Código:
<script>
jQuery(document).ready(function(){
  jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
      link = jQuery('.box-content dl dd img', data).attr('src');
      if(link){
        jQuery('#avatar').html('<center><img src="'+link+'" alt=""></center>');
      }else{
        jQuery('#avatar').html('');
      }
  });
});
</script><div id="avatar"><center>Carregando avatar...</center></div>


- Teremos de criar um widget personalizado, pois somente poderemos aplicar este método a widgets editáveis:
Para criar o widget teremos de aceder à:
Painel de controle -> Módulos -> Portal & Widgets  -> Configuração do portal -> Estrutura
E carregar em:

(carregue na imagem para aumentar)


- Agora vamos configura o nosso widget personalizado

(carregue na imagem para aumentar)
Seta Nome do widget - Terá de colocar um título para o widget, de forma a poder identifica-lo na lista dos widgets pessoais do Painel de Controle.
Ex.: Membro
Seta Utilizar um table type - Escolhe a opção "Sim", para que o widget, apresente uma estrutura.
Seta Título do widget - Neste campo, deve colocar, um título.
Seta Fonte do widget - Aqui deve por o código acima refere-te a seu versão.
Seta Salvar - Por fim, após colocar o código, terá de "salvar" o seu widget personalizado. E mantenha-se na mesma página.

Exemplo Código
Código:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script>
jQuery(document).ready(function(){
 jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
 link = jQuery('.panel dl:first img', data).attr('src');
      if(link){
        jQuery('#avatar').html('<center><img src="'+link+'" alt=""></center>');
      }else{
        jQuery('#avatar').html('');
      }
 });
});
</script>
<span  id="avatar"><center>Carregando Avatar...</center></span><span style="font-size: 1.2em;"  id="avatar"><br><font size="4"><span id="un">{USERLINK}</span></font><br><b>Mensagens:</b> {USERCOUNTPOST}<br></span><h3 style="border-color: #1675BC;"></h3>

  • Versão 2.0
    Uma nova versão do código que traz mais praticidade e comodidade aos membros com internet lenta, pois este código não usa requesitos diretos para obter a imagem do perfil, e sim do próprio código fonte.

    Código:
    <!--
     * Application: Widget with member avatar and infos
     * Description: This application can displays the member avatar and show other infos!
     * Version: 1.08032014-jq1.9.1 - Avatāra (Sânscrito -> Aval)
     * Made and Optimizations by JScript - 2014/03/08
     * 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
     -->
    <span  id="avatar"></span>
    <span style="font-size: 1.2em;"  id="avatar"><br>
        <font size="4"><span id="un">{USERLINK}</span></font><br>
        <b>Mensagens:</b> {USERCOUNTPOST}<br>
    </span>
    <h3 style="border-color: #1675BC;"></h3>

    <script type="text/javascript">
    //<![CDATA[
        jQuery(function () {
            jQuery('#avatar').html('<center>' + _userdata["avatar"] + '</center>');
        });
    //]]>
    </script>






© Fórum dos Fóruns & JScript



Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Avatar do membro no widget
avatar

ddik
Membro do Fórum

Masculino
Inscrito dia : 01/08/2009
Mensagens : 1787
Pontos Ativos : 2560

Ver perfil do usuário http://vilasims.com/

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


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