반응형 이미지 비디오 갤러리 Responsive Image Video Gallery

반응형 이미지 비디오 갤러리 .. 소스를 적절히 수정해서 사용 하세요.

CSS

body{
padding:0px;
margin:20px 10px;
}
#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;
display:block;
}
.modal-body{
padding:0px;
margin:0px;
}

html

<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>

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();  
});
});