Membuat galeri dengan bootstrap mysql

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

Magnific Popup CDN

Datatables with Bootstrap 4 CDN

* 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 :

    
        
        
       
        
        
        
        
        
        

        
        
        
        
        
        
        
        
        
        
    
    
        

            

            

                

                    
Popup Gallery dengan Magnific Popup & Datatables plugin
                
                

                        
                        

                            

                                
No.
                                
Gambar
                                
Nama Gambar
                            
                        
                        

                            

                                
1
                                

                                    
                                    

                                        

                                            
                                                
                                           
                                                

                                                    

                                                        
Warna Merah
                                                    
                                                
                                            
                                        
                                    
                                    
                                
                                

                                    Warna Merah
                                
                            
                            
                            

                                
2
                                

                                    
                                    

                                        

                                            
                                                
                                           
                                                

                                                    

                                                        
Warna Kuning
                                                    
                                                
                                            
                                        
                                    
                                    
                                
                                

                                    Warna Kuning
                                
                            
                            

                                
3
                                

                                    
                                    

                                        

                                            
                                                
                                            
                                                

                                                    

                                                        
Warna Biru
                                                    
                                                
                                            
                                        
                                    
                                    
                                
                                

                                    Warna Biru
                                
                            
                            
                            

                                
4
                                

                                    
                                    

                                        

                                            
                                                
                                            
                                                

                                                    

                                                        
Warna Hijau
                                                    
                                                
                                            
                                        
                                    
                                    
                                
                                

                                    Warna Hijau
                                
                            
                            

                                
5
                                

                                    
                                    

                                        

                                            
                                                
                                            
                                                

                                                    

                                                        
Warna Coklat
                                                    
                                                
                                            
                                        
                                    
                                    
                                
                                

                                    Warna Coklat
                                
                            
                        
                    
                
            
        
        
    

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.