HOME
Cerpen
.jpg)
Cara Membuat Image Preview dengan jQuery
Image Preview dengan jQuery - Mungkin Agan 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.
Sebelum melangkah pada tutorial, mohon di perhatikan hal-hal dibawah ini :
- Gambar / Image harus sudah diupload.
- Template sobat harus sudah ditambahkan jQuery. Apabila belum faham kunjungi Cara Menambah jQuery pada Template Blogger.
Cara Membuat Image Preview dengan jQuery
Letakkan JavaScript di bawah ini diatas</body>
<script src='https://sites.google.com/site/kangistea/js/imgpreview.js' type='text/javascript'/>Untuk mengedit tampilan, simpan kode CSS ini di atas ]]></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 Agan 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 diatas tadi :
<a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6gKHEUBSBRLqQMpP5t9P4U887qbbFVR5O3i8c7zmF1WUMgaj2BtCxwJMKk-9spwzpDJD_0sjidXm_90XybuJqcR_qi7JA_IryTnUoP3W5z7dqinkvCzFJhAm2_0AUfJdGp-ES4SGx9HU/s1600/image-preview-blogger.jpg" title="Ini Contoh Tampilannya"><img alt="citra kirana" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6gKHEUBSBRLqQMpP5t9P4U887qbbFVR5O3i8c7zmF1WUMgaj2BtCxwJMKk-9spwzpDJD_0sjidXm_90XybuJqcR_qi7JA_IryTnUoP3W5z7dqinkvCzFJhAm2_0AUfJdGp-ES4SGx9HU/s320/image-preview-blogger.jpg" width="320" /></a>
<img alt="....... width="250" /> adalah gambar yang diperkecil menjadi 150px, bisa juga diganti dengan Teks.Sekian dulu artikel dari saya yang mengenai Cara Membuat Image Preview dengan jQuery
Semoga Berhasil!
Jangan lupa mapir terus dan COMMENT sebanyak-banyaknya
0 komentar: