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
123456789101112131415161718192021222324252627282930313233343536<!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
1234567891011121314151617181920$(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
1234567891011121314body{
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.
0 Comments
Berkomentarlah dengan baik dan sopan