CODEWITHSUNDEEP
javascripthtmlfullscreenwebkitrequestfullscreen
andreasv
andreasv

Reputation: 500

Multiple images with one fullscreen-function?

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();
    }
  }

Upvotes: 2

Views: 101

Answers (0)

Related Questions