API tools faq
paste
Advertisement
TheiPhoneFan

Multiple Slideshows W/Expandable Images

TheiPhoneFan
Mar 27th, 2024
948
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.22 KB | None | 0 0
raw download clone embed print report
  1. <!-- Created by TheiPhoneFan on 2024-03-27 -->
  2. <!-- Previews 6.0.3, 2022-2024 -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.  
  6. <head>
  7.     <link rel="stylesheet" href="../theme/style.css">
  8.     <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,700,900" rel="stylesheet" type="text/css">
  9.     <meta charset="UTF-8">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <title>Image Slideshow with Previews</title>
  12.     <style>
  13.         .slideshow-container {
  14.             max-width: 500px;
  15.             position: relative;
  16.             margin: auto;
  17.         }
  18.  
  19.         .slideshow-container .slideshow-img {
  20.             display: none;
  21.             max-width: 100%;
  22.             height: auto;
  23.         }
  24.  
  25.         .slideshow-img img {
  26.             border-radius: 16px;
  27.             max-width: 100%;
  28.         }
  29.  
  30.         .prev, .next {
  31.             cursor: pointer;
  32.             position: absolute;
  33.             top: 50%;
  34.             width: auto;
  35.             margin-top: -22px;
  36.             padding: 16px;
  37.             color: white;
  38.             font-weight: bold;
  39.             font-size: 18px;
  40.             transition: 0.6s ease;
  41.             border-radius: 0 3px 3px 0;
  42.         }
  43.  
  44.         .prev {
  45.             left: 0;
  46.         }
  47.  
  48.         .next {
  49.             right: 0;
  50.         }
  51.  
  52.         .previews-container {
  53.             display: flex;
  54.             justify-content: center;
  55.             margin-top: 10px;
  56.         }
  57.  
  58.         .preview-img {
  59.             width: 85px;
  60.             height: auto;
  61.             margin: 0 5px;
  62.             cursor: pointer;
  63.             border-radius: 12px;
  64.         }
  65.  
  66.         .active-preview {
  67.             border: 2px solid #6495ED;
  68.         }
  69.  
  70.         figcaption {
  71.             text-align: center;
  72.         }
  73.  
  74.         .image-gallery {
  75.             /* The Gallery That Holds The Images */
  76.             display: flex;
  77.             flex-wrap: wrap;
  78.             justify-content: center;
  79.             gap: 10px;
  80.         }
  81.  
  82.         .gallery-image {
  83.             /* A pointer cursor will display when you hover over the image */
  84.             cursor: pointer;
  85.         }
  86.  
  87.         .modal {
  88.             /* The fullscreen popup that shows an expanded view of the image */
  89.             display: none;
  90.             position: fixed;
  91.             padding-top: 50px;
  92.             left: 0;
  93.             top: 0;
  94.             width: 100%;
  95.             height: 100%;
  96.             overflow: auto;
  97.             background-color: rgba(0, 0, 0, 0.9);
  98.         }
  99.  
  100.         .modal-content {
  101.             /* The content inside of the .modal */
  102.             display: block;
  103.             margin: auto;
  104.         }
  105.  
  106.         .close {
  107.             /* The close button (x) that can be clicked to close the .modal */
  108.             color: white;
  109.             font-size: 40px;
  110.             position: absolute;
  111.             top: 10px;
  112.             right: 25px;
  113.             cursor: pointer;
  114.         }
  115.  
  116.         #modalImage {
  117.             /* The image inside the .image-container */
  118.             max-width: 100%;
  119.             width: 450px;
  120.         }
  121.     </style>
  122. </head>
  123.  
  124. <body>
  125.     <div class="slideshow-container" id="slideshow1">
  126.         <div class="slideshow-img" onclick="openModal('../logos/jordans-blog-logo-1.png')">
  127.             <img src="../logos/jordans-blog-logo-1.png">
  128.             <figcaption>Jordan's Blog Logo #1</figcaption>
  129.         </div>
  130.         <div class="slideshow-img">
  131.             <img src="../logos/jordans-blog-logo-2.png" onclick="openModal('../logos/jordans-blog-logo-2.png')">
  132.             <figcaption>Jordan's Blog Logo #2</figcaption>
  133.         </div>
  134.         <div class="slideshow-img">
  135.             <img src="../logos/jordans-blog-logo-3.png" onclick="openModal('../logos/jordans-blog-logo-3.png')">
  136.             <figcaption>Jordan's Blog Logo #3</figcaption>
  137.         </div>
  138.         <div class="slideshow-img">
  139.             <img src="../logos/jordans-blog-logo-4.png" onclick="openModal('../logos/jordans-blog-logo-4.png')">
  140.             <figcaption>Jordan's Blog Logo #4</figcaption>
  141.         </div>
  142.         <a class="prev" onclick="changeSlide('slideshow1', -1)">&#10094;</a>
  143.         <a class="next" onclick="changeSlide('slideshow1', 1)">&#10095;</a>
  144.     </div>
  145.  
  146.     <div class="previews-container" id="previews1">
  147.         <img class="preview-img" src="../logos/jordans-blog-logo-1.png" onclick="currentSlide('slideshow1', 1)">
  148.         <img class="preview-img" src="../logos/jordans-blog-logo-2.png" onclick="currentSlide('slideshow1', 2)">
  149.         <img class="preview-img" src="../logos/jordans-blog-logo-3.png" onclick="currentSlide('slideshow1', 3)">
  150.         <img class="preview-img" src="../logos/jordans-blog-logo-4.png" onclick="currentSlide('slideshow1', 4)">
  151.     </div>
  152.  
  153.     <div class="slideshow-container" id="slideshow2" style="margin-top:10px;">
  154.         <div class="slideshow-img">
  155.             <img src="../logos/jordans-blog-6-0.png" onclick="openModal('../logos/jordans-blog-6-0.png')">
  156.             <figcaption>Jordan's Blog 6.0 Logo</figcaption>
  157.         </div>
  158.         <div class="slideshow-img">
  159.             <img src="../logos/jordans-blog-6-1.png" onclick="openModal('../logos/jordans-blog-6-1.png')">
  160.             <figcaption>Jordan's Blog 6.1 Logo</figcaption>
  161.         </div>
  162.         <a class="prev" onclick="changeSlide('slideshow2', -1)">&#10094;</a>
  163.         <a class="next" onclick="changeSlide('slideshow2', 1)">&#10095;</a>
  164.     </div>
  165.  
  166.     <div class="previews-container" id="previews2">
  167.         <img class="preview-img" src="../logos/jordans-blog-6-0.png" onclick="currentSlide('slideshow2', 1)">
  168.         <img class="preview-img" src="../logos/jordans-blog-6-1.png" onclick="currentSlide('slideshow2', 2)">
  169.     </div>
  170.  
  171.     <div id="modal" class="modal">
  172.         <span class="close" onclick="closeModal()">&times;</span>
  173.         <img id="modalImage" class="modal-content" alt="Enlarged Image">
  174.     </div>
  175.  
  176.     <script>
  177.         function changeSlide(slideshowId, n) {
  178.             showSlides(slideshowId, slideIndex[slideshowId] += n);
  179.         }
  180.  
  181.         function currentSlide(slideshowId, n) {
  182.             showSlides(slideshowId, slideIndex[slideshowId] = n);
  183.         }
  184.  
  185.         let slideIndex = {};
  186.  
  187.         function showSlides(slideshowId, n) {
  188.             let slides = document.getElementById(slideshowId).getElementsByClassName("slideshow-img");
  189.             let previews = document.getElementById('previews' + slideshowId.slice(-1)).getElementsByClassName("preview-img");
  190.  
  191.             if (!slideIndex[slideshowId]) {
  192.                 slideIndex[slideshowId] = 1;
  193.             }
  194.  
  195.             if (n > slides.length) {
  196.                 slideIndex[slideshowId] = 1;
  197.             }
  198.             if (n < 1) {
  199.                slideIndex[slideshowId] = slides.length;
  200.            }
  201.  
  202.            for (let i = 0; i < slides.length; i++) {
  203.                slides[i].style.display = "none";
  204.            }
  205.  
  206.            for (let i = 0; i < previews.length; i++) {
  207.                previews[i].classList.remove("active-preview");
  208.            }
  209.  
  210.            slides[slideIndex[slideshowId] - 1].style.display = "block";
  211.            previews[slideIndex[slideshowId] - 1].classList.add("active-preview");
  212.        }
  213.  
  214.        showSlides('slideshow1', 1); // Initial call to display the first slide
  215.        showSlides('slideshow2', 1); // Initial call to display the first slide for second slideshow
  216.  
  217.        // Basic JavaScript for the openModal to work
  218.        function openModal(imageSrc) {
  219.            document.getElementById('modalImage').src = imageSrc;
  220.            document.getElementById('modal').style.display = 'block';
  221.            document.body.classList.add('modal-open'); // Add this line
  222.  
  223.            document.addEventListener('keydown', function(event) {
  224.                if (event.key === 'Escape') {
  225.                    closeModal();
  226.                }
  227.            });
  228.        }
  229.  
  230.        function closeModal() {
  231.            document.getElementById('modal').style.display = 'none';
  232.            document.body.classList.remove('modal-open'); // Add this line
  233.            document.removeEventListener('keydown', function(event) {
  234.                if (event.key === 'Escape') {
  235.                    closeModal();
  236.                }
  237.            });
  238.        }
  239.    </script>
  240.  
  241. </body>
  242. </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!