BaguetteBox.js ile Duyarlı ve Güzel Tam Sayfa Lightbox oluşturun

Var onlarca lightbox eklentisi ve hepsi harika farklı sebeplerden dolayı. Bazıları portföy sitelerinde daha iyi çalışır, bazıları duyarlı düzenler için en iyisidir.

Ancak, en sevdiğim yeni eklentilerden biri baguetteBox.js, JavaScript geliştiricisi Marek Grzybek.

Elbette, bu eklentiyi kullanmak için tamamen ücretsizdir ve kodu elle girmek istiyorsanız GitHub'ta açık kaynaklı.

Kütüphane hiçbir bağımlılığı yok, jQuery, Zepto veya başka herhangi bir şey olmadan çalıştırabilirsiniz. Bu bir Gerçekten basit bir kurulum ile saf JavaScript kitaplığı.

Bunun anlamı mobil cihazlarda mükemmel çalışır, bu sayede, masaüstlerinde ve dizüstü bilgisayarlarda varsayılan davranışla birlikte hızlıca dokunup dokunmayı destekleyebilir. Bu birkaç tam ekran galerilerden biri Tam modal efektle birlikte mobil etkileşimleri destekleyin.

Kontrol et demo sayfası eylem halinde yaşadığını görmek için. İle birlikte tam özellikli bir galeriye sahiptir. çalışmasını sağlamak için bir kod satırı gerekir:

 baguetteBox.run ( 'baguetteBoxOne'); 

Yani bu sınıfı olan bir konteyner öğesini hedefler .baguetteBoxOne ve tüm galeri kapalı çalışıyor.

Yapabilirdiniz özel seçenekleri ayarla Başlıklar, düğme stilleri, önyükleme özellikleri ve onclick / onchange olayları için geri çağırma yöntemleri gibi şeyler istiyorsanız. Bu seçeneklerin tümü GitHub'da iyi belgelenmiş eğer dalmak istersen.

Ancak, bunun bir konteyner öğesinin ve bazı temel görüntü öğelerinin ötesine geçmesi pek de gerekmiyor..

Sen tam kontrol sahibi olmak animasyonlar, resim boyutları, kaydırma efektleri ve başlıklar / resim yazıları gibi galeri içeriği üzerinde. Bu JavaScript gerektiriyor, bu yüzden modal için saf bir CSS alternatifi yok. Ancak, çoğu tarayıcı JavaScript'i desteklediğinden sorun olmamalıdır.

Daha fazla bilgi için, baguetteBox.js ana sayfasını ziyaret edin ve düşüncelerinizi Twitter'da @feimosi'deki içerik oluşturucu ile paylaşabilirsiniz..