Image Preview dengan jQuery - Mungkin sobat sudah sering melihat tampilan gambar ketika mouse diarahkan (mouse hover) akan memunculkan gambar yang lebih besar. Biasanya digunakan untuk gallery, baik foto ataupun template. Inilah yang akan saya bahas saat ini yaitu bagaimana cara membuat image preview dengan jQuery.
jquery
Untuk lebih jelasnya silahkan lihat screenshoot atau demo (pake yang cakep aja ya)...

citra kirana


Sebelum melangkah pada tutorial, mohon di perhatikan hal-hal dibawah ini :
  1. Gambar / Image harus sudah diupload. Apabila belum faham kunjungi Cara Upload Gambar ke Blogger.
  2. Template sobat harus sudah ditambahkan jQuery. Apabila belum faham kunjungi Cara Menambah jQuery pada Template Blogger.

Cara Membuat Image Preview dengan jQuery


Tambahkan JavaScript sebelum </body>
<script src='https://sites.google.com/site/kangistea/js/imgpreview.js' type='text/javascript'/>
Untuk mengedit tampilan, simpan kode CSS ini sebelum ]]></b:skin>
#preview{
position:absolute;
border:1px solid #ddd;
background:#eee;padding:5px;
display:none;color:#333;
}

Cara Menggunakan


Untuk menambilkan image preview ini, ketika menulis artikel sobat harus menambahkan kode class="preview" dan title="keterangan gambar" untuk menambah keterangan dibawah gambar, pada teks link atau gambar yang akan di munculkan previewnya.

Contoh kode pada gambar demo :
<a class="preview" href="http://2.bp.blogspot.com/-2Oi1k1h9LQ8/UWzRHgDLwsI/AAAAAAAAD4Y/GLb0ky9qbTk/s1600/citra-kirana.jpg" title="Citra Kirana Cakepan pake jilbab kan?"><img alt="citra kirana" src="http://2.bp.blogspot.com/-2Oi1k1h9LQ8/UWzRHgDLwsI/AAAAAAAAD4Y/GLb0ky9qbTk/s1600/citra-kirana.jpg" width="150" /></a>

<img alt="....... width="250" /> adalah gambar yang diperkecil menjadi 150px, bisa juga diganti dengan Teks.

Semoga bermanfaat.

25 komentar

wah ti CSS globe nyak :D
saya dulu pake, skrg dah nggak :D

Balas

Wah bagus sih tapi masih suka pake yg lama sih.. :)
tapi tutorials-nya mantap kang :D

Balas

Trik nya keren...
Modelnya jga Cakep...

Balas

makasih kang infonya, nice banget :D

Balas

Artikel yang menarik kang.. Follow balik ya followers no.398.. makasih..

Balas

Assalamualaikum, kang.
Pagi2 dapet ilmu bagus lagi nih...nuhun :)
Btw, saha eta neng geulis yang akang pajang diatas....kenalin dong :D

Balas
Komentar ini telah dihapus oleh pengarang.

boleh di coba ni kang ismet, tapi jadi overload gak?

Balas

kok yang nongol teks saja bang.........gmn biar gambarnya jg nongol sama teksnya

Balas

boleh juga tuuhh,,saya nyoba dulu deh gan..mksh bnyak yaa gan..

Balas

keren nih kang ismet tutorialnya

Balas

kang cara mengirim Postingan Otomatis ke Halaman Google Plus gimana yah??
Ke halaman, bukan ke Profil kang...

please bantu

Balas

Mantab tutorial nya kang! Preview image nya oke banget.. :)

Balas

mantap kang.., sy milih yg berjilbab aja dech.. *smile

Balas

makasih banget bang... mantap... izin praktek... :)

Balas

Izin di praktekin mas..

Balas

kang, pami ngarobih ukuran img preview na dipalih mana nya?

hatur nuhun, semangat puasana kang. :)

Balas

Menarik artikel nya Kang, simak lagi
dan langsung belajar terapkan di blog saya. terima kasih Kang

Balas

kang ismet, ada gk yang tanpa edit picture, ane mau ratakan semua bisa jadi seperti ini, thanks before

Balas

maksudnya semua gambar? paling ditambahkan class baru oada gambar posting dengan jQuery

<script type='text/javascript'>
$(document).ready(function() {
$('.post-body img').addClass('preview')
});
</script>

Balas

bookmark dulu,,, nnti kalau lagi kosong ide, izin reshare y kang :D

Balas

mas mengecilkan gambar previewnya gmn? terima kasih

Balas

Poskan Komentar


×
Chat