<h1>Responsive Image Gallery</h1><hr>
<div id="gallery" class="container-fluid">  
  <img src="https://source.unsplash.com/1600x1200?female,portrait" class="img-responsive">
  <img src="https://source.unsplash.com/1024x768?female,portrait" class="img-responsive">
   <img src="https://source.unsplash.com/1366x768?female,portrait" class="img-responsive">
  <video class="vid" controls>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
    </source>
  </video>
  <img src="https://source.unsplash.com/1920x1080?female,portrait" class="img-responsive">
  <img src="https://source.unsplash.com/640x360?female,portrait" class="img-responsive">
<img src="https://source.unsplash.com/320x640?female,portrait" class="img-responsive">
  <img src="https://source.unsplash.com/1200x1600?female,portrait" class="card img-responsive">
  <img src="https://source.unsplash.com/800x600?female,portrait" class="img-responsive">
  <img src="https://source.unsplash.com/600x800?female,portrait" class="img-responsive">
  <img src="https://source.unsplash.com/400x600?female,portrait" class="img-responsive">
  <img src="https://source.unsplash.com/600x400?female,portrait" class="img-responsive">
<img src="https://source.unsplash.com/1100x1600?female,portrait" class="img-responsive">
<img src="https://source.unsplash.com/1600x1100?female,portrait" class="img-responsive">
<img src="https://source.unsplash.com/992x768?female,portrait" class="img-responsive">
<img src="https://source.unsplash.com/768x992?female,portrait" class="img-responsive">

</div>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body">
      </div>
    </div>

  </div>
</div>

h1{
  font-family: Satisfy;
  font-size:50px;
  text-align:center;
  color:black;
  padding:1%;
}
#gallery{
  -webkit-column-count:4;
  -moz-column-count:4;
  column-count:4;
  
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px;
}
@media (max-width:1200px){
  #gallery{
  -webkit-column-count:3;
  -moz-column-count:3;
  column-count:3;
    
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px;
}
}
@media (max-width:800px){
  #gallery{
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
    
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px;
}
}
@media (max-width:600px){
  #gallery{
  -webkit-column-count:1;
  -moz-column-count:1;
  column-count:1;
}  
}
#gallery img,#gallery video {
  width:100%;
  height:auto;
  margin: 4% auto;
  box-shadow:-3px 5px 15px #000;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.modal-img,.model-vid{
  width:100%;
  height:auto;
}
.modal-body{
  padding:0px;
}

$(document).ready(function(){
  $("img").click(function(){
  var t = $(this).attr("src");
  $(".modal-body").html("<img src='"+t+"' class='modal-img'>");
  $("#myModal").modal();
});

$("video").click(function(){
  var v = $("video > source");
  var t = v.attr("src");
  $(".modal-body").html("<video class='model-vid' controls><source src='"+t+"' type='video/mp4'></source></video>");
  $("#myModal").modal();  
});
});//EOF Document.ready