Halo teman – teman semua, selamat datang kembali di website tips dan trik Dumet School. Pada kesempatan kali ini saya akan memberikan tips tentang Membuat Layout Product Dengan Plugin jQuery Interactive 3D dimana hasil dari plugin ini menjadi 3D. Tentunya dengan menggunakan jQuery, kali ini kita tidak akan membuatnya dari awal. Tetapi kita akan memanfaatkan plugin jQuery yag telah di sediakan, dan kita tinggal membuat layoutnya kemudian akan kita jalankan dengan cara memanggil id nya. supaya tidak penasaran bisa lihat pada gambar di bawah ini
Kemudian gambar bisa kita gerakkan memutar, artinya user dapat melihat secara detail product nya dengan melihat foto saja bagian depan, bagian belakang dan bagian samping
Nah untuk membuatnya tentunya perlu image yang sangat banyak, dan foto tersebut perlu ada setiap sudutnya
Teman – teman bisa download image nya di link ini, dan download plugin jQuery Interactive 3D
Baru selanjutnya kita akan implementasikan Membuat Layout Product Dengan Plugin jQuery Interactive 3D seperti biasa siapkan text editornya dan copy script html nya di bawah ini
|
1 2 3 4 5 6 7 8 9 10 11 |
<!doctype html> <html> <head> <title>jQuery Interactive 3D</title> </head> <body> <div id="i3d" class="interactive_3d"> <img src="images/frame_1.png"> </div> </body> </html> |
Selanjutnya berikan css nya, sederhana saja
|
1 2 3 4 |
<style type="text/css"> .interactive_3d{border-radius: 5px; border:1px black solid; padding: 10px; width: 200px; height: 400px} .interactive_3d img{width: 100%; height: 100%} </style> |
Save dengan nama index.html, kemudian kita berikan plugin yang sudah saya sediakan. Masukkan library jQuery nya dan hubungkan dengan plugin nya
|
1 2 |
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="jquery.interactive_3d.js"></script> |
Jika sudah, baru kita panggil id nya
|
1 2 3 4 5 6 7 |
<script> $(document).ready( function() { $("#i3d").interactive_3d({ frames: 38 }); }); </script> |
Jika sudah save dan jalankan pada browsernya, maka tampilan 3d berhasil kita buat
Hasilnya sangat menarik bukan, di dalam sebuah website perlu adanya layout interaktif supaya pengunjung website akan dimanjakan tampilan yang menarik seperti contoh nya yang kita buat kali ini cocok sekali untuk website e-commerce. Oke sekian pada artikel kali ini tentang Membuat Layout Product Dengan Plugin jQuery Interactive 3D kita berjumpa kembali pada tips dan trik yang akan datang.
Terimakasih dan sampi jumpa, semoga bermanfaat.