Tambah Kesan Magnifikasi pada Halaman Web Anda dengan jfMagnify
Terdapat banyak plugin zum percuma yang berfungsi sangat baik. Walau bagaimanapun, kebanyakannya adalah dibina untuk imej dan mereka menentukan arah untuk kandungan imej sahaja.
Bagaimana jika anda boleh tambah kesan pembesar ke setiap bahagian halaman web anda? Terima kasih kepada jfMagnify, awak boleh.
Ianya adalah plugin jQuery percuma yang menyokong bukan hanya zoom gambar, tetapi juga zooming seluruh halaman. Ia adalah salah satu daripada beberapa plugin yang juga membolehkan anda pilih tahap pembesaran dan menyokong acara sentuh untuk pengguna mudah alih.
Perhatikan plugin ini boleh merasa sedikit berat kerana ia bergantung pada dua dependensi: jQuery biasa dan jQuery UI. Ini adalah kedua-duanya perlu untuk mendapatkan jfMagnify berfungsi dengan baik. Belum lagi jfMagnify skrip sebenar anda perlu menyertakan pada halaman anda.
Persediaan agak rumit kerana anda hanya boleh menyasarkan elemen yang diperbesar dalam bekas. Jika anda mahu menyasarkan seluruh halaman yang anda perlukan termasuk kelas di seluruh tapak web anda.
Inilah caranya jQuery satu baris akan kelihatan seperti:
$ (". magnify"). jfMagnify ();
Sasaran ini semua elemen di dalam .membesarkan
bekas yang biasanya a div
elemen.
Unsur-unsur dalaman ini boleh menjadi imej, tetapi juga dapat termasuk cetakan kecil, contohnya dari segi tapak atau halaman dasar privasi. Semua dokumentasi adalah terdapat dalam repo GitHub, jadi apabila anda menetapkannya, keseluruhan proses menjadi lebih mudah.
Juga, plugin ini sangat berubah-ubah dan dilengkapi dengan banyak peraturan kontena. Sebagai contoh, elemen kontena tidak boleh mempunyai kedudukan CSS statik, jadi ia perlu sama ada relatif, mutlak, atau tetap.
Awak boleh mencari semua peraturan gaya lalai dalam repo GitHub tetapi mungkin rasa sakit untuk menyesuaikan jika susun atur anda sudah dibina & berjalan. Faedah-faedah jfMagnify adalah, untuk saya, bernilai usaha. Benar, ia bergantung pada keperluan anda dan sama ada anda suka antara muka.
Mengintip dokumentasi di GitHub untuk melihat apa yang anda fikirkan. Dan, anda juga boleh pratonton antara muka pada CodePen jika anda mahu melihat perpustakaan dalam tindakan sebelum memasangnya.