The Simplest of Zooming Effect for Image

Lagi-lagi mengangkat topik yang nggak ada habis untuk di bahas! Koben akan mengulas kembali tentang trick zoom Banyak sekali tutorial mengenai situs yg mengulas zoom effect. Dari yang pure menggunakan CSS, plugin jQuery atau murni pakai JavaScript! Penerapan efek zoom juga bisa bermacam-macam ya. Sekarang secara khusus membuat zoomer pada gambar ketika cursor didekatkan (hover) Sangkin banyak dan keren² tutorialx, maka AA mencoba memilihkan yang paling sederhana dengan tidak menghilangkan fungsi utama dari trick tersebut ;)
Kebanyakan trick zoom selalu menyertakan dengan 2 buah image. 1 image kecil untuk ditampilkan dan 1 image besar untuk membuat gambar zoom. Ribet bro kalau begitu, sekarang is timing to simple and usefully :D Sobat bisa coba ini thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3 Magnifying glass for image zoom using jQuery and CSS3 by @ruby_on_tails

Berikut beberapa link resource zoom simple pilihan gue:

• bit.ly/1cHIWTL
• cssdeck.com/labs/magnifying-glass-plugin-with-jquery-and-css3
• www.jqueryscript.net/zoom/Simple-Image-Inner-Zoom-Plugin-jQuery-Zoom.html

Pilihan tutorial zooming effect for image tersimpel jatuh pada bit.ly/1cHJMQz

How to use this?

Sertakan jQuery dan jquery_imageLens.js di halaman situs sobat.<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>

Script pemanggil

<script>
$(function () {
 $("#img_zoom").imageLens ({ lensSize:200, borderSize: 1, borderColor: "#000" });
}); 
</script>

MarkUp HTML<img id="img_zoom" src="LINK-IMAGE" width="XXX" height="XXX" />Lebih jelasnya ya ke situs sumber saja, AA cuman berbagi ;)) Semoga bermanfaat.
Kalau kurang!
www.designrazzi.com/2013/free-image-hover-effects
www.freshdesignweb.com/jquery-mouseover.html
www.pencilscoop.com/2013/10/100-best-free-jquery-css-image-hover-effect-demos-plugins
Happy zoom \m/