For Post Gallery

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
  
  <style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer {
display:none !important;} #main-wrapper { width:auto!important;} .post { width:auto!important; }
</style>
<style>
.gallery { 
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    margin-top: 10px;
    overflow: hidden;
}
.gallery img { 
    width: 100%; 
    height: auto;
    transition: 500ms;
    margin-bottom: 10px;
    opacity: 0.8;
    page-break-inside: avoid; 
    -webkit-column-break-inside: avoid; 
    break-inside: avoid; 
}
.gallery img:hover {
    opacity: 1;
}
.modal-img,.model-vid{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: table
}
.modal-body{
  padding: 0px;
}
.modal-dialog {
  height: 100%;
      position: relative;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
  border: none;
}
@media screen and (max-width: 900px) {
 .gallery { 
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
 .gallery div { margin: 0; 
        width: 100px;
    }
  .modal-dialog {
        margin: 0 8vw;
    }
}
@media screen and (max-width: 600px) {
    .gallery { 
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    .gallery div { 
      	margin: 0; 
        width: 100px;
    }
}
</style>
</head>
<body>
 
<div class="container">
 <div class="gallery">

<img class="single-image" src="https://images.pexels.com/photos/2559175/pexels-photo-2559175.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
 <img class="single-image" src="https://images.pexels.com/photos/3133685/pexels-photo-3133685.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" /> 
 <img class="single-image" src="https://images.pexels.com/photos/3099358/pexels-photo-3099358.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
 <img class="single-image" src="https://images.pexels.com/photos/2977304/pexels-photo-2977304.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
 <img class="single-image" src="https://images.pexels.com/photos/3082313/pexels-photo-3082313.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
 <img class="single-image" src="https://images.pexels.com/photos/3115006/pexels-photo-3115006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
 <img class="single-image" src="https://images.pexels.com/photos/2859169/pexels-photo-2859169.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
 <img class="single-image" src="https://images.pexels.com/photos/3031075/pexels-photo-3031075.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img class="single-image" src="https://images.pexels.com/photos/2832039/pexels-photo-2832039.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    <img class="single-image" src="https://images.pexels.com/photos/2868223/pexels-photo-2868223.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
    <img class="single-image" src="https://images.pexels.com/photos/2705755/pexels-photo-2705755.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
    <img class="single-image" src="https://images.pexels.com/photos/2157166/pexels-photo-2157166.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
 
 </div> 
</div>
 
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script>
$(document).ready(function () {
  $(".single-image").click(function(){
    var t = $(this).attr("src");
    $(".modal-body").html("<img src='"+t+"' class='modal-img'>");
    $("#myModal").modal();
  });
});

</script>
 
</body>
</html>

demo

Code Preview

Popular Posts

Pages

For Post Gallery