Anasayfa » UI / UX » Animasyonlu GIF'leri Göm jqGifPreview ile Facebook'u beğenin

    Animasyonlu GIF'leri Göm jqGifPreview ile Facebook'u beğenin

    Twitter ve Facebook'ta birçok insan var animasyonlu GIF paylaşma günlük. Bunların hepsi otomatik olarak oynanırsa, bir feed'de ürkütücü olabilirler.

    Her iki ağ da bununla bir tıkla önizleme özelliği Tüm GIF'ler için. Bu, kullanıcının seçim yapmasını sağlar hangi animasyonları görmek istiyorlar Animasyonun ne zaman başlatılacağını / durdurulacağını seçerek.

    İle jqGifPreview eklentisi, bu aynı işlevi web sitenize getirebilirsiniz.

    Bu ücretsiz jQuery eklentisi Sayfadaki tüm GIF’ler üzerinde çalışır veya özellikle istediğinizi hedefleyebilir. Bu fantastik bir kaynak ancak kurulması biraz zaman alıyor.

    Duraklatılmış bir GIF gerçekten adil animasyonun bir karesi, sayfada görüntülendi.

    Ne yazık ki, bu eklenti değil GIF'ten otomatik olarak statik bir resim çekin senin için. Ancak, PHP veya başka bir arka uç dilini kullanarak bunu başarabilirsiniz, bu nedenle biraz kodla bu otomatikleştirilebilir..

    Bu eklenti bir data- * niteliği kullanır. GIF resmin konumunu sakla. Kullanıcı resmi tıkladığında, otomatik olarak görüntüye yüklenir. src Resmin niteliği ve ekranda gösterilmesi.

    Basit, etkili ve kesinlikle temiz bir efekt! Tek ihtiyacınız olan bu eklenti için CSS / JS dosyaları. doğrudan GitHub'dan çekin. Ve tabii ki jQuery'nin bir kopyasına ihtiyacınız var, çok.

    Oradan, resminizi şöyle ayarladınız:

      

    Ana src özellik olmalıdır statik resmi içer. Oluşturmak için bir komut dosyası oluşturabilir veya her GIF için bir statik çekim el ile düzenleyebilir ve yükleyebilirsiniz.

    Veri GIF nitelik gerçek animasyonlu GIF’i tutar ve eğer tıklarsanız takas ederler ana resim sınıfını hedefle (bu durumda, bu .myImg). Şimdi, ihtiyacınız olan tek şey, hepsini çalıştırmak için jQuery'nin bir satırı:

     $ ( "MyImg.") JqGifPreview ().; 

    Kesinlikle, bu ay gördüğüm en havalı jQuery eklentilerinden biri ve kurulumu oldukça kolay.

    Adresini ziyaret ederek daha fazla bilgi edinebilirsiniz. GitHub sayfası ve ayrıca bir canlı demo önizlemesi geliştiricinin web sitesinde barındırılan.