Image Zoom [JQZoom] untuk Blogspot
Berikut salah satu hack yang kreatif yang berhasil saya temukan, memperbesar gambar yang tampak kecil menjadi lebih detail seperti menggunakan lensa saat kursor diarahkan pada gambar. Gambar asli tampak sebelah kiri gambar asil zoom dan ini memudahkan kita untuk melihat objek kecil yang ada dalam gambar yang belum terlihat jelas.![Image Zoom [JQZoom] untuk Blogspot](http://3.bp.blogspot.com/_ReSrCNLg5j8/S2lF0xQARXI/AAAAAAAAB7Q/a8ha_YmCSxY/s400/exzoom.jpg)
Klik pada blog berikut untuk melihat contohnya:
Die-Silver Blog Experimental
Untuk pemasangannya, anda bisa mengikuti langkah berikut ini:</head>
<!--JQZOOM-STARTS-->
untuk setting default, ukuran gambar adalah 275x275px. Anda dapat mengubahnya sesuka hati.
<script src="http://die-silver.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://die-silver.googlecode.com/files/jquery.jqzoom1.0.1.js" type='text/javascript'></script>
<link rel="stylesheet" href="http://die-silver.googlecode.com/files/jqzoom.css" type="text/css" />
<script type="text/javascript">
$(function() {
var options =
{
$(".jqzoom").jqzoom(options);
var options2 =
{
}
$(".jqzoom2").jqzoom(options2);
});
</script>
<!--JQZOOM-STOPS-HELP@-http://www.ardi33.web.id/-->
Sekarang pemasangan agar efeknya dapat kita rasakan. Caranya menambahkan class "jqzoom" pada tag a href.
Perhatikan penempatan link yang biasanya digunakan berikut ini:<a href="LINK GAMBAR YANG LEBIH BESAR" title="IMAGE TITLE"><img src="LINK GAMBAR YANG LEBIH KECIL"/></a>
Untuk menggunakan zoom image, ubah link menjadi seperti ini:<a href="LINK GAMBAR YANG LEBIH BESAR" class="jqzoom" title="IMAGE TITLE"><img src="LINK GAMBAR YANG LEBIH KECIL"/></a>
NOTE #1: Untuk menampilkan gambar dengan Reverse Opacity Effect, tambahkan class="jqzoom2" bukan class="jqzoom"
NOTE #2: Jika anda menggunakan trik ini, anda harus mempunyai dua gambar, satu kecil sebagai thumb yang diletakkan pada blog dan satunya yang besar sebagai gambar untuk men-detail-kan yang diletakkan dalam hyperlink.
Browser Support:
6+ | 
2+ | 
1.0 | 
2+ | 
9+ |
adopted from BloggerStop.Net
 |
5
komentar
:a:
:b:
:c:
:d:
:e:
:f:
:g:
:h:
:i:
:j:
:k:
:l:
:m:
:n:
5 komentar:
Wah keren nich!
Jadi kita harus punya dua gambar and itu harus sisipin kode class "jqzoom" setiap kita mau menambahkan gambar gitu maksudnya,..
Kalo haru gitu bikin pusing kepalang donk die!!!
Tapi keren loh!
keduaxx.. thx nih infonya.. artikelnya juga bagus..
:n: wwwaaahhhhhhhhhhh........ thxs bgt kang Ardi, ini yang lgi Naru cari2 :g:
jQuery memang memudahkan kita dalam mengedit site bro . . .
Sai here!!!
You know what I am going to say....you have 48 hrs to prevent your blogs name from being listed at the top position of BloggerStop.Net "content thieves" list.