Incorporar GIFs animados como o Facebook com jqGifPreview
Twitter e Facebook tem muita gente compartilhando GIFs animados diariamente. Se tudo isso for reproduzido automaticamente, eles podem ser horríveis em um feed.
Ambas as redes contornam isso com um Recurso de clique para visualizar para todos os GIFs. Isso permite que o usuário escolha quais animações eles querem ver escolhendo quando iniciar / parar a animação.
Com o Plugin jqGifPreview, você pode trazer essa mesma funcionalidade para o seu site.
este plugin jQuery gratuito funciona em todos os GIFs da página ou pode segmentar especificamente os que você quiser. É um recurso fantástico, mas demora um pouco para configurar.
Um GIF em pausa é realmente apenas um quadro da animação, exibido na página.
Infelizmente, esse plugin não tirar automaticamente uma foto estática do GIF para voce. Mas, você pode fazer isso usando PHP ou qualquer outra linguagem de backend, então com um pouco de código, isso pode ser automatizado.
Este plugin usa um atributo data- * para armazenar o local da imagem GIF. Depois que o usuário clica na imagem, ela é carregada automaticamente no src atributo da imagem e ser exibido na tela.
Simples, eficaz e definitivamente um efeito legal! Tudo que você precisa é dos arquivos CSS / JS para este plugin que você pode puxe diretamente do GitHub. E claro, você vai precisa de uma cópia do jQuery, também.
De lá, você configura sua imagem assim:
O principal src atributo deve conter a imagem estática. Você pode criar um script para gerá-lo ou editar e carregar manualmente uma foto estática para cada GIF.
o data-gif atributo detém o GIF animado real e eles vão trocar em clique se você segmentar a classe de imagem principal (neste caso, é .myImg). Agora, tudo que você precisa é de uma linha de jQuery para fazer tudo funcionar:
$ (". myImg"). jqGifPreview (); Definitivamente, um dos plugins mais legais do jQuery que eu vi este mês e é muito fácil de configurar.
Você pode aprender mais visitando o Página do GitHub e há também um visualização de demonstração ao vivo hospedado no site do desenvolvedor.
