Cara Membuat Image Preview Dengan JQuery - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Image Preview Dengan JQuery !! Semoga tulisan dengan kategori
Tips Blogging dan internet !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Image Preview Dengan JQuery ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->
Cara Membuat 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 ...
1. Tambahkan JavaScript sebelum
</body><script src='https://sites.google.com/site/kangistea/js/imgpreview.js' type='text/javascript'/>2. 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;
}3. 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgazsEB-p2vJ20BZrnebC2ezpe0iFCxQ9DqaAc7Frm6YKXlYPoErzNWSP1VfPsNp0Hb3505S0vXoAk6vcBIIXes5iCWJlOMCRPSqkB92C4mx1etkGbk_Jz3LG11P7IXo6tPaAYnt0J2lMs/s1600/citra-kirana.jpg" title="Citra Kirana Cakepan pake jilbab kan?"><img alt="citra kirana" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgazsEB-p2vJ20BZrnebC2ezpe0iFCxQ9DqaAc7Frm6YKXlYPoErzNWSP1VfPsNp0Hb3505S0vXoAk6vcBIIXes5iCWJlOMCRPSqkB92C4mx1etkGbk_Jz3LG11P7IXo6tPaAYnt0J2lMs/s1600/citra-kirana.jpg" width="150" /></a><img alt="....... width="250" /> adalah gambar yang diperkecil menjadi 150px, bisa juga diganti dengan Teks.
Okey sob, itulah Cara Membuat Image Preview Dengan JQuery. Semoga bermanfaat.
Source
Demikian info Cara Membuat Image Preview Dengan JQuery, Semoga dengan adanya postingan ini, Anda sudah benar benar menemukan informasi yang memang sedang anda butuhkan saat ini. Bagikan informasi Cara Membuat Image Preview Dengan JQuery ini untuk orang orang terdekat anda, Bagikan infonya melalui fasilitas layanan Share Facebook maupun Twitter yang tersedia di situs ini.