Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mixofertasadm

Animação Gif (Gif On Hover) - Ajuda com Código

Por , em Desenvolvimento com Wordpress

Recommended Posts

mixofertasadm    0

mixofertasadm
Postado

Boa noite, prezados.

Gostaria, se possível, de uma ajuda.

SOU INICIANTE, ESTOU APRENDENDO A MEXER NO WORDPRESS.

Estou criando um site de vídeos, e preciso de uma dica quanto
à imagem destacada.

bom,
A imagem destacada do vídeo é uma Gif, porém, gostaria que essa gif
"ativasse" somente quando o mouse passasse por cima dela (Mouse over ou on Hover, não sei o correto)
Ex:

docs.embed.ly/docs/tutorial-play-and-stop-gifs

Até o momento, eu fiz o seguinte:

- No arquivo Header.php, eu coloquei o seguinte código

<Head>
<script>
}).on('mouseleave', function(){
var $this = $(this);
// Make sure the load function knows we are no longer in a hover state.
$this.data('hover', false);
// Remove the spiner if it's there.
$this.find('.gif-loading').remove();
// Set the src to the static url.
$this.find('img.gif-holder').attr('src', $(this).data('static_url'));
});
</script>
<style type="text/css">
.gifs a {
position: relative;
display: block;
}
.gif-preload {
display: none;
}
.gif-loading {
position: absolute;
width: 40px;
height: 40px;
font-size: 40px;
color: #fff;
top: 0;
left: 0;
}
</style>
</head>

- No arquivo Function.php, coloquei o seguinte código:

<?php
the_post_thumbnail('post-thumbnail', array('class' => 'gifs attachment-post-thumbnail'));
?>

DUVIDAS:

1ª- Os códigos estão certos ??
2ª- Onde colocar esses códigos ?

Abraços.

Aguardo uma ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento com Wordpress

  • Conteúdo Similar

    • subtu
      Gif com rastro no Photoshop
      Por subtu
      Olá!
       
      Estou tentando fazer gifs transparentes no Photoshop.

      Para cada quadro, deixo uma camada visível.
       
      Quando aperto Play a animação aparece perfeita, mas quando exporto, ele deixa um rastro dos frames anteriores (não quero isso).

      Como faço? Já procurei tudo quanto site e configuração e nada funciona, segue exemplo:
       
       

    • Marcos Lima
      Adicionar GIF no Python Processing
      Por Marcos Lima
      Boa tarde, pessoal. Gostaria de saber qual o procedimento para adição de gif em python (no Processing).
       
      Gostaria de colocar um fundo animado (gif) no meu projeto, mas não estou conseguindo.
       
      Obrigado pela atenção
       
      GIF abaixo:
      >>> https://media.giphy.com/media/xUA7aW1ddSxtVT5zzi/giphy-downsized.gif <<<
    • ivanalbu
      Como colocar uma gif animada mostrando o % que já foi processado?
      Por ivanalbu
      Pessoal do forum:
       
      Tenho um programa feito no VS2017, asp, vb.net que demora 1 minuto de processamento. Como colocar uma gif animada mostrando o % que já foi processado?
       
      Grato pela orientação.
      Ivan Albuquerque
    • Kleber Augusto Wilcke
      Iniciar animação de gif apenas depois de clicado com o mouse sobre ele
      Por Kleber Augusto Wilcke
      Boa noite, existe algum código em php que me permita iniciar a animação de um gif apenas depois que eu clicar sobre ele? Deve ter a imagem do primeiro frame do gif aparecendo no navegador, quando eu clicar no gif deve iniciar a animação e quando a animação acabar parar (não dar loop). Obrigado.
    • Kleber Augusto Wilcke
      Iniciar animação de gif apenas depois de clicado com o mouse sobre ele
      Por Kleber Augusto Wilcke
      Boa noite, existe algum código em php que me permita iniciar a animação de um gif apenas depois que eu clicar sobre ele? Deve ter a imagem do primeiro frame do gif aparecendo no navegador, quando eu clicar no gif deve iniciar a animação e quando a animação acabar parar (não dar loop). Obrigado.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito