Tambahkan Efek Pembesar di Halaman Web Anda dengan jfMagnify

Ada banyak plugin zooming gratis itu bekerja dengan sangat baik. Namun, sebagian besar adalah dibangun untuk gambar dan mereka menentukan arahan untuk konten hanya gambar.

Bagaimana jika Anda bisa tambahkan efek pembesar ke setiap bagian dari halaman web Anda? Terimakasih untuk jfMagnify, kamu bisa.

Itu adalah plugin jQuery gratis yang mendukung tidak hanya pembesaran gambar, tetapi juga zooming seluruh halaman. Ini salah satu dari beberapa plugin yang juga memungkinkan Anda pilih level perbesaran dan mendukung acara sentuh untuk pengguna seluler.

Perhatikan plugin ini bisa terasa agak berat karena itu bergantung pada dua dependensi: jQuery biasa dan jQuery UI. Keduanya diperlukan agar jfMagnify berfungsi dengan benar. Belum lagi skrip jfMagnify yang sebenarnya Anda harus memasukkan di halaman Anda.

Penyiapannya sedikit rumit karena Anda hanya dapat menargetkan elemen yang diperbesar dalam sebuah wadah. Jika Anda ingin menargetkan seluruh halaman, Anda harus melakukannya termasuk kelas di seluruh situs web Anda.

Begini caranya satu baris jQuery akan terlihat seperti:

 $ (". magnify"). jfMagnify (); 

Target ini semua elemen di dalam .memperbesar wadah yang biasanya a div elemen.

Elemen-elemen internal ini bisa berupa gambar, tetapi bisa juga termasuk cetakan kecil, misalnya pada halaman situs atau halaman kebijakan privasi. Semua dokumentasinya tersedia di repo GitHub, jadi setelah Anda mengaturnya, seluruh proses menjadi jauh lebih mudah.

Juga, plugin ini sangat berubah-ubah dan disertai banyak aturan wadah. Misalnya, elemen wadah tidak dapat memiliki posisi CSS statis, jadi itu perlu relatif, absolut, atau diperbaiki.

Kamu bisa temukan semua aturan gaya default dalam repo GitHub tetapi mungkin sulit untuk menyesuaikan jika tata letak Anda sudah dibangun & berjalan. Manfaat jfMagnify, bagi saya, sepadan dengan usaha. Sungguh, itu tergantung pada kebutuhan Anda dan apakah Anda menyukai antarmuka.

Lihatlah dokumen di GitHub untuk melihat apa yang Anda pikirkan. Dan, Anda juga bisa pratinjau antarmuka pada CodePen jika Anda ingin melihat perpustakaan beraksi sebelum menginstalnya.