Plugin ZooMove jQuery untuk Memperbesar Gambar pada Arahkan

Jika Anda pernah melihat-lihat situs e-commerce, Anda kemungkinan telah melihatnya efek pembesaran gambar. Anda mengarahkan foto produk dan bagian gambar itu diperbesar untuk a tampilan yang lebih jelas.

Itu Plugin ZooMove adalah cara yang bagus untuk meniru efek ini di situs Anda. Nya didukung oleh jQuery, sehingga Anda dapat menjalankan & menjalankan ini dengan cepat tanpa banyak kode.

ZooMove sepenuhnya gratis dan open source, tersedia di GitHub untuk pengembang yang ingin tahu. Itu dapat diinstal melalui npm, Punjung, Benang, atau diunduh langsung dari CDNJS.

Untuk menyiapkan gambar ZooMove, Anda perlu tiga file spesifik di header halaman Anda:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Kedua file ZooMove dapat diperkecil jika Anda ingin memuat halaman lebih cepat. Anda juga bisa menggabungkan file CSS ke dalam stylesheet utama Anda jika itu lebih mudah.

Semua keajaiban nyata terjadi dalam HTML di mana Anda bisa atur HTML5 atribut data- * untuk efek yang berbeda.

Ini memungkinkan Anda membuat kerajinan efek pembesaran kustom sendiri berdasarkan empat parameter yang berbeda:

1. skala data kebun binatang - mendefinisikan total ukuran zoom saat melayang (mis. 2.0 untuk 200%)
2. data-kebun binatang-pindah - menentukan apakah gambar bergerak bersama dengan kursor
3. data-kebun binatang - mendefinisikan gambar yang diperbesar muncul di atas yang asli
4. kursor data-kebun binatang - mendefinisikan titik kursor

Parameter kelima terakhir memungkinkan Anda menentukan apa URL gambar baru harus (jika perlu).

Anda dapat menggunakan ZooMove di semua browser utama, termasuk IE9 +. Plugin ini didukung secara luas dan itu menawarkan satu heck pengalaman pengguna.

Jika Anda sedang mencari perpustakaan hover-to-zoom sederhana ZooMove adalah pilihan yang sangat baik. Nya cukup ringan untuk berjalan di situs web apa pun dan itu didukung oleh jQuery, jadi Anda tidak perlu menulis kode sebanyak mungkin untuk membuatnya berfungsi.

Kunjungi halaman utama untuk melihatnya beraksi dan lihat dokumentasi di GitHub untuk mempelajari lebih lanjut.