Created
February 5, 2018 20:55
-
-
Save JohnnyBizzel/2cee2b3fed711b9810d979a7677c03d3 to your computer and use it in GitHub Desktop.
Tiled image gallery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /> | |
| <link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /> | |
| <title>CodePen - Tiled Image Gallery</title> | |
| <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> | |
| <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'> | |
| <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; /* For Firefox. */ | |
| -webkit-column-break-inside: avoid; /* For Chrome & friends. */ | |
| break-inside: avoid; /* For standard browsers like IE. :-) */ | |
| } | |
| .gallery img:hover { | |
| opacity: 1; | |
| } | |
| .modal-img,.model-vid{ | |
| width:100%; | |
| height: auto; | |
| } | |
| .modal-body{ | |
| padding:0px; | |
| } | |
| .modal-dialog { | |
| text-align: center; | |
| vertical-align: middle; | |
| display: block; | |
| top: 10%; | |
| } | |
| .modal-content { | |
| border: none; | |
| } | |
| @media screen and (max-width: 767px) { | |
| .gallery { | |
| -webkit-column-count: 2; | |
| -moz-column-count: 2; | |
| column-count: 2; | |
| } | |
| .gallery div { margin: 0; | |
| width: 200px; | |
| } | |
| } | |
| @media screen and (max-width: 479px) { | |
| .gallery { | |
| -webkit-column-count: 1; | |
| -moz-column-count: 1; | |
| column-count: 1; | |
| } | |
| .gallery div { | |
| margin: 0; | |
| width: 200px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body translate="no" > | |
| <div class="container"> | |
| <div class="gallery"> | |
| <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr01/original-9161-1439317330-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" /> | |
| <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr08/original-1654-1439317465-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" /> | |
| <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr08/original-13354-1439321173-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" /> | |
| <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr04/original-25740-1439321209-5.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" /> | |
| <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr08/original-9292-1439319916-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" /> | |
| <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr05/original-6710-1439319334-17.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" /> | |
| <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr02/original-16901-1439320287-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" /> | |
| <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr04/original-29345-1439321306-8.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" /> | |
| <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr15/original-20286-1439320376-10.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" /> | |
| <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr02/original-6989-1439317507-15.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" /> | |
| <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr11/original-8867-1439317446-6.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" /> | |
| <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr03/original-22498-1439319085-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" /> | |
| </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 () { | |
| $(".gallery-img").click(function(){ | |
| var t = $(this).attr("src"); | |
| $(".modal-body").html("<img src='"+t+"' class='modal-img'>"); | |
| $("#myModal").modal(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment