Pratinjau Gambar dengan jQuery

Labels: •
Framework jQuery akhir-akhir ini menjadi perhatian Blogger Tune-Up. Kesederhanaan dan mudahnya penerapan pada Blogger menjadi nilai plus tersendiri bagi penulis. Teka-tekinya membuat penasaran untuk menelusuri lebih jauh tentang framework jQuery. Blogger Tune-Up pernah membahas beberapa artikel tentang jQuery walaupun lupa tidak membuatkannya kategori jQuery. Dalam artikel kali ini kita akan menerapkan efek Pratinjau Gambar (Image Preview) dengan jQuery pada artikel blog. Silahkan lihat demonya pada blog All In One Template dan arahkan mouse pada salah satu gambar pada deretan artikel. Sepintas efek ini mirip dengan artikel yang pernah dibahas yaitu "Tampilkan Gambar dengan Efek Membesar". Mungkin beberapa teman sudah mencoba efek tersebut, kelemahan dari efek tersebut adalah kode yang rumit yang harus dimasukan didalam artikel dan hampir serba manual. Dengan jQuery semuanya menjadi lebih mudah walaupun belum 100% otomatis.
Pratinjau Gambar dengan jQuery

Integrasi Image Preview (Pratinjau Gambar) dengan jQuery

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></skin>
Langkah 5
Masukan (Copy Paste) kode CSS dibawah ini diatas kode pada langkah 4:
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (Copy Paste) kode dibawah ini diatas kode pada langkah 6:
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>
this.imagePreview = function(){ 
xOffset = 10;
yOffset = 20;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = ""; 
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");        
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");      
},
function(){
this.title = this.t; 
$("#preview").remove();
}); 
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});   
};
$(document).ready(function(){
imagePreview();
});
</script>
Langkah 8
Simpan template

Menyisipkan kode Pratinjau Gambar (Image Preview)

Langkah A
Buatlah sebuah artikel dan upload gambar pada artikel tersebut
Langkah B
Masuk/klik ke mode "Edit HTML" pada editor artikel
Langkah C
Lihat kode seperti contoh dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/s1600-h/full_preview.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 387px; height: 400px;" src="http://1.bp.blogspot.com/s400/full_preview.jpg" border="0" />
</a>
Langkah D
Buang kode "-h" (tanpa tanda kutip) pada kode "s1600-h" (tanpa tanda kutip)
Langkah E
Tambahkan/sisipkan kode dibawah ini pada kode langkah C:
class="preview"
Sehingga menjadi seperti dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/s1600/full_preview.jpg" class="preview">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 387px; height: 400px;" src="http://1.bp.blogspot.com/s400/full_preview.jpg" border="0" />
</a>
Langkah F
Jika Pratinjau Gambar ingin di tambahkan judul gambar, sisipkan kode dibawah ini:
title="All In One Template"
Sehingga kode menjadi seperti dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/s1600/full_preview.jpg" class="preview" title="All In One Template">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 387px; height: 400px;" src="http://1.bp.blogspot.com/s400/full_preview.jpg" border="0" />
</a>
Langkah H
Terbitkan artikel...

Keterangan:
  • Ubah All In One Template pada title (Langkah F) sesuai dengan keterangan judul gambar
Selamat mencoba dan semoga berhasil. Happy blogging... :)