Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Image Preview dengan jQuery

Cara membuat image preview dengan jQuery, atau memunculkan gambar besar ketika disentuh mouse.

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

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://kanguis.github.io/demo/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.

26 komentar

1. Komentar ini, diurutkan dari yang terbaru
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
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. wah ti CSS globe nyak :D
    saya dulu pake, skrg dah nggak :D
    1. benul kang ben :)
  2. Wah bagus sih tapi masih suka pake yg lama sih.. :)
    tapi tutorials-nya mantap kang :D
  3. Trik nya keren...
    Modelnya jga Cakep...
  4. makasih kang infonya, nice banget :D
  5. Artikel yang menarik kang.. Follow balik ya followers no.398.. makasih..
  6. Assalamualaikum, kang.
    Pagi2 dapet ilmu bagus lagi nih...nuhun :)
    Btw, saha eta neng geulis yang akang pajang diatas....kenalin dong :D
  7. pakraden
    Komentar ini telah dihapus oleh pengarang.
  8. leh2 makin keyen ajah..
  9. boleh di coba ni kang ismet, tapi jadi overload gak?
  10. kok yang nongol teks saja bang.........gmn biar gambarnya jg nongol sama teksnya
  11. boleh juga tuuhh,,saya nyoba dulu deh gan..mksh bnyak yaa gan..
  12. keren nih kang ismet tutorialnya
  13. kang cara mengirim Postingan Otomatis ke Halaman Google Plus gimana yah??
    Ke halaman, bukan ke Profil kang...

    please bantu
  14. Mantab tutorial nya kang! Preview image nya oke banget.. :)
  15. mantap kang.., sy milih yg berjilbab aja dech.. *smile
  16. makasih banget bang... mantap... izin praktek... :)
  17. Izin di praktekin mas..
  18. kang, pami ngarobih ukuran img preview na dipalih mana nya?

    hatur nuhun, semangat puasana kang. :)
  19. Menarik artikel nya Kang, simak lagi
    dan langsung belajar terapkan di blog saya. terima kasih Kang
  20. kang ismet, ada gk yang tanpa edit picture, ane mau ratakan semua bisa jadi seperti ini, thanks before
    1. 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>
  21. Siipp gan
  22. bookmark dulu,,, nnti kalau lagi kosong ide, izin reshare y kang :D
  23. mas mengecilkan gambar previewnya gmn? terima kasih
  24. Mohon maaf postingan ini dibuat tanggal 16 April 2013, dan di update tgl 19 Februari 2024, jadi banyak komentar yang tidak terbalas
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.