Thumbnail’ı Google Görselleri Gibi Nasıl Genişletirim?
Google Görseller, birçok farklı web sitesinden küçük resim önizlemeleri ile benzersiz bir kullanıcı arayüzü yürütür. Bu küçük resimlerin herhangi birine tıklamak, ekranı daha ayrıntılı ve daha büyük bir resimle genişletir.
En iyi resim galerisi özelliklerinden biridir ve şimdi Gridder.js ile kendiniz de bir galeri oluşturabilirsiniz.
Bu ücretsiz jQuery eklentisi, bu efektle eşleşen bir eklenti oluşturarak Google’ın inanılmaz UX’lerinin izlerini takip ediyor. Herhangi bir fotoğraf galerisini, aynı canlandırma ve görüntüleme özellikleriyle Google Görseller tarzı bir galeri haline getirebilirsiniz.
Bu eklentiyi öne çıkaran şey hızlı ve kullanımı kolay olmasıdır. Küçük resimlerden birine tıkladığınızda hemen daha büyük bir resim açılır ve bu iş animasyonlarla yapılır.
Resimlerle ilgili bazı ayrıntılar veya bağlantılar eklemek isterseniz, açıklayıcı metin için bir bölüm içerir. Bu, özellikle resimlere odaklanma amacı taşıyan basit portföy siteleri için çok iyi çalışır.
Bunun üzerine, Ajax vasıtasıyla da içerik çekebilirsiniz. Bu, diğer web sitelerinden veya API’lardan içerik çeken dinamik küçük resimler oluşturmanızı sağlar.
Her tıklama olayı bir callback yöntemi sunar, böylece Gridder’ın yanında diğer eklentileri veya JavaScript işlevlerini çalıştırabilirsiniz.
Gridder jQuery üzerinde çalıştığından beri yeni sürümün bir bağımlılık olarak kullanılmasını gerektirir. Ancak ihtiyacınız olan şey Gridder.js dosyalarıyla birlikte birkaç satır HTML ile kılavuzunuzun sorunsuz çalışmasını sağlayabilirsiniz.
Tam kurulum talimatları için GitHub sayfasını kontrol etmelisiniz, ancak HTML’ın nasıl olduğunu görmek için sizlere küçük bir demo:
Tüm içerik JavaScript ile çekilir, bu nedenle istediğiniz her şeyi yükleyebilirsiniz.
Kullanıcı, yeni bir minyatürü tıkladığında animasyon hızını, kolaylaştırmayı, kapat düğme stilini ve kaydırma ofset konumunu değiştirmek için seçenekler içeren inanılmaz derecede çok yönlü bir eklentidir.
Yeni başlayanlar ve profesyonel geliştiriciler bu eklentiyi çok değerli bulacak. Bununla birlikte, bu eklentinin ihtiyaçlarınızı karşılayıp karşılamayacağını anlamak için, Gridder demo sayfasını inceleyin ve test edin.
Bu makalede resim galerisini Google görsellerde olduğu gibi göstermenizi sağlayacak Gridder JavaScript kütüphanesinden bahsettik. Siz de düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.
