magnific image popup light box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Magnific popup</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" integrity="sha512-+EoPw+Fiwh6eSeRK7zwIKG2MA8i3rV/DGa3tdttQGgWyatG/SkncT53KHQaS5Jh9MNOT3dmFL0FjTY08And/Cw==" crossorigin="anonymous" />
</head>
<body>
<div class="container w-100 h-100">
<div class="py-4">
<h1 class="text-center">Our Gallery</h1>
<hr class="text-cente w-50 text-dark">
</div>
<div class="row no-gutters image-link">
<div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?nature,water" target="_blank"><img src="https://source.unsplash.com/1600x900/?nature,water" alt="" class="img-fluid"></a></div>
<div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?nature" target="_blank"><img src="https://source.unsplash.com/1600x900/?nature" alt=""class="img-fluid"></a></div>
<div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?beach" target="_blank"><img src="https://source.unsplash.com/1600x900/?beach" alt="" class="img-fluid"></a></div><br>
<div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?rain" target="_blank"><img src="https://source.unsplash.com/1600x900/?rain" alt="" class="img-fluid"></a></div>
<div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?laptop" target="_blank"><img src="https://source.unsplash.com/1600x900/?laptop" alt=""class="img-fluid"></a></div>
<div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?ship" target="_blank"><img src="https://source.unsplash.com/1600x900/?ship" alt="" class="img-fluid"></a></div>
</div>
<br><br>
<div class="row no-gutters image-link1">
<div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?nature,water" target="_blank"><img src="https://source.unsplash.com/1600x900/?nature,water" alt="" class="img-fluid"></a></div>
<div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?nature" target="_blank"><img src="https://source.unsplash.com/1600x900/?nature" alt=""class="img-fluid"></a></div>
<div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?beach" target="_blank"><img src="https://source.unsplash.com/1600x900/?beach" alt="" class="img-fluid"></a></div><br>
<div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?rain" target="_blank"><img src="https://source.unsplash.com/1600x900/?rain" alt="" class="img-fluid"></a></div>
<div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?laptop" target="_blank"><img src="https://source.unsplash.com/1600x900/?laptop" alt=""class="img-fluid"></a></div>
<div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?ship" target="_blank"><img src="https://source.unsplash.com/1600x900/?ship" alt="" class="img-fluid"></a></div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha512-IsNh5E3eYy3tr/JiX2Yx4vsCujtkhwl7SLqgnwLNgf04Hrt9BT9SXlLlZlWx+OK4ndzAoALhsMNcCmkggjZB1w==" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.image-link , .image-link1').magnificPopup({
delegate: 'a',
type:'image',
gallery:{
enabled:true,
preload: [0,2],
navigateByImgClick: true,
}
});
});
</script>
</body>
</html>
Comments
Post a Comment