Memperbesar Gambar pada Artikel Blog Dengan jQuery Image Zoom 2.0

Artikel kali ini sengaja saya ambil dari blognya  Maz Hendriono yang memang banyak menyediakan tutorial blog dengan efek khusus yakni jQUERY. saya sendiri sangat tertarik dengan framework jQuery, kesempatan kali ni, kita akan memanfaatkan plugin jQuery yang dibuat oleh Andreas Lagerkvist^[1]. Plugin ini berfungsi untuk memberikan efek pada gambar dalam artikel blog kita. Sebagai Contoh (DEMO), coba sobat Klik GAMBAR DI ATAS dan Ketika pembaca blog melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada artikel blog nee, 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 dan ini berlaku untuk semua gambar yang ada pada artikel blog tanpa terkecuali.

Ikuti dengan seksama caranya :

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...

Catatan Kaki :

• 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

Memperbesar Gambar pada Artikel Blog Dengan jQuery Image Zoom 2.0 9 out of 10 based on 10 ratings. 9 user reviews.