Использование полноэкранного API для всех моих миниатюр - PullRequest
Новая
       47

Использование полноэкранного API для всех моих миниатюр

0 голосов
/ 19 сентября 2019

Я хочу отобразить всплывающее окно во весь экран, как только вы нажмете на любое из изображений в моей галерее.

Если я нажму на любой из эскизов, которые есть в моей галерее, полноэкранная версия изображения не появится.Единственный способ это работает, если я добавляю [0] после getElementsByTagName ("img"), но только если я нажимаю на первое изображение. 

    var image = gallery.getElementsByTagName("img");
    image.onclick = function() {
        launchFullscreen(image);
        image.style.filter = "none";
    }

1 Ответ

0 голосов
/ 20 сентября 2019

Если я нажму на любой из эскизов, которые есть в моей галерее, полноэкранная версия изображения не появится.Единственный способ это работает, если я добавляю [0] после getElementsByTagName ("img"), но только если я нажимаю на первое изображение.

Проблема в том, что gallery.getElementsByTagName("img") возвращает список всех img -элементов в gallery.Когда вы добавляете [0], вы выбираете первый элемент из этого списка.

Вместо этого вам нужно применить функцию-обработчик onclick ко всем элементам в этом списке: 

var images = gallery.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {

    images[i].onclick = function() {
        // ...
    }
}

Как запустить полноэкранный режим:
Выможно использовать полноэкранный API в вашем JavaScript, чтобы сделать элементы полноэкранными.
Просто вызовите это (для элемента с именем foo): 

foo.requestFullscreen();

Вот простая демонстрация: https://jsfiddle.net/9ytq2dr4/ (Правка: исправленная ссылка)

Я бы разработал изначально невидимую <div>, которая может отображаться в полноэкранном режиме и содержать полноразмерное изображение.В случае onclick изображения в галерее вам потребуется загрузить полноразмерную версию изображения, по которому щелкнули, в этот div и сделать его видимым и полноэкранным.

...