2

I have multiple images like this:

<div class="img_fullscreen"><img onclick="openFullscreen();" class="img_fullscreen_icon" src="/images/fullscreen-icon.PNG"></div>
<img id="fullscreen" src="https://x" style="width:600px; height: 450px;">

I can select / go through the images by pressing the next or prev buttons:

<a class="prev" onclick="plusSlides(-1)" style="color: white;font-weight: bold;font-size: 22px;">&#10094;</a>
<a class="next" onclick="plusSlides(1)" style="color: white;font-weight: bold;font-size: 22px;">&#10095;</a>

How can I make the fullscreen work with multiple images? Now (see the code java-code included bellow) I get the element by id ("fullscreen"). This work with 1 img, but if I add the id to multiple images it will not work (ofc). How can I do this? I know I could probably make functions for each of the images, but that is very "messy". I am also wondering if it is possible to show the next & prev buttons when in fullscreen, then be able to move through the images when in fullscreen. Any help is greatly appreciated!

  var elem = document.getElementById("fullscreen");
  function openFullscreen() {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) { /* Safari */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE11 */
      elem.msRequestFullscreen();
    }
  }
Rojo
  • 2,749
  • 1
  • 13
  • 34
andreasv
  • 450
  • 1
  • 4
  • 15
  • 1
    Instead of using id, use classes so that you select them with an array index. – Rojo Jan 19 '21 at 18:16
  • Change id by changing `getElementById` to `getElementByClassName` and changing the `id=""` to `class=""`? I did not get it to work by doing that... And how would I select the individual img after? – andreasv Jan 19 '21 at 19:09
  • 1
    `getElementsByClassName` returns an array of elements with that class. You can pick out elements using indices – Rojo Jan 19 '21 at 19:10
  • ok. I dont know how to pick out the elements. Do I do it in the `onclick="openFullscreen();"` or in the java code? – andreasv Jan 19 '21 at 19:18
  • 1
    You need to do it in the Javascript. You should read [MDN documentation for it](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) – Rojo Jan 19 '21 at 19:19
  • Thank you so much:) I´ll read it! – andreasv Jan 19 '21 at 19:21

0 Answers0