Image Preview dengan jQuery
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.

Untuk lebih jelasnya silahkan lihat screenshoot atau demo (pake yang cakep aja ya)...

Sebelum melangkah pada tutorial, mohon di perhatikan hal-hal dibawah ini :
Tambahkan JavaScript sebelum
Untuk menambilkan image preview ini, ketika menulis artikel sobat harus menambahkan kode
Contoh kode pada gambar demo :
Semoga bermanfaat.

Untuk lebih jelasnya silahkan lihat screenshoot atau demo (pake yang cakep aja ya)...

Sebelum melangkah pada tutorial, mohon di perhatikan hal-hal dibawah ini :
- Gambar / Image harus sudah diupload. Apabila belum faham kunjungi Cara Upload Gambar ke Blogger.
- 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
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
<script type='text/javascript'>
$(document).ready(function() {
$('.post-body img').addClass('preview')
});
</script>
dan langsung belajar terapkan di blog saya. terima kasih Kang
hatur nuhun, semangat puasana kang. :)
Ke halaman, bukan ke Profil kang...
please bantu
Pagi2 dapet ilmu bagus lagi nih...nuhun :)
Btw, saha eta neng geulis yang akang pajang diatas....kenalin dong :D
Modelnya jga Cakep...
tapi tutorials-nya mantap kang :D
saya dulu pake, skrg dah nggak :D