[TUTORIAL] Ficha de personagem em lightbox

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

[TUTORIAL] Ficha de personagem em lightbox

Mensagem por Ace em 14/06/13, 01:23 pm



Ficha de personagem em lightbox

É comum acedermos ao perfil de algum membro para visualizar sua ficha de personagem, mas, nem sempre temos paciência de esperar a página carregar, então neste tutorial iremos aprender a colocar a ficha de personagem em tooltip, fazendo assim uma apresentação mais rápida e muito mais elegante. Ele funcionará da seguinte forma, ao clicarmos no nome do usuário de algum utilizador o efeito é ativado e a ficha de personagem é automaticamente mostrada.


--> Tutoriais, dicas e astúcias <--
Ficha de personagem em lightbox



- Adicionando o código CSS
Para que o efeito de elegância seja feito precisaremos, é claro, de códigos CSS para sustentar, então iremos aceder ao: Painel de controle -> Visualização -> Imagens e Cores -> Cores -> Aba 'Folha de estilo CSS'

Iremos adicionar este código e clicar em validar:
#profile-tip {
position: fixed;
top: 50%;
left: 30%;
background: white;
padding: 10px;
border: 1px solid black;
box-shadow: 0 0 50px black;
border-radius: 20px;
z-index: 9999 !important;
}
#profile-tip .panel {
background: transparent !important;
}
.column2 {
float: none !important;
}
#close-profile {
cursor: pointer;
padding: 5px;
position: absolute;
left: -15px;
top: -25px;
}
#prevBG{background:rgba(0, 0, 0, 0.31);bottom:0;left:0;position:fixed;right:0;top:0;z-index:99!important}


- Adicionando o código Js
Como o efeito é complexo usaremos também códigos Javascript, por isto iremos aceder ao Painel de controle -> Modulos -> HTML e Javascript -> Gestão dos códigos Javascript
Clicaremos no botão escrito "Criar um código java Script", e então colocaremos estas propriedades:
(carregue na imagem para aumentar)

Seta Titulo O que desejar, não irá interferir no código.
Seta Investimento Deve estar marcada a opção "Em todas as páginas".
Seta Código Javascript
Código:
jQuery(document).ready(function() { jQuery('a[href^="/u"]').click(function(e) {e.preventDefault();  var link = jQuery(this).attr('href'), t = jQuery(this).find('strong').html(); jQuery.get(link + 'rpg',function(data) { var i = jQuery('div.panel div.inner', data).html(); jQuery('body').prepend('<div id="prevBG"></div><div id="profile-tip">    <span id="close-profile"><img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/48/Alarm-Error-icon.png" /></span>        <strong><a href="' + link + '">' + t + '</a></strong>' + i + '</div>');
 jQuery("#close-profile").click(function() { jQuery("#prevBG, #profile-tip").fadeOut(); });
 }); }); });


- Resultado
Resultado atravez de uma imagem:

(carregue na imagem para aumentar)




© Fórum dos Fóruns


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Ficha de personagem em lightbox
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11605

Ver perfil do usuário https://ajuda.forumeiros.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