AnswerBun.com

multiple image galleries on one page

Stack Overflow Asked by FLW on December 13, 2020

I know this question must have been come up before, never the less I wanted to ask for your help:

I want add multiple image galleries to my webpage, based on this example:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_lightbox

I think this can be accomplished using different div id tags, but I am not sure how to modify the script.

CSS


        /* lightbox */
        .row>.column {
            padding: 8 8px;
        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        .column {
            float: left;
            width: 25%;
        }

        /* The Modal (background) */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            padding-top: 20px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.95);
        }

        /* Modal Content */
        .modal-content {
            position: relative;
            /* background-color: #fefefe; */
            margin: auto;
            padding: 0;
            /* width: 90%; */
            max-width: 55%;
            /* max-height: 80%; */
        }

        /* The Close Button */
        .close {
            color: white;
            position: absolute;
            top: 10px;
            right: 25px;
            font-size: 35px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #999;
            text-decoration: none;
            cursor: pointer;
        }

        .mySlides {
            display: none;
        }

        .cursor {
            cursor: pointer;
        }

        /* Next & previous buttons */
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -50px;
            color: white;
            font-weight: bold;
            font-size: 20px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
            -webkit-user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
            display: none;
        }

        img {
            margin-bottom: -4px;

        }

        .caption-container {
            text-align: center;
            font-size: 14px;
            /* background-color: black; */
            padding: 2px 16px;
            color: white;
        }

        .demo {
            opacity: 0.6;
            display: none;
        }

        .active,
        .demo:hover {
            opacity: 1;
        }

        img.hover-shadow {
            transition: 0.3s;
        }

        .hover-shadow:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

html

<h2 style="text-align:center">Lightbox</h2>

<div class="row">
  <div class="column">
    <img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="img_snow.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="img_nature_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="img_snow_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="img_mountains_wide.jpg" style="width:100%">
    </div>
    
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="img_lights_wide.jpg" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>


    <div class="column">
      <img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>

js

function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

thank you very much!

2 Answers

i think i have what you need: To add a new image in this code just copy and add the followings in the html body. No need to change the Javascript code.

In the div class="row" add this and change the currentSlide(CHANGE_THIS_NUMBER) number next to the previous:

<div class="column">
    <img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(5)" 
    class="hover-shadow cursor">
</div>

In the div class="myModal" add this and change numbertext based on the amount of your images

<div class="mySlides">
  <div class="numbertext">5 / 5 CHANGE THIS TEXT</div>
  <img src="img_lights_wide.jpg" style="width:100%">
</div>

Still in the div class="myModal" add this and change the currentSlide(CHANGE_THIS_NUMBER) number next to the previous:

<div class="column">
   <img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" 
   onclick="currentSlide(4)" alt="Northern Lights">
</div>

Here an example of the html with a new image:

 <body>

<h2 style="text-align:center">Lightbox</h2>

<div class="row">
  <div class="column">
    <img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="img_snow.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>

<!-- -----------------------ADD THIS----------------------------- -->
  <div class="column">
    <img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(5)" class="hover-shadow cursor">
  </div>
<!-- -----------------------ADD THIS----------------------------- -->

</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 5</div>
      <img src="img_nature_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 5</div>
      <img src="img_snow_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 5</div>
      <img src="img_mountains_wide.jpg" style="width:100%">
    </div>
    
    <div class="mySlides">
      <div class="numbertext">4 / 5</div>
      <img src="img_lights_wide.jpg" style="width:100%">
    </div>

<!-- -----------------------ADD THIS----------------------------- -->
    <div class="mySlides">
      <div class="numbertext">5 / 5</div>
      <img src="img_lights_wide.jpg" style="width:100%">
    </div>
<!-- -----------------------ADD THIS----------------------------- -->
  
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>


    <div class="column">
      <img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
<!-- -----------------------ADD THIS----------------------------- -->
    <div class="column">
      <img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(5)" alt="Northern Lights">
    </div>
  </div>
<!-- -----------------------ADD THIS----------------------------- -->
</div>

Answered by Mirko on December 13, 2020

If you take a look at the script, you can see how it gets each div by its ID: document.getElementById("myModal").style.display = "block"; this line affects the <div id="myModal" class="modal"> part of the html.

Anywhere you want to change the id in the HTML, make sure you address the same ID in the javascript. Easiest way is to run a find all for the id name and change those places.

For classes, it is the same thing. In the script it uses var slides = document.getElementsByClassName("mySlides"); which would affect the html class "mySlides" for <div class="mySlides">

Answered by Halmon on December 13, 2020

Add your own answers!

Related Questions

RGB to hex and hex to RGB

51  Asked on January 3, 2022 by sindar

       

Setup dictionary lazily

8  Asked on January 3, 2022

     

Iterating over directories with Gulp?

5  Asked on January 3, 2022 by nathan-rutman

   

converting a csv file to json + python with specific json format

4  Asked on January 3, 2022 by hattricknz

     

How do you create a gRPC client in .NET Framework?

2  Asked on January 3, 2022 by rich-shipley

     

How do I switch from a merged branch to an new branch?

2  Asked on January 3, 2022 by mohammad-23

   

How can i edit an array in a JSON file from node?

1  Asked on January 3, 2022 by thomas-bouasli

       

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP