Buat Lightbox satu halaman penuh Responsif dan Cantik dengan BaguetteBox.js
Ada puluhan plugin lightbox dan mereka semua hebat untuk alasan yang berbeda. Beberapa bekerja lebih baik di situs portofolio sementara yang lain terbaik untuk tata letak responsif.
Tapi, salah satu plugin baru favorit saya untuk digunakan adalah baguetteBox.js, dibuat oleh pengembang JavaScript Marek Grzybek.
Tentu saja, plugin ini benar-benar gratis untuk digunakan dan bersumber terbuka di GitHub jika Anda ingin menggali kode secara manual.
Perpustakaan tidak memiliki dependensi, sehingga Anda dapat menjalankannya tanpa jQuery, Zepto, atau apa pun. Itu adalah perpustakaan JavaScript murni dengan pengaturan yang sangat sederhana.
Itu dimaksudkan untuk berfungsi dengan baik di perangkat seluler, sehingga dapat mendukung gesekan dan ketukan, bersama dengan perilaku default di desktop & laptop. Itu salah satu dari beberapa galeri layar penuh itu mendukung interaksi seluler, bersama dengan efek modal penuh.
Lihat halaman demo untuk melihatnya hidup dalam aksi. Ini memiliki galeri berfitur lengkap, bersama dengan diperlukan satu baris kode untuk membuatnya berfungsi:
baguetteBox.run ('. baguetteBoxOne'); Jadi ini menargetkan elemen kontainer dengan kelas .baguetteBoxOne dan seluruh galeri berhasil.
Anda bisa setel opsi khusus jika Anda menginginkan hal-hal seperti teks, gaya tombol, fitur preload, dan metode panggilan balik untuk acara onclick / onchange. Semua opsi ini adalah didokumentasikan dengan baik di GitHub jika Anda ingin menyelam.
Tapi, itu benar-benar tidak butuh banyak untuk mendapatkan ini melampaui elemen kontainer dan beberapa elemen gambar dasar.
Kamu memiliki kontrol penuh atas animasi, ukuran gambar, efek gesek, dan konten galeri seperti judul / keterangan. Ini memang membutuhkan JavaScript, sehingga tidak memiliki alternatif CSS murni untuk modal. Tapi, karena sebagian besar browser mendukung JavaScript, itu seharusnya tidak menjadi masalah.
Untuk mempelajari lebih lanjut, kunjungi halaman utama baguetteBox.js dan Anda juga dapat berbagi pemikiran Anda dengan pembuatnya di Twitter @feimosi.
