Сделайте несколько изображений на весь экран с одной функцией - PullRequest
Новая
       14

Сделайте несколько изображений на весь экран с одной функцией

2 голосов
/ 23 мая 2019

Я нашел в одном вопросе о переполнении стека код, который создает изображение на весь экран. Но этот код предназначен только для одного изображения. 

<!doctype html>
<html>
  <head>
     <style>
      .fullscreen:-webkit-full-screen {
      width: auto !important;
      height: auto !important;
      margin:auto !important;
  }
     .fullscreen:-moz-full-screen {
      width: auto !important;
      height: auto !important;
      margin:auto !important;
  }
     .fullscreen:-ms-fullscreen {
      width: auto !important;
      height: auto !important;
      margin:auto !important;
  }     
     </style>
     <script>
        function makeFullScreen() {
         var divObj = document.getElementById("theImage");
       //Use the specification method before using prefixed versions
      if (divObj.requestFullscreen) {
        divObj.requestFullscreen();
      }
      else if (divObj.msRequestFullscreen) {
        divObj.msRequestFullscreen();               
      }
      else if (divObj.mozRequestFullScreen) {
        divObj.mozRequestFullScreen();      
      }
      else if (divObj.webkitRequestFullscreen) {
        divObj.webkitRequestFullscreen();       
      } else {
        console.log("Fullscreen API is not supported");
      } 

    }
     </script>

  </head>
  <body>
    Hello Image...</br>

    <img id="theImage" style="width:400px; height:auto;"  class="fullscreen" src="pic1.jpg" onClick="makeFullScreen()"></img>

  </body>
</html>

Может ли эта функция быть преобразована для работы с несколькими изображениями (чтобы не создавать функции для каждого изображения).

1 Ответ

1 голос
/ 23 мая 2019

Это просто делается добавлением обработчика onClick к нескольким элементам изображения и назначением параметра event для каждого вызова функции. 

<img src="picA.jpg" onClick="makeFullScreen(event)">
<img src="picB.jpg" onClick="makeFullScreen(event)">
<img src="picC.jpg" onClick="makeFullScreen(event)">

Внутри функции обратного вызова makefullScreen вы можете получить элемент, который вызвал событие щелчка - то есть ваше изображение - и сделать его полноэкранным, используя существующий код. 

function makeFullScreen(e) {
  var divObj = e.currentTarget;
  //Use the specification method before using prefixed versions
  if (divObj.requestFullscreen) {
    divObj.requestFullscreen();
  } else if (divObj.msRequestFullscreen) {
    divObj.msRequestFullscreen();
  } else if (divObj.mozRequestFullScreen) {
    divObj.mozRequestFullScreen();
  } else if (divObj.webkitRequestFullscreen) {
    divObj.webkitRequestFullscreen();
  } else {
    console.log("Fullscreen API is not supported");
  }
}
...