<link rel="stylesheet" href="https://unpkg.com/photoswipe@5.3.7/dist/photoswipe.css"> <link rel="stylesheet" href="https://unpkg.com/photoswipe@5.3.7/dist/photoswipe.css"> <style> .gallery { display: flex; flex-wrap: wrap; gap: 10px; } .gallery a { display: block; flex: 1 1 auto; max-width: 150px; } .gallery img { width: 100%; height: auto; aspect-ratio: auto; /* Ensures the aspect ratio of thumbnails matches the original image */ object-fit: cover; border-radius: 5px; } .pswp__img { width: auto !important; /* Ensures the image takes up the full width of its container */ max-height:700px !important; } </style> <div class="container"> <p style="text-align: center; font-size: 20px;color:#253d52; margin-top: 30px;"><strong>Gallery</strong></p> <!-- Gallery --> <div class="gallery" id="my-gallery"> <a href="https://srhu.edu.in/wp-content/uploads/2025/03/cl-1.jpg" data-pswp-width="1200" data-pswp-height="800"> <img src="https://srhu.edu.in/wp-content/uploads/2025/03/cl-1.jpg" alt="Image 1"> </a> <a href="https://srhu.edu.in/wp-content/uploads/2025/03/cl-2.jpg" data-pswp-width="1200" data-pswp-height="800"> <img src="https://srhu.edu.in/wp-content/uploads/2025/03/cl-2.jpg" alt="Image 1"> </a> <a href="https://srhu.edu.in/wp-content/uploads/2025/03/cl-3.jpg" data-pswp-width="1200" data-pswp-height="800"> <img src="https://srhu.edu.in/wp-content/uploads/2025/03/cl-3.jpg" alt="Image 1"> </a> <a href="https://srhu.edu.in/wp-content/uploads/2025/03/cl-4.jpg" data-pswp-width="1200" data-pswp-height="800"> <img src="https://srhu.edu.in/wp-content/uploads/2025/03/cl-4.jpg" alt="Image 1"> </a> <a href="https://srhu.edu.in/wp-content/uploads/2025/03/cl-5.jpg" data-pswp-width="1200" data-pswp-height="800"> <img src="https://srhu.edu.in/wp-content/uploads/2025/03/cl-5.jpg" alt="Image 1"> </a> <a href="https://srhu.edu.in/wp-content/uploads/2025/03/n-1.jpg" data-pswp-width="1200" data-pswp-height="800"> <img src="https://srhu.edu.in/wp-content/uploads/2025/03/n-1.jpg" alt="Image 1"> </a> <a href="https://srhu.edu.in/wp-content/uploads/2025/03/n-2.jpg" data-pswp-width="1200" data-pswp-height="800"> <img src="https://srhu.edu.in/wp-content/uploads/2025/03/n-2.jpg" alt="Image 1"> </a> <a href="https://srhu.edu.in/wp-content/uploads/2025/03/n-3.jpg" data-pswp-width="1200" data-pswp-height="800"> <img src="https://srhu.edu.in/wp-content/uploads/2025/03/n-3.jpg" alt="Image 1"> </a> <a href="https://srhu.edu.in/wp-content/uploads/2025/03/n-4.jpg" data-pswp-width="1200" data-pswp-height="800"> <img src="https://srhu.edu.in/wp-content/uploads/2025/03/n-4.jpg" alt="Image 1"> </a> </div> </div> <script src="https://cdn.jsdelivr.net/npm/photoswipe@5.3.7/dist/photoswipe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/photoswipe@5.3.7/dist/photoswipe-lightbox.esm.min.js" type="module"></script> <script type="module"> import PhotoSwipeLightbox from 'https://unpkg.com/photoswipe@5.3.7/dist/photoswipe-lightbox.esm.min.js'; const lightbox = new PhotoSwipeLightbox({ gallery: '#my-gallery', children: 'a', pswpModule: () => import('https://unpkg.com/photoswipe@5.3.7/dist/photoswipe.esm.js'), padding: { top: 20, bottom: 20, left: 10, right: 10 }, // Optional padding for the popup wheelToZoom: true, // Enable zooming with the mouse wheel }); lightbox.init(); </script>