◄ Min  Size Fonts: + | - | ± Color: Max ►

The Simplest of Zooming Effect for Image

catLagi-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/
Loading...
XThe Simplest of Zooming Effect for Image
Zoom image using jQuery plugin tersimpel dan tersederhana yang pernah ada, menurut gue...hehehe
Subscribe my posts Register For Free!

6 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE