Embed GIF Animasi Seperti Facebook dengan jqGifPreview
Twitter dan Facebook memiliki banyak orang berbagi GIF animasi harian. Jika semua ini dimainkan secara otomatis, itu bisa mengerikan dalam umpan.
Kedua jaringan menyiasati ini dengan fitur klik untuk pratinjau untuk semua GIF. Ini memungkinkan pengguna memilih animasi apa yang ingin mereka lihat dengan memilih kapan memulai / menghentikan animasi.
Dengan Plugin jqGifPreview, Anda dapat membawa fungsionalitas yang sama ini ke situs web Anda.
Ini plugin jQuery gratis bekerja pada semua GIF di halaman, atau dapat secara khusus menargetkan apa pun yang Anda inginkan. Ini adalah sumber yang fantastis tetapi membutuhkan sedikit waktu untuk menyiapkan.
GIF yang dijeda benar-benar adil satu bingkai animasi, ditampilkan di halaman.
Sayangnya, plugin ini tidak secara otomatis menarik foto statis dari GIF untukmu. Tapi, Anda bisa melakukannya menggunakan PHP atau bahasa backend lainnya, jadi dengan sedikit kode, ini bisa otomatis.
Plugin ini menggunakan atribut data- * untuk menyimpan lokasi gambar GIF. Setelah pengguna mengklik gambar, itu akan secara otomatis memuat ke src atribut gambar dan ditampilkan di layar.
Sederhana, efektif, dan pastinya efek yang rapi! Yang Anda butuhkan hanyalah file CSS / JS untuk plugin ini yang Anda bisa tarik langsung dari GitHub. Dan tentu saja, Anda akan melakukannya butuh salinan jQuery, terlalu.
Dari sana, Anda mengatur gambar Anda seperti ini:
Utama src atribut harus berisi gambar statis. Anda dapat membuat skrip untuk membuatnya, atau Anda dapat mengedit & mengunggah bidikan statis secara manual untuk setiap GIF.
Itu data-gif atribut memegang GIF animasi yang sebenarnya dan mereka akan bertukar klik jika Anda menargetkan kelas gambar utama (dalam hal ini, ini .myImg). Sekarang, yang Anda butuhkan hanyalah satu baris jQuery untuk membuatnya bekerja:
$ (". myImg"). jqGifPreview (); Jelas, salah satu plugin jQuery paling keren yang pernah saya lihat bulan ini dan cukup mudah diatur.
Anda dapat mempelajari lebih lanjut dengan mengunjungi Halaman GitHub dan ada juga a preview demo langsung dihosting di situs web pengembang.
