Gif Animated Embed Seperti Facebook dengan jqGifPreview

Twitter dan Facebook mempunyai banyak orang berkongsi GIF animasi setiap hari. Sekiranya semua ini dimainkan secara automatik, mereka boleh mengerikan dalam makanan.

Kedua-dua rangkaian mendapatkan sekitar ini dengan a ciri klik untuk pratonton untuk semua GIF. Ini membolehkan pengguna memilih animasi yang mereka mahu lihat dengan memilih masa untuk memulakan / menghentikan animasi.

Dengan jqGifPreview plugin, anda boleh membawa kefungsian yang sama ke laman web anda.

Ini plugin jQuery percuma berfungsi pada semua GIF di halaman, atau boleh menargetkan mana-mana yang anda mahukan. Ia adalah sumber yang hebat tetapi mengambil sedikit masa untuk ditubuhkan.

GIF dijeda betul-betul adil satu bingkai animasi, dipaparkan pada halaman.

Malangnya, plugin ini tidak secara automatik tarik gambar statik dari GIF untuk anda. Tetapi, anda boleh melakukannya menggunakan PHP atau mana-mana bahasa backend lain, jadi dengan sedikit kod, ini boleh diautomatikasikan.

Plugin ini menggunakan data- * attribute to simpan lokasi imej GIF. Sebaik sahaja pengguna mengklik imej, ia akan dimuat secara automatik ke dalamnya src atribut imej dan dipaparkan pada skrin.

Mudah, berkesan, dan pasti kesan yang kemas! Apa yang anda perlukan adalah fail CSS / JS untuk plugin ini yang anda boleh tarik terus dari GitHub. Dan tentu saja, awak akan memerlukan salinan jQuery, juga.

Dari sana, anda menyediakan imej anda seperti ini:

Yang utama src atribut sepatutnya mengandungi gambar statik. Anda sama ada boleh membina skrip untuk menjananya, atau anda boleh mengedit & memuat naik tangkapan statik secara manual untuk setiap GIF.

The data-gif atribut memegang GIF animasi sebenar dan mereka akan menukar pada klik jika anda targetkan kelas imej utama (dalam kes ini, ia .myImg). Sekarang, semua yang anda perlukan adalah satu baris jQuery untuk mendapatkan semuanya berfungsi:

 $ (". myImg"). jqGifPreview (); 

Sudah tentu, salah satu plugin jQuery yang paling sejuk yang saya lihat bulan ini dan ia cukup mudah untuk ditubuhkan.

Anda boleh mempelajari lebih lanjut dengan melawat Halaman GitHub dan ada juga a pratonton demo langsung dihoskan pada laman web pemaju.