Cara Memperbesar Gambar seperti Medium
Platform blogging Medium menggunakan a efek pembesaran gambar khusus di halaman blog mereka. Setiap kali pengguna mengklik gambar itu secara otomatis akan memperbesar menjadi ukuran yang lebih besar.
Ini efek yang hebat dan tentu saja unik untuk Medium, tetapi itu tidak pernah menjadi sesuatu yang dapat dengan mudah disalin.
Sekarang, dengan MediumLightbox skrip, lebih mudah dari sebelumnya. Skrip JS ini ringan dan mudah ditambahkan ke situs web atau blog apa pun.
Jika Anda ingin melihat cara kerjanya, Anda dapat mengunjungi halaman demo langsung dipandu oleh pencipta Davide Calignano.
Dia menghabiskan beberapa waktu untuk memakukan transisi yang tepat dan efek animasi khusus buat gambar cermin dari zoom gambar Medium. Seluruh perpustakaan adalah ditulis dalam JavaScript murni, jadi tidak bergantung pada 3rd skrip pesta seperti jQuery.
Anda perlu mengetahui sedikit JS untuk mengaturnya tetapi Anda tentu tidak perlu menjadi seorang ahli.
Setiap gambar dapat diambil atribut data- * untuk mengatur tinggi & lebar ukuran penuh, semuanya ditarik secara dinamis dari plugin lightbox. Kode pengaturannya sangat sederhana dan bisa menargetkan gambar itu sendiri, atau wadah seperti
Berikut cuplikan kode tunggal yang Anda perlukan untuk menjalankan plugin:
MediumLightbox ('figure.zoom-effect'); Di dalam fungsinya, Anda akan lulus pemilih untuk semua elemen (mis. .efek zoom kelas. Kelas ini adalah didefinisikan secara khusus di stylesheet MediumLightbox, jadi ini yang terbaik untuk digunakan pada halaman Anda juga.
Dan, begitu diatur, Anda sudah siap!
Di area konten halaman Anda, Anda dapat membungkus semua gambar menjadi a
Untuk mengunduh salinan skrip ini dan memulai, cukup kunjungi repo GitHub utama. Di sini, Anda juga akan menemukan dokumentasi beserta cuplikan kode Anda dapat menyalin agar siap dengan cepat.
