Incorpora GIF animate come Facebook con jqGifPreview
Twitter e Facebook hanno un sacco di gente condivisione di GIF animate quotidiano. Se questi sono tutti riprodotti automaticamente potrebbero essere raccapriccianti in un feed.
Entrambe le reti aggirano questo problema con a funzione click-to-preview per tutte le GIF. Ciò consente all'utente di scegliere quali animazioni vogliono vedere scegliendo quando avviare / interrompere l'animazione.
Con il plugin jqGifPreview, puoi portare questa stessa funzionalità al tuo sito web.
Questo plugin gratuito jQuery funziona su tutte le GIF sulla pagina o può indirizzare in modo specifico qualsiasi cosa tu voglia. È una risorsa fantastica, ma richiede un po 'di tempo per iniziare.
Una GIF in pausa è davvero giusta un fotogramma dell'animazione, visualizzato sulla pagina.
Sfortunatamente, questo plugin non tira automaticamente un'immagine statica dalla GIF per te. Ma puoi farlo usando PHP o qualsiasi altro linguaggio di back-end, quindi con un po 'di codice questo può essere automatizzato.
Questo plugin usa un attributo data- * per memorizzare la posizione dell'immagine GIF. Una volta che l'utente fa clic sull'immagine, verrà automaticamente caricato nel src attributo dell'immagine e essere visualizzato sullo schermo.
Semplice, efficace e decisamente un effetto pulito! Tutto ciò di cui hai bisogno sono i file CSS / JS per questo plugin che puoi tirare direttamente da GitHub. E naturalmente, lo farai ho bisogno di una copia di jQuery, pure.
Da lì, imposti la tua immagine in questo modo:
Il principale src attributo dovrebbe contenere l'immagine statica. Puoi creare uno script per generarlo oppure puoi modificare e caricare manualmente uno scatto statico per ogni GIF.
Il Dati-gif attributo contiene la vera GIF animata e si scambieranno a clic se tu scegli come target la classe dell'immagine principale (in questo caso, lo è .myImg). Ora, tutto ciò che serve è una riga di jQuery per far funzionare tutto:
$ ( "MyImg.") JqGifPreview ().;
Sicuramente, uno dei plugin jQuery più interessanti che ho visto questo mese ed è abbastanza facile da configurare.
Puoi saperne di più visitando il Pagina GitHub e c'è anche a anteprima demo dal vivo ospitato sul sito Web dello sviluppatore.
