API tools faq
paste
Advertisement
TheiPhoneFan

Image Gallery With Expandable Images

TheiPhoneFan
Mar 27th, 2024 (edited)
675
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.52 KB | None | 0 0
raw download clone embed print report
  1. <!-- Created on 2024-03-27 -->
  2. <!-- Previews 6.0.3, 2022-2024 -->
  3. <!-- Original: https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery -->
  4. <!DOCTYPE html>
  5. <html>
  6.  
  7. <head>
  8.     <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,700,900" rel="stylesheet" type="text/css">
  9.     <link rel="stylesheet" href="../theme/style.css"/>
  10.     <style>
  11.         div.gallery {
  12.             border: 1px solid #ccc;
  13.             border-radius: 16px;
  14.         }
  15.  
  16.         div.gallery:hover {
  17.             border: 1px solid #777;
  18.         }
  19.  
  20.         div.gallery img {
  21.             width: 100%;
  22.             height: auto;
  23.             border-radius: 16px 16px 0px 0px;
  24.         }
  25.  
  26.         div.desc {
  27.             padding: 15px;
  28.             text-align: center;
  29.         }
  30.  
  31.         .desc p {
  32.             color: black;
  33.             margin: 0px;
  34.         }
  35.  
  36.         * {
  37.             box-sizing: border-box;
  38.         }
  39.  
  40.         .responsive {
  41.             padding: 0 6px;
  42.             float: left;
  43.             width: 24.99999%;
  44.         }
  45.  
  46.         @media only screen and (max-width: 700px) {
  47.             .responsive {
  48.                 width: 49.99999%;
  49.                 margin: 6px 0;
  50.             }
  51.         }
  52.  
  53.         @media only screen and (max-width: 500px) {
  54.             .responsive {
  55.                 width: 100%;
  56.             }
  57.         }
  58.  
  59.         .clearfix:after {
  60.             content: "";
  61.             display: table;
  62.             clear: both;
  63.         }
  64.         .image-gallery {
  65.             /* The Gallery That Holds The Images */
  66.             display: flex;
  67.             flex-wrap: wrap;
  68.             justify-content: center;
  69.             gap: 10px;
  70.         }
  71.  
  72.         .gallery-image {
  73.             /* A pointer cursor will display when you hover over the image */
  74.             cursor: pointer;
  75.         }
  76.  
  77.         .modal {
  78.             /* The fullscreen popup that shows an expanded view of the image */
  79.             display: none;
  80.             position: fixed;
  81.             padding-top: 50px;
  82.             left: 0;
  83.             top: 0;
  84.             width: 100%;
  85.             height: 100%;
  86.             overflow: auto;
  87.             background-color: rgba(0, 0, 0, 0.9);
  88.         }
  89.  
  90.         .modal-content {
  91.             /* The content inside of the .modal */
  92.             display: block;
  93.             margin: auto;
  94.         }
  95.  
  96.         .close {
  97.             /* The close button (x) that can be clicked to close the .modal */
  98.             color: white;
  99.             font-size: 40px;
  100.             position: absolute;
  101.             top: 10px;
  102.             right: 25px;
  103.             cursor: pointer;
  104.         }
  105.  
  106.         #modalImage {
  107.             /* The image inside the .image-container */
  108.             max-width: 100%;
  109.             margin-top: 10px;
  110.         }
  111.     </style>
  112. </head>
  113.  
  114. <body class="white-bg">
  115.     <div class="responsive">
  116.         <div class="gallery" onclick="openModal('https://www.w3schools.com/css/img_5terre.jpg', 'Back Arrow')">
  117.             <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="600" height="400" class="gallery-image">
  118.             <div class="desc">
  119.                 <p>Add a description of the image here</p>
  120.             </div>
  121.         </div>
  122.     </div>
  123.  
  124.  
  125.     <div class="responsive">
  126.         <div class="gallery" onclick="openModal('https://www.w3schools.com/css/img_forest.jpg', 'Back Arrow')">
  127.             <img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400" class="gallery-image">
  128.             <div class="desc">
  129.                 <p>Add a description of the image here</p>
  130.             </div>
  131.         </div>
  132.     </div>
  133.  
  134.     <div class="responsive">
  135.         <div class="gallery" onclick="openModal('https://www.w3schools.com/css/img_lights.jpg', 'Back Arrow')">
  136.             <img src="https://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" width="600" height="400" class="gallery-image">
  137.             <div class="desc">
  138.                 <p>Add a description of the image here</p>
  139.             </div>
  140.         </div>
  141.     </div>
  142.  
  143.     <div class="responsive">
  144.         <div class="gallery" onclick="openModal('https://www.w3schools.com/css/img_mountains.jpg', 'Back Arrow')">
  145.             <img src="https://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="600" height="400" class="gallery-image">
  146.             <div class="desc">
  147.                 <p>Add a description of the image here</p>
  148.             </div>
  149.         </div>
  150.     </div>
  151.  
  152.     <div id="modal" class="modal">
  153.         <span class="close" onclick="closeModal()">&times;</span>
  154.         <img id="modalImage" class="modal-content" alt="Enlarged Image">
  155.     </div>
  156.  
  157.     <script>
  158.         // Basic JavaScript for the openModal to work
  159.         function openModal(imageSrc) {
  160.             document.getElementById('modalImage').src = imageSrc;
  161.             document.getElementById('modal').style.display = 'block';
  162.             document.body.classList.add('modal-open'); // Add this line
  163.  
  164.             document.addEventListener('keydown', function(event) {
  165.                 if (event.key === 'Escape') {
  166.                     closeModal();
  167.                 }
  168.             });
  169.         }
  170.  
  171.         function closeModal() {
  172.             document.getElementById('modal').style.display = 'none';
  173.             document.body.classList.remove('modal-open'); // Add this line
  174.             document.removeEventListener('keydown', function(event) {
  175.                 if (event.key === 'Escape') {
  176.                     closeModal();
  177.                 }
  178.             });
  179.         }
  180.     </script>
  181. </body>
  182. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!