ImageLens Zoom jQuery Hover Image

ImageLens Zoom jQuery Hover Image

Ada begitu banyak trik untuk membuat blog menjadi kian menarik dan membuat para pengunjung bertanya-tanya "kok bisa ??" . Iya saya tau pembukaan ini terlalu lebay , tapi memang harus agak sedikit lebay biar dramatis .

View demoDownload source
Yap , di tutorial blogging kali ini saya akan membahas sedikit , lebih tepatnya memberikan informasi dan arahan dan bukan pembahasan atau pembedahan karena saya bukan ahlinya dibidang ini , jadi saya hanya akan mengatakan apa yang saya tau saja .

Yang akan saya bagikan dalam post ini adalah sebuah cara untuk menciptakan efek Hover Zoom pada image post . Untuk contohnya anda bisa melihat gambar dibawah ini dan silahkan arahkan mouse anda ke gambar tersebut .

Ya , kebetulan saya juga barusaja menggunakan system ini untuk sekedar uji coba .


Disini kita akan memanfaatkan sebuah Plugin ImageLens yang berfungsi menciptakan efek kaca pembesar pada gambar saat di sorot mouse ( hover ) .

Cara memasangnya cukup sederhana , silahkan ikuti petunjuknya dibawah ini .

Instalasi Plugin
1. Silahkan anda masuk ke dasbor blogger > Template > Edit Html .
2. Letakkan script dibawah ini diantara kode <head> dan </head> pada template anda .

<script src="jquery.imageLens.js" type="text/javascript"></script>
3. Pastikan template anda sudah menggunakan framework jQuery.

Eksekusi
Disini saya menerapkan pada image posting , untuk itu yang perlu kita eksekusi adalah bagian

.post-body img
dengan meletakkan script dibawah ini diatas kode </body>

<script type='text/javascript'>
$(".post-body img").imageLens();
</script>
Dengan begitu secara otomatis image posting akan ditambahkan class='imagelens' untuk menciptakan efek zoom .

Catatan : Setiap template memiliki kode yang berbeda pada setiap gambar posting , silahkan disesuaikan dengan kode pada template anda masing-masing. Untuk memberi sentuhan style pada efek zoom kita juga bisa menambahkan beberapa value seperti misal kita akan mengubah ukuran efek lensa pada saat zoom dengan memberikan nilai { lensSize: 200 } sehingga menjadi seperti dibawah ini

<script type='text/javascript'>
$(".post-body img").imageLens({ lensSize: 200 }); 
</script>
Atau bisajuga memberikan sentuhan border danjuga warna pada border tersebut dengan memberikan nilai { borderSize: 8, borderColor: "#06f" }  .

Anda bisa melihat berbagai macam style yang dihasilkan dengan mengunjungi halaman demo melalui tombol dibawah ini .

View demoDownload source
Ichi Hikaru

Share this Article

Related Posts

  • Spesial Effect#Tubuh { background: hsl(210, 30%, 0%) radial-gradient( hsl(210, 30%, 20%), hsl(210, 30%, 0%)); margin: 0; width: 100%;
  • Cara Ampuh Mendapat Keuntungan Dari Iklan BlogCara Ampuh mendapat keuntungan dari pemasangan iklan - Sebagai seorang blogger , kita akan selalu dituntut untuk lebih
  • Cara Ganti Tema KakaoTalkCara Ganti Tema KakaoTalk - Well instinc manusia buat ngutak atik tampilan sesuatu tuh sepertinya selalu muncul dan tid
  • Trik Jitu Mengatasi Lapar saat Puasa !Trik Jitu Mengatasi Lapar saat Puasa ! - Di bulan ramadhan in khususnya umat muslim tengah diwajibkan untuk berjibaku m
Next
« Prev Post
Previous
Next Post »

Arahkan Kursor dibawah ini untuk memberikan komentar.
No HyperLink dan Komentar Hit&Run akan diacuhkan . Berkomentarlah dengan bahasa yang baik dan benar EmoticonEmoticon

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
Subscribe to: Post Comments (Atom)