Incrustar GIF animados como Facebook con jqGifPreview

Twitter y Facebook tienen mucha gente que comparte GIF animados diariamente. Si todo esto se reproduce automáticamente, podría ser espantoso en un feed.

Ambas redes solucionan esto con una función de hacer clic para previsualizar todos los archivos GIF. Esto le permite al usuario elegir qué animaciones quieren ver eligiendo cuándo iniciar / detener la animación.

Con el complemento jqGifPreview, puede llevar esta misma funcionalidad a su sitio web.

Este plugin jQuery gratuito funciona en todos los GIF de la página, o puede dirigirse específicamente a cualquier que desee. Es un recurso fantástico, pero toma un poco de tiempo configurarlo.

Un GIF en pausa es realmente solo un cuadro de la animación, que se muestra en la página.

Lamentablemente, este complemento no extrae automáticamente una imagen estática del GIF . Pero puede lograr esto usando PHP o cualquier otro lenguaje de servidor, de modo que con un poco de código, esto puede ser automatizado.

Este complemento utiliza un atributo data- * para almacenar la ubicación de la imagen GIF . Una vez que el usuario hace clic en la imagen, se cargará automáticamente en el atributo src de la imagen y se mostrará en la pantalla.

¡Simple, efectivo, y definitivamente un efecto limpio! Todo lo que necesita son los archivos CSS / JS para este complemento que puede extraer directamente de GitHub . Y, por supuesto, también necesitará una copia de jQuery .

A partir de ahí, configura su imagen de esta manera:

El atributo src principal debe contener la imagen estática . Puede crear un script para generarlo, o puede editar y cargar manualmente un disparo estático para cada GIF.

El atributo data-gif contiene el GIF animado real y cambiarán al hacer clic si se dirige 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 mejores plugins de jQuery que he visto este mes y es bastante fácil de configurar.

Puede obtener más información visitando la página de GitHub y también hay una vista previa de demostración en vivo alojada en el sitio web del desarrollador.

10 canales de Youtube bellamente diseñados

YouTube es uno de esos sitios web mega populares que probablemente nunca mueran. Las empresas, al darse cuenta de esto, han comenzado a crear canales profesionales para sus empresas, principalmente para el esfuerzo de marketing.Si planea lanzar un canal de YouTube como campaña de marketing, tómese el tiempo para aprender de los mejores.

(Consejos de tecnología y diseño)

15 Consejos de Google Fotos para usuarios avanzados

En la superficie, Google Photos es una herramienta simple que organiza automáticamente tus fotos y videos basados ​​en diferentes factores . Sin embargo, si echamos un vistazo más profundo, se esconden toneladas de nuevas características increíbles que pueden hacer que la organización de fotos sea muy fácil.Tanto si

(Consejos de tecnología y diseño)