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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<?php include 'DBController.php'; $db_handle = new DBController(); ?> <!doctype html> <html lang="en"> <head> <title>eCommerce Software Product Gallery Slideshow with jQuery Lightbox</title> </head> <body> <div class="container py-4"> <h1>eCommerce Software Product Gallery Slideshow with jQuery Lightbox</h1> <div> <!-- gallery class need for using gallery --> <div class="gallery"> <!-- need a div for contains img tag --> <?php $query = $db_handle->runQuery("SELECT * FROM tbl_products ORDER BY id ASC"); if (! empty($query)) { foreach ($query as $key => $value) { ?> <div class="galleryItem"> <img src="<?php echo $query[$key]["product_image"] ; ?>" data-text="<?php echo $query[$key]["name"] ; ?>"> </div> <?php } } ?> </div> </div> </div> <div class="galleryShadow"></div> <div class="galleryModal"> <i class="galleryIcon gIquit close"></i> <i class="galleryIcon gIleft nav-left"></i> <i class="galleryIcon gIright nav-right"></i> <div class="galleryContainer"> <img src=""> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- Main JS --> <script src="assets/js/main.js"></script> </body> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
$(function () { $('.gIquit').click(function () { $('.galleryModal').css({ 'transform': 'scale(0)' }) $('.galleryShadow').fadeOut() }) $('.gallery').on('click', '.galleryItem', function () { galleryNavigate($(this), 'opened') $('.galleryModal').css({ 'transform': 'scale(1)' }) $('.galleryShadow').fadeIn() }) let galleryNav let galleryNew let galleryNewImg let galleryNewText $('.gIleft').click(function () { galleryNew = $(galleryNav).prev() galleryNavigate(galleryNew, 'last') }) $('.gIright').click(function () { galleryNew = $(galleryNav).next() galleryNavigate(galleryNew, 'first') }) function galleryNavigate(gData, direction) { galleryNewImg = gData.children('img').attr('src') if (typeof galleryNewImg !== "undefined") { galleryNav = gData $('.galleryModal img').attr('src', galleryNewImg) } else { gData = $('.galleryItem:' + direction) galleryNav = gData galleryNewImg = gData.children('img').attr('src') $('.galleryModal img').attr('src', galleryNewImg) } galleryNewText = gData.children('img').attr('data-text') if (typeof galleryNewText !== "undefined") { $('.galleryModal .galleryContainer .galleryText').remove() $('.galleryModal .galleryContainer').append('<div class="galleryText">' + galleryNewText + '</div>') } else { $('.galleryModal .galleryContainer .galleryText').remove() } } }) |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
.gallery .card { cursor: pointer; } .galleryShadow { display: none; -webkit-transition: ease all .5s; transition: ease all .5s; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.9); } .galleryModal { -webkit-transform: scale(0); transform: scale(0); -webkit-transition: ease all .5s; transition: ease all .5s; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; } .galleryModal .galleryContainer { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; height: 80%; } .galleryModal .galleryContainer img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; border: 10px solid #fff; border-radius: 10px; } .galleryModal .galleryContainer .galleryText { position: absolute; width: 100%; height: auto; top: 100%; color: #fff; text-align: center; font-size: 1.5em; } .galleryModal .galleryIcon { position: absolute; font-size: 2rem; width: 4rem; height: 4rem; text-align: center; color: #fff; } .galleryModal .gIquit { right: 10px; top: 10px; } .galleryModal .gIleft { top: 50%; left: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .galleryModal .gIright { top: 50%; right: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .close { background: url("../icons/icon-close.png") no-repeat; cursor: pointer; } .nav-left { background: url("../icons/icon-left.png") no-repeat; cursor: pointer; } .nav-right { background: url("../icons/icon-right.png") no-repeat; cursor: pointer; } |
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.
