Responsive Image Gallery with video

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - </title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'><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>

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;
}
</style>
</head>
<body>

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

</div>

<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(){
  $("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

</script>

</body>
</html>

demo

Code Preview

Popular Posts

Pages

Responsive Image Gallery with video