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.

Tutorial Blog

• Cara mengganti background Kotak Komentar Blog 1
• Cara Mudah Membuat Random Background Color
• Cara Simple Membuat Script Link Banner Pada Blog Plus Wadah Text Area
• Membuat Slide Gambar Efek Terjatuh Dengan jQuery
• Cara Mudah Auto Hide Dan Menghilangkan Navbar Blogger
• Cara Membuat Slide Gambar Berjalan Pada BLOG
• Cara Mudah Mendeteksi Blog Yang NoFollow atau DoFollow dengan AddOns Mozilla Firefox
• Cara Mencari Blogger Satu Kota atau Satu Daerah
• Cara Memasang Photo Dan Avatar di Kotak Komentar Blogger
• MEnambah Dan Memasang Gadget HTML Code Javascript Pada Sidebar
• Cara Cek Link Yang Rusak Di Blog
• Cara Membuat Kotak Wadah Kode HTML Dengan Warna Pada Postingan
• Cara simpel Membuat Spoiler (Tombol Hide Show Kotak Kode HTML Pada Posting)
• New !! Cara Membuat Related Post Keren Dengan Tampilan Image

JQuery BlOg

• New !! Membuat Kotak dengan Background (Blogroll)
• Membuat Tab Vanilla Slick jQuery
• Page Peel Efek menggunakan jQuery & CSS
• Cara Membuat Back to Top Dengan jQuery
• Menampilkan Recent Post with Thumbnail Dengan JQuery
• Daftar Isi Memakai Efek jQuery Accordion