Cara Zum Imej seperti Medium
Platform blog Medium menggunakan a kesan zoom imej tersuai di laman blog mereka. Apabila pengguna mengklik imej, ia akan secara automatik zum ke saiz yang lebih besar.
Ia adalah kesan yang hebat dan pasti unik kepada Medium, tetapi ia tidak pernah menjadi sesuatu yang mudah disalin.
Sekarang, dengan MediumLightbox skrip, ia lebih mudah berbanding sebelum ini. Skrip JS ini ringan dan mudah ditambah ke mana-mana laman web atau blog.
Jika anda ingin melihat bagaimana ini berfungsi, anda boleh melawat halaman demo langsung dihoskan oleh pencipta Davide Calignano.
Dia meluangkan sedikit masa untuk memindahkan peralihan sebenar dan kesan animasi tersuai kepada buat imej cermin zoom imej Medium. Keseluruhan perpustakaan adalah ditulis dalam JavaScript tulen, jadi ia tidak bergantung kepada mana-mana 3rd skrip parti seperti jQuery.
Anda perlu tahu sedikit JS untuk menetapkannya tetapi anda tentu tidak perlu menjadi ahli.
Setiap imej boleh diambil data- * atribut untuk menetapkan ketinggian & lebar bersaiz penuh, semuanya adalah ditarik secara dinamik dari plugin lightbox. Kod persediaan sangat mudah dan boleh sasarkan gambar itu sendiri, atau bekas seperti
Inilah cetakan kod tunggal yang anda perlukan untuk mendapatkan plugin yang berjalan:
MediumLightbox ('figure.zoom-effect'); Di dalam fungsi ini, anda akan lulus pemilih untuk semua unsur (mis. .kesan zum kelas. Kelas ini ialah ditakrifkan secara khusus dalam lembaran gaya MediumLightbox, jadi itu adalah yang terbaik untuk menggunakannya di halaman anda juga.
Dan, sebaik sahaja ia ditubuhkan, anda sudah siap!
Dalam kawasan kandungan halaman anda, anda boleh membungkus semua imej menjadi a
Untuk memuat turun salinan skrip ini dan mulailah, hubungilah repo GitHub utama. Di sini, anda juga akan dapati dokumentasi bersama dengan coretan kod anda boleh menyalin untuk disiapkan dengan cepat.
