Codekop - Halo sahabat codekop.com sudah lama gak post hehe, karena masih banyak pekerjaan di dunia nyata :v, nah pada kali ini saya membuat tutorial Cara Membuat Lightbox Popup Gallery dengan Magnific Popup & Datatables plugin ditambah bootstrap agar tampilan lebih rapih, jadi kumpulan foto gallery ketika diklik akan menampilkan seperti menampilkan ukuran yang lebih besar atau zoom fotonya jika salah gambar thumbnail di klik mengikuti size/ ukuran gambar yang aslinya.
yuk langsung saja ikuti tutorial dibawah :
1. Buat folder dan file index.html
langkah pertama buat folder gallery dan isinya folder gambar dan file index.html
2. Siapkan bahan
langkah kedua siapkan bahan yaitu jQuery, Bootstrap, Magnific Popup dan Datatables untuk bahannya sendiri kita ambil langsung dengan cdn atau mengambil script di internet dari pada repot-repot download source nya lagi.
jQuery CDN
Bootstrap 4 CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
Magnific Popup CDN
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
Datatables with Bootstrap 4 CDN
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
* Dan siapkan minimal 5 gambar untuk ujicoba popup gallery dengan magnific popup nya taruh di folder gambar.
3. Buka file index.html
langkah ketiga buka file index.html lalu pahami dan ikuti script berikut :
<!doctype html>
<html>
<head>
<title>Membuat Lightbox Popup Gallery dengan Magnific Popup & Datatables plugin bersama codekop.com </title>
<!-- BOOTSTRAP 4-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<!-- MAGNIFIC POPUP-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<!-- DATATABLES BS 4-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
<!-- jQuery -->
<!-- DATATABLES BS 4-->
<!-- BOOTSTRAP 4-->
<!-- MAGNIFIC POPUP-->
</head>
<body>
<div class="container">
<br/>
<div class="card">
<div class="card-header bg-primary text-white">
<h4>Popup Gallery dengan Magnific Popup & Datatables plugin</h4>
</div>
<div class="card-body">
<table id="example" class="table table-striped table-bordered" <thead>
<tr>
<th>No.</th>
<th>Gambar</th>
<th>Nama Gambar</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<!--portfolio-->
<div id="portfolio">
<div class="portfolio-item">
<a href="image/red1.jpg" class="portfolio-popup">
<img src="image/red1.jpg" alt="your image" class="img-fluid" id="gambar">
<div class="portfolio-overlay">
<div class="portfolio-info">
<h2>Warna Merah</h2>
</div>
</div>
</a>
</div>
</div>
<!--portfolio-->
</td>
<td>
Warna Merah
</td>
</tr>
<tr>
<td>2</td>
<td>
<!--portfolio-->
<div id="portfolio">
<div class="portfolio-item">
<a href="image/yellow.jpg" class="portfolio-popup">
<img src="image/yellow.jpg" alt="your image" class="img-fluid" id="gambar">
<div class="portfolio-overlay">
<div class="portfolio-info">
<h2>Warna Kuning</h2>
</div>
</div>
</a>
</div>
</div>
<!--portfolio-->
</td>
<td>
Warna Kuning
</td>
</tr>
<tr>
<td>3</td>
<td>
<!--portfolio-->
<div id="portfolio">
<div class="portfolio-item">
<a href="image/blue.jpg" class="portfolio-popup">
<img src="image/blue.jpg" alt="your image" class="img-fluid" id="gambar">
<div class="portfolio-overlay">
<div class="portfolio-info">
<h2>Warna Biru</h2>
</div>
</div>
</a>
</div>
</div>
<!--portfolio-->
</td>
<td>
Warna Biru
</td>
</tr>
<tr>
<td>4</td>
<td>
<!--portfolio-->
<div id="portfolio">
<div class="portfolio-item">
<a href="image/green.png" class="portfolio-popup">
<img src="image/green.png" alt="your image" class="img-fluid" id="gambar">
<div class="portfolio-overlay">
<div class="portfolio-info">
<h2>Warna Hijau</h2>
</div>
</div>
</a>
</div>
</div>
<!--portfolio-->
</td>
<td>
Warna Hijau
</td>
</tr>
<tr>
<td>5</td>
<td>
<!--portfolio-->
<div id="portfolio">
<div class="portfolio-item">
<a href="image/browen.jpg" class="portfolio-popup">
<img src="image/browen.jpg" alt="your image" class="img-fluid" id="gambar">
<div class="portfolio-overlay">
<div class="portfolio-info">
<h2>Warna Coklat</h2>
</div>
</div>
</a>
</div>
</div>
<!--portfolio-->
</td>
<td>
Warna Coklat
</td>
</tr>
</tbody>
</table><!--table -->
</div><!-- card body -->
</div><!-- card -->
</div><!-- container -->
</body>
</html>
4. Hasil dari gallery pada file index.html
Demikian hasil yang di dapat, kurang lebih sama dengan contoh yang saya screen shoot jika cursor di arahkan pada kotak maka gambar akan di pop up menampilkan gambar yang mengikuti size/ ukuran gambar aslinya. dan ada tombol slidernya yang bisa digeser ke gambar selanjutnya.
Akhir Kata…
Baik, sekian dulu pada artikel kali ini tentang Cara Membuat Lightbox Popup Gallery dengan Magnific Popup & Datatables plugin Kita jumpa lagi di lain kesempatan, Semoga bermanfaat. Sampai Jumpa dan Terima Kasih.
![Source Code Aplikasi Penjualan Barang Kasir dengan PHP & MYSQL [Gratis]](/storage/filemanager/1/e7c487aeebda985e1b440c1b2cd5cbe3.png)
