В галерее изображений всякий раз, когда я нажимаю на изображение в полноэкранном режиме, оно должно содержать кнопку с 'X', которая возвращает в галерею.

Question

Я не могу отобразить изображение в полноэкранном режиме и не могу вернуться к изображениям галереи. Можно ли сделать это с помощью Javascript. Я пробовал много способов отобразить изображение в полноэкранном режиме, но мне это не удалось, я могу отобразить изображение на той же странице, но не могу отобразить в полноэкранном режиме. Как отображать в полноэкранном режиме и как добавить кнопку, чтобы вернуться в мою галерею. Я сталкивался со многими решениями с jquery. Это можно сделать с помощью Js ?? Пожалуйста, помогите мне с этим вопросом.

index. html

index. css

.image-gallery-items{
display: flex;
margin:auto 0px;
flex-wrap: wrap;
overflow: auto;
clear: both;
overflow:scroll;
@include clearfloats;
   }

.image-gallery-item{
        float:left;
        position: relative;

    .thumbnail{
        display: block;
        overflow: hidden;
        .closebtn{
            position: absolute;
            top: 10px;
            right: 15px;
            color: white;
            font-size: 35px;
            cursor: pointer;
            }
        img{
        width: 190px;
        height: auto;
        padding: 5px;
          }
       }
    }
  .container{
 position: relative;
     }
  #fullImg{
     width:100%;
    height:100%;
    object-fit: cover;
        }

индекс. js

function imgDisplay(img){

var fullImg=document.getElementById('fullImg');
fullImg.src=img.src;
fullImg.style.display="block";

}

Answer 1

Не уверен, будет ли это работать на всех устройствах, но я надеюсь, что это направит вас в правильном направлении: https://codepen.io/ActiveCodex/pen/qBbRGPR (мне не удалось заставить его работать с помощью встроенного фрагмента кода).

var elem = document.getElementById("container");

function imgDisplay(img) {
    var fullImg = document.getElementById("fullImg");
    fullImg.src = img.getAttribute("data-src-lg");
    openFullscreen();
}

function openFullscreen() {
    elem.style.display = "flex";
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        /* Firefox */
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        /* Chrome, Safari and Opera */
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) {
        /* IE/Edge */
        elem.msRequestFullscreen();
    }
}

function imgHide() {
    elem.style.display = "none";
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

.image-gallery-items {
  display: flex;
  margin: auto 0px;
  flex-wrap: wrap;
  overflow: auto;
  clear: both;
  overflow: scroll;
}

.image-gallery-items:after {
  content: " ";
  display: table;
  clear: both;
}

.image-gallery-item {
  float: left;
  position: relative;
}

.image-gallery-item .thumbnail {
  display: block;
  overflow: hidden;
}

.image-gallery-item img {
  width: 190px;
  height: auto;
  padding: 5px;
}

#container {
  align-items: center;
  background: #333;
  bottom: 0;
  display: none;
  left: 0;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
}

#container img {
  position: absolute;
  /* Change to 'cover' to fill the space */
  object-fit: contain;
  /* Remove 'max-' to fill the space*/
  max-height: 100%;
  max-width: 100%;
}

#container .closebtn {
  color: white;
  cursor: pointer;
  font-size: 35px;
  padding: 30px;
  position: fixed;
  right: 15px;
  top: 10px;
  z-index: 1;
}

#container .closebtn:hover {
  background: black;
}

[Источник] https://www.w3schools.com/howto/howto_js_fullscreen.asp