Membuat Show Product Dengan PIGNOSE Gallery Plugin jQuery
Halo teman – teman, selamat datang di situs tips dan trik Source Code Aplikasi. Di kesempatan kali ini saya akan memberikan tips dan trik mengenai bagaimana cara Membuat Show Product Dengan PIGNOSE Gallery Plugin jQuery sama seperti artikel sebelumnya kita akan menggunakan pulgin jQuery. Dengan menggunakan plugin ini kita dapat gunakan bagi merancang sebuah slide show bagi banner, product, gallery dll, dan di study case kali ini kita akan merancang show product. Yang mesti siapkan kini yakni image product, teman – teman siapkan image product sebanyak 1 hingga 6 atau lebih dengan ukuran yang sama kali ini saya menggunakan image ukuran 600px x 400px.
Kemudian saya telah siapkan plugin nya teman – teman tinggal unduh di link ini, dan extract pada satu folder index.html nya
Lalu kita siapkan text editornya, disini saya menggunakan sublime text. Oia sebelum kita lanjut saya berikan screen shoot biar tak penasaran
Kalau kita arahkan di setiap fitur image karenanya dengan otomatis slide akan menampilkan sesuai mouse yang di letakkan tanpa mesti kita klik, bagus seketika saja kita mulai tips dan trik kali ini mengenai Membuat Show Product Dengan PIGNOSE Gallery Plugin jQuery teman – teman ikuti langkah demi langkah ya. Kita panggil terlebih dahulu plugin jQuery nya
Ketikkan script html nya seperti gambar di bawah ini
Kemudian kita masukkan css nya bagi mengatur lebar dan tingginya,
<style type=text/css>
.pignose-gallery {
margin: 0 auto;
width: 800px;
height: 400px;
}
</style>
Note: css di atas ini kita atur karena kita masi natif, jikalau teman – teman menggunakan framework css seperti bootstrap misalnya teman – teman tak udah atur css nya lumayan paste saja script html nya
Berikutnya baru kita berikan javascript nya bagi mengaktifkan plugin nya
<script type=text/javascript>
$(function() {
$('.gallery').pignoseGallery({ thumbnails: '.gallery-thumbnails' });
$('.fitur .item').tab(); });
</script>
Kalau telah save dan jalankan di browsernya, karenanya plugin slide show bagi product telah berhasil di gunakan
Bagaimana, betul-betul gampang bukan..??
Dan hasilnya lumayan bagus bagi output situs nya, oke demikian di artikel kali ini mengenai Membuat Show Product Dengan PIGNOSE Gallery Plugin jQuery kita berjumpa kembali di tips dan trik yang akan datang. Semoga bermanfaat, terimakasih dan hingga jumpa.
Sumber https://kursuswebsite.org
