Tire suas dúvidas sobre BBCode.
  • Avatar do usuário
  • Avatar do usuário
  • Avatar do usuário
By Maf3r0
Posts
#290452
Qual a URL do seu fórum: http://macinpc.hostzi.com/forum
Tipo de Hospedagem: Free
Qual a versão do phpBB: phpBB 3.0.12
É um novo ou uma conversão: Instalação Limpa
Usuário de teste: Usuário: N/D Senha: N/D
Estilos instalados: subsilver2
Modificações instaladas: N/D
Qual seu nivel de experiência: Intermediário
Quando começou o problema: Não é problema, apenas uma ajuda.
Descreva seu problema: Gostaria da sugestão de pessoas mais qualificadas para tentar incrementar um bbcode que exibe uma miniatura de imagem e quando o mouse passa ela é exibida em 100%. Eis o bbcode:
Código: Selecionar todos
[imgsize]{URL}[/imgsize]

<img style="max-width:200px;" src="{URL}" onmouseover="this.style.maxWidth='100%'" onmouseout="this.style.maxWidth='200px'">
A minha dúvida é se dá para acrescentar um pequeno delay para exibição da imagem real, tipo: ao passar o mouse, um delay de 1s, para só então exibir a imagem em 100%. Na volta para miniatura o delay é desnecessário, apenas para exibição em 100%.

Já tentei de tudo: delay(5000), delay: 500, timeout function, mas não entendo essa propriedade e desisti.

É possível acrescentar essa função?
By robra
#290455
Não sou programador mas uma rápida busca no Google por "onmouseover delay" trouxe vários resultados sobre a criação de um código javascript setTimeout para fazê-lo funcionar. Este código deverá ser inserido no BBcode existente.

Abraço. Imagem
By Maf3r0
Posts
#290458
kkkkkkkkkkkkkk
pois é, também não sou programador e de java eu não entendo nada.
tentei usar esse "timeout" mas sem sucesso, de qualquer forma obrigado pela atenção.
abraço!
Avatar do usuário
By Chico Gois
Membership Days Avatar
#290459
Tenta o seguinte:
Código: Selecionar todos
<style> 
div
{
transition-property:width;
transition-duration:5s;
transition-delay:2s;

/* Safari */
-webkit-transition-property:width; 
-webkit-transition-duration:5s;
-webkit-transition-delay:2s;
}
</style>
<img style="max-width:200px;" src="{URL}" onmouseover="this.style.maxWidth='100%'" onmouseout="this.style.maxWidth='200px'">
Mais informações: http://www.w3schools.com/cssref/css3_pr ... -delay.asp
By Maf3r0
Posts
#290464
Puxa, muito obrigado Chico Goes.

O código que você postou não deu certo porque ele era destinado ao exemplo lá do site. Mas, consegui criar o bbcode graças a sua indicação: w3schools. Dei uma estudada no HTML do link e consegui entender o bendito.

O evento onmouseover me irritava bastante porque o simples fato de passar o mouse (mesmo que rápido) já ampliava/diminuia a imagem. Um saco. Agora não, com o delay a imagem só amplia quando o mouse para em cima dela — ou seja, quando eu quero mesmo ver aquela imagem.

Antes tive que dividir o bbcode entre o HTML e a folha CSS, mas o robra deu uma dica que funcionou. Agora consegui EXATAMENTE o que queria e só com o HTML, veja:

BBCode
Código: Selecionar todos
[imgsize]{URL}[/imgsize]
Substituição do HTML
Código: Selecionar todos
<img id="imgsize" src="{URL}" />
<style>
#imgsize {
   width:20%;
   height:20%;

   transition-property:width, height;
   transition-duration:0.5s;
   transition-delay:0.2s;

   /* Apenas para o Safari */
   -webkit-transition-property:width, height;
   -webkit-transition-duration:0.5s;
   -webkit-transition-delay:0.2s;
}

#imgsize:hover {
   width:100%;
   height:100%;
}
</style>
Obrigado robra e Chico Goes pela atenção prestada — mesmo em se tratando de um assunto que não diz respeito ao phpbb. Vou postar isso na sessão dos bbcodes, talvez interesse a mais alguém.

viewtopic.php?f=153&t=48755&p=290465#p290465

Abraço. Até a próxima.
Editado pela última vez por Maf3r0 em 24 Fev 2014, 22:13, em um total de 1 vez.
By robra
#290466
Mas o CSS você incluiu a parte, fora do BBcode :?:
Dentro do código, ficaria desta forma:
Código: Selecionar todos
<img id="imgsize" src="{URL}" />
<style>
#imgsize {
   width:20%;
   height:20%;

   transition-property:width, height;
   transition-duration:0.5s;
   transition-delay:0.2s;

   /* Apenas para o Safari */
   -webkit-transition-property:width, height;
   -webkit-transition-duration:0.5s;
   -webkit-transition-delay:0.2s;
}

#imgsize:hover {
   width:100%;
   height:100%;
}
</style>
Testou desta forma :?:

Abraço. Imagem
By Maf3r0
Posts
#290467
kkkkkkkkkkkk

e não é que deu?!

Quando eu tava testando, não consegui de jeito nenhum. Não sei se foi confusão que fiz na elaboração do código ou se foi o modo que testei — naqueles sites de edição HTML em realtime. O que importa é que agora está bem melhor usando tudo no HTML. Valeu pela diga robra.

Vou atualizar lá no post dos bbcodes, abraço.
Avatar do usuário
By jhugor
Posts Avatar
#295254
olá amigos

uso a 3.2...

nao funcionou pra mim... já li tudo sobre redimensionamento de imagem, ainda tentando

alguem pode dar uma luz ?


valeu

Olá, eu uso a versão 3.2 do phpbb Us[…]

PHP XML/DOM support (RESOLVIDO)

Bom pessoal, consegui resolver de uma forma relati[…]

Tópicos e mensagens

Obrigado pelo "alerta". As permiss&oti[…]