Dalam tutorial ini, kita akan melihat bagaimana cara menambahkan slideshow gambar di halaman galeri produk pada aplikasi eCommerce. Saya telah menggunakan overlay jQuery lightbox untuk slide saat menjalankan tampilan slide. Setiap slide akan berisi navigasi sebelumnya berikutnya untuk bergerak bolak-balik selama slideshow. Galeri dan gambar produk tayangan slide diskalakan ke ukuran viewport. Elemen kontrol overlay slide juga akan responsive untuk tampil disemua layar.

Dalam contoh ini, hasil produk galeri bersifat dinamis dari database. Hasilnya diulang dalam satu lingkaran untuk menampilkan  produk galeri. Dengan mengklik ubin produk, overlay slide akan ditampilkan dengan gambar dan judul produk yang diperbesar.

Interface Galeri Produk Aplikasi eCommerce

Kode HTML ini berisi skrip PHP untuk mendapatkan hasil database MySQL dan untuk mengulangi array yang dihasilkan. Pada setiap iterasi, HTML produk akan ditambahkan Setiap event klik   dengan aksi jQuery untuk menjalankan tampilan slide.  galeri ditambahkan dengan selector kelas CSS. Dengan referensi selector kelas ini, event klik  galeri ditangkap dalam skrip jQuery. Kemudian, produk yang saat ini diklik akan dimuat ke overlay lightbox jQuery.

Di dalam  galeri, tag gambar produk ditambahkan dengan teks data atribut data HTML5. Nama produk ditambahkan dengan atribut data yang ditentukan pengguna. Dengan membaca nilai atribut data ini, nama produk dimuat secara dinamis ke slide.

tampilan slide berisi opsi untuk keluar dari tampilan slide untuk kembali ke interface galeri. Kontrol ikon pada tampilan digunakan untuk melakukan navigasi slide dan aksi stop.

 

jQuery Lightbox Script untuk Menjalankan Slideshow Gambar Produk Keranjang Belanja

main.js

Dalam skrip ini, event klik elemen galeri ditangani untuk memulai rangkai salindia produk. Pada saat mengklik  gambar, tayangan slide akan mulai dari slide produk yang diklik dan loop di sekitar array slide. Saat memuat dan keluar dari komponen tampilan slide, efek fade-in fade-out jquery diterapkan.

Komponen rangkai salindia dari halaman eCommerce akan berisi kontrol navigasi dengan masing-masing selector kelas. Skrip ini menggunakan nama kelas sebagai referensi untuk memanggil fungsi untuk bergeser ke slide berikutnya.

Fungsi galleryNavigate digunakan untuk memindahkan slide bolak-balik. Ia menerima dua parameter gData dan arah. Judul dan jalur sumber gambar produk diambil dari container galeri dan ditambahkan ke instance gData ini. Kemudian data ini dibaca dengan referensi objek gData dan dimuat ke elemen target HTML slide.

Nilai yang mungkin dari parameter arah adalah kiri dan kanan. Bergantung pada arah yang ditentukan dalam fungsi galleryNavigate, gerakan slide akan ditangani secara horizontal. Saat memuat setiap slide, sumber gambar galeri diperiksa dalam pernyataan bersyarat sebelum memuatnya ke komponen slide.

Dan library CSS ditunjukkan di bawah ini. Ini berisi css untuk selector dan elemen slide slideshow elemen. Ini untuk menempatkan  produk pada tampilan galeri seperti kartu dan melompati overlay lightbox untuk menjalankan tampilan slide.

main.css

Output Slideshow Galeri Produk Aplikasi eCommerce

Screenshot di bawah ini menunjukkan tampilan Cara Membuat Galery Slide Show Product dengan jQuery Lightbox. overlay lightbox masing-masing berisi ikon prev-next dan close untuk melakukan navigasi dan aksi keluar.

Cara Membuat Galery Slide Show Product dengan jQuery Lightbox