Insertar GIF animados como Facebook con jqGifPreview
Twitter y Facebook tienen mucha gente. compartiendo GIFs animados diario. Si estos son todos reproducidos automáticamente, podrían ser espantosos en un feed.
Ambas redes solucionan esto con una función de hacer clic para previsualizar para todos los GIFs. Esto permite al usuario elegir que animaciones quieren ver eligiendo cuándo iniciar / detener la animación.
Con el jqGifPreview plugin, Puedes traer esta misma funcionalidad a tu sitio web..
Esta plugin gratis de jQuery funciona en todos los GIF de la página, o puede dirigirse específicamente a cualquiera que desee. Es un recurso fantástico pero toma un poco de tiempo configurar.
Un GIF en pausa es realmente justo un cuadro de la animacion, mostrado en la página.
Desafortunadamente, este plugin no tirar automáticamente una foto estática desde el GIF para ti. Pero, puede lograr esto utilizando PHP o cualquier otro lenguaje de fondo, por lo que con un poco de código, esto puede ser automatizado.
Este plugin usa un atributo data- * para almacenar la ubicación de la imagen GIF. Una vez que el usuario haga clic en la imagen, se cargará automáticamente en la src Atributo de la imagen y se mostrará en la pantalla..
Simple, efectivo y definitivamente un buen efecto! Todo lo que necesita son los archivos CSS / JS para este complemento que pueda tirar directamente de GitHub. Y por supuesto, te necesito una copia de jQuery, también.
A partir de ahí, configuras tu imagen así:
El principal src atributo debería contiene la imagen estática. Puede crear un script para generarlo, o puede editar y cargar manualmente un disparo estático para cada GIF.
los datos-gif atributo tiene el verdadero GIF animado e intercambiarán clic si apuntar a la clase de imagen principal (en este caso, es .myImg). Ahora, todo lo que necesita es una línea de jQuery para que todo funcione:
$ (". myImg"). jqGifPreview (); Definitivamente, uno de los complementos de jQuery más geniales que he visto este mes y es bastante fácil de configurar.
Puedes aprender más visitando el Página de GitHub y también hay un vista previa de demostración en vivo alojado en el sitio web del desarrollador.
