Cara Menciptakan Image Preview Dengan Jquery

Cara Membuat Image Preview Dengan JQuery - Mungkin teman sudah sering melihat tampilan gambar ketika mouse diarahkan (mouse hover) akan memunculkan gambar yang lebih besar. Biasanya dipakai untuk gallery, baik foto ataupun template. Inilah yang akan aku bahas ketika ini yaitu bagaimana cara menciptakan image preview dengan jQuery.

Untuk lebih jelasnya silahkan lihat screenshoot atau demo ...

Cara Membuat :

1. Tambahkan JavaScript sebelum </body>

<script src='https://sites.google.com/site/kangistea/js/imgpreview.js' type='text/javascript'/>

2. Untuk mengedit tampilan, simpan isyarat CSS ini sebelum ]]></b:skin>

#preview{ position:absolute; border:1px solid #ddd; background:#eee;padding:5px; display:none;color:#333; }

3. Cara Menggunakan Untuk menambilkan image preview ini, ketika menulis artikel teman harus menambahkan isyarat class="preview" dan title="Cara Membuat Image Preview Dengan JQuery" untuk menambah keterangan dibawah gambar, pada teks link atau gambar yang akan di munculkan previewnya.

Contoh isyarat pada gambar demo :

<a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_DOG93CSzL-MHKZYf5uFhuDTIc6Pas-5TNgObwtEsSFc13Gy1Hio7Bsh-jHNyXg1WlASFdJj-xzUTErbJ-N77a_9GJSi_m-GjwBpWnoyrnyvsxXjEGhShQsIVdACWYGqF4yzuZDXvT4Q/s1600/citra-kirana.jpg" title="Citra Kirana Cakepan pake jilbab kan?"><img alt="citra kirana" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_DOG93CSzL-MHKZYf5uFhuDTIc6Pas-5TNgObwtEsSFc13Gy1Hio7Bsh-jHNyXg1WlASFdJj-xzUTErbJ-N77a_9GJSi_m-GjwBpWnoyrnyvsxXjEGhShQsIVdACWYGqF4yzuZDXvT4Q/s1600/citra-kirana.jpg" width="150" /></a>

<img alt="Cara Membuat Image Preview Dengan JQuery Cara Membuat Image Preview Dengan JQuery"250" /> yakni gambar yang diperkecil menjadi 150px, dapat juga diganti dengan Teks.

Okey sob, itulah Cara Membuat Image Preview Dengan JQuery. Semoga bermanfaat.

Source

Share this post