Ticker

6/recent/ticker-posts

Header Ads Widget

Cara Membuat Lightbox Popup Gallery Responsive Dengan Magnific Popup

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Image Popup Gallery yaitu gambar gambar yang akan menampilkan ukuran yang lebih besar jika salah satu gambar thumbnail nya di klik.

Disni saya akan membagikan tips membuat image popup gallery responsive dengan plugins Magnific Popup, selain sebagai popup gallery Magnific Popup juga bisa menampilkan popup untuk yang lain seperti popup banner, popup form, popup video dll, tapi disini saya akan hanya akan membahas mengenai popup image gallery. Oke langsung saja ....



Langkah Pertama
Download plugin Magnific Popup disitus resminya disini, dan download bootstrap disini, dan siapkan dua gambar untuk popup gallerinya.

Langkah Kedua
Ketiklah script dibawah ini simpan dengan nama popup

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title>Animated | Using Css</title> 
<link rel="stylesheet" href="css/bootstrap.css"> 
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/magnific-popup.css">

</head> 
<body> 

<div id="wrapper">
 <div class="container">
  <div class="popup-gallery">
   <div class="col-md-12">
    <div class="col-md-6">
     <a href="images/bg1.jpg" title=""><img src="images/bg1.jpg"/></a> 
    </div>
    <div class="col-md-6">
     <a  href="images/bg2.jpg" title=""><img src="images/bg2.jpg"/></a> 
    </div>
    
   </div>
  </div>
 </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body> 
</html>

Langkah Ketiga
Ketiklah script dibawah ini dengan nama main.js
$(document).ready(function() {
  $('.popup-gallery').magnificPopup({
   delegate: 'a',
   type: 'image',
   tLoading: 'Loading image #%curr%...',
   mainClass: 'mfp-img-mobile',
   gallery: {
    enabled: true,
    navigateByImgClick: true,
    preload: [0,1] 
    // Will preload 0 - before current, and 1 after the current image
   },
   image: {
    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
    titleSrc: function(item) {
     return item.el.attr('title') + '<small></small>';
    }
   }
  });
 });


Langkah Keempat
Ketiklah code css dibawah ini simpan dengan nama style.css
body{
 background:transparent;
}
#wrapper{
 
 padding-right:-15px;
 padding-left:-15px;
 text-align:center;
 margin-top:15%;
}
.popup-gallery img{
 width:100%;
 height:100%;
}

Langkah kelima
Coba jalankan script yang telah sobat buat, maka hasilnya akan terlihat seperti gambar dibawah ini.


sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri saran untuk source codenya silahkan download dari link dibawah ini.

Post a Comment

0 Comments

Rekomendasi Untuk Anda × +