Memasang Efek jQuery Image Zoom Versi 2.0

Bismillah... Lama Blogger Tune-Up berdiam dalam hiruk pikuk nge-blog. Mohon ma'af yang sebesar-besarnya pada teman-teman blogger, tidak bermaksud untuk tidak menghormati tapi karena ada satu dan lain hal, maka Blogger Tune-Up harus rehat dulu beberapa hari untuk tidak menulis artikel. Tapi Insya Allah mulai hari ini Blogger Tune-Up akan aktif kembali menulis artikel.

Artikel kali ini masih berkutat dengan framework jQuery, sekarang kita akan memanfaatkan plugin jQuery yang dibuat oleh Andreas Lagerkvist^[1]. Plugin ini berfungsi untuk memberikan efek pada gambar dalam artikel blog kita. Hasilnya memang hampir sama dengan beberapa efek gambar yang pernah dibahas sebelumnya, misal efek facebox. Ketika pembaca blog melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.

Demo jQuery Image Zoom

Integrasi Plugin jQuery Image Zoom 2.0

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan kode CSS dibawah ini diatas kode pada langkah 3:

div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan kode JavaScript dibawah ini diatas kode pada langkah 5:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type="text/javascript" src="http://andreaslagerkvist.com/aFramework/Modules/Base/jquery.imageZoom.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>

Langkah 7
Simpan template, preview blog anda dan klik salah satu gambar pada artikel blog anda...

Source Code jQuery Image Zoom

Catatan Kaki :

• Special thanks to Andreas Lagerkvist for jQuery Image Zoom Plugin
• Jika template blog anda pernah dipasang framework jQuery maka langkah 6 baris ke 1 tidak perlu diikutsertakan