Buat Kotak Lightbox penuh Responsif dan Cantik dengan BaguetteBox.js

Disana ada puluhan pemalam peti cahaya dan mereka semua hebat kerana sebab yang berbeza. Sesetengah bekerja lebih baik di laman web portfolio manakala yang lain adalah yang terbaik untuk susun atur responsif.

Tetapi, salah satu plugin kegemaran saya yang baru digunakan ialah baguetteBox.js, dicipta oleh pemaju JavaScript Marek Grzybek.

Sudah tentu, plugin ini benar-benar bebas untuk digunakan dan sumber terbuka pada GitHub jika anda ingin menggali kod secara manual.

Perpustakaan tidak mempunyai sebarang kebergantungan, jadi anda boleh menjalankannya tanpa jQuery, Zepto, atau apa-apa lagi. Ianya adalah pustaka JavaScript tulen dengan persediaan yang sangat mudah.

Ia dimaksudkan untuk berfungsi dengan sempurna di peranti mudah alih, jadi ia boleh menyokong swipes dan paip, bersama-sama dengan kelakuan lalai pada desktop & komputer riba. Ia adalah salah satu dari beberapa galeri skrin penuh yang menyokong interaksi mudah alih, bersama-sama dengan kesan modal penuh.

Semak halaman demo untuk melihatnya hidup dalam tindakan. Ia mempunyai galeri yang dipaparkan sepenuhnya, bersama dengan satu baris kod yang diperlukan untuk mendapatkannya berfungsi:

 baguetteBox.run ('. baguetteBoxOne'); 

Jadi ini mensasarkan elemen kontena dengan kelas .baguetteBoxOne dan keseluruhan galeri berfungsi.

Kamu boleh tetapkan pilihan tersuai jika anda ingin perkara seperti kapsyen, gaya butang, ciri pramuat, dan kaedah panggilan semula untuk acara onclick / onchange. Semua pilihan ini adalah didokumentasikan dengan baik pada GitHub jika anda mahu menyelam masuk.

Tetapi, ia tidak mengambil banyak untuk mendapatkan ini melampaui elemen kontena dan beberapa elemen imej asas.

Anda mempunyai kawalan penuh melalui animasi, saiz imej, kesan sapu, dan kandungan galeri seperti tajuk / kapsyen. Ini tidak memerlukan JavaScript, jadi ia tidak mempunyai alternatif CSS tulen untuk modal. Tetapi, kerana kebanyakan pelayar menyokong JavaScript, ia tidak sepatutnya menjadi masalah.

Untuk mengetahui lebih lanjut, lawati halaman utama baguetteBox.js dan anda juga boleh berkongsi pendapat anda dengan pencipta di Twitter @feimosi.