Halo teman – teman, selamat datang di website tips dan trik Dumet School. Pada kesempatan kali ini saya akan memberikan tips dan trik tentang bagaimana cara Membuat Show Product Dengan PIGNOSE Gallery Plugin jQuery sama seperti artikel sebelumnya kita akan menggunakan pulgin jQuery. Dengan menggunakan plugin ini kita bisa gunakan untuk membuat sebuah slide show untuk banner, product, gallery dll, dan pada study case kali ini kita akan membuat show product. Yang harus siapkan sekarang adalah foto product, teman – teman siapkan foto product sebanyak 1 sampai 6 atau lebih dengan ukuran yang sama kali ini saya menggunakan foto ukuran 600px x 400px.
Kemudian saya sudah siapkan plugin nya teman – teman tinggal download pada link ini, dan extract dalam satu folder index.html nya
Lalu kita siapkan text editornya, disini saya menggunakan sublime text. Oia sebelum kita lanjut saya berikan screen shoot biar tidak penasaran
Jika kita arahkan pada setiap menu foto maka dengan otomatis slide akan menampilkan sesuai mouse yang di letakkan tanpa harus kita klik, baik langsung saja kita mulai tips dan trik kali ini tentang 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 untuk 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, jika teman – teman menggunakan framework css seperti bootstrap misalnya teman – teman tidak udah atur css nya cukup paste saja script html nya
Selanjutnya baru kita berikan javascript nya untuk mengaktifkan plugin nya
<script type="text/javascript">
$(function() {
$('.gallery').pignoseGallery({ thumbnails: '.gallery-thumbnails' });
$('.menu .item').tab(); });
</script>
Jika sudah save dan jalankan pada browsernya, maka plugin slide show untuk product telah berhasil di gunakan
Bagaimana, sangat mudah bukan..??
Dan hasilnya cukup bagus untuk output website nya, oke sekian pada artikel kali ini tentang Membuat Show Product Dengan PIGNOSE Gallery Plugin jQuery kita berjumpa kembali pada tips dan trik yang akan datang. Semoga bermanfaat, terimakasih dan sampai jumpa.