Продолжая работу с веб-сайтами, основанными на демонстрации фотографий (ранее мы делали простое слайд-шоу), мы рассмотрим создание простого скрипта для создания полноэкранного лайтбокса для просмотра изображений.
Давайте на мгновение задумаемся, какие функции нам нужны.
- Полноэкранный режим: когда пользователь щелкает изображение, мы хотим, чтобы оно открывало увеличенную версию изображения в полноэкранном окне.
- Автоматически: мы не хотим, чтобы его нужно было отдельно активировать для каждого изображения. Мы хотим, чтобы он автоматически применялся к изображениям на странице.
- Темный фон: многие изображения отлично смотрятся на темном фоне, поэтому мы сделаем фон темным за окном предварительного просмотра.
- Интуитивно понятный: мы хотим, чтобы пользователю было легко понять, и не хотим, чтобы он чувствовал себя застрявшим в полноэкранном режиме. Браузеры уже показывают сообщение, но мы хотим упростить для пользователя возврат из полноэкранного просмотра изображения.
Начнем с стиля.
body { width:100%; height:100%; }
.row { display:flex; flex-wrap: wrap; }
.col { flex:1; }
#darkbox { width:99%; height:100%; position:absolute; top:0; left:0; background-color:#333; overflow: hidden; }
.imgsmall { max-width:300px; cursor:pointer; }
.imgfull { display:block; max-height:85%; margin-left:auto; margin-right:auto; position: relative; top: 50%; transform: translateY(-50%); }
.closebtn { position:absolute; top:2rem; right:2rem; width:1.5rem; height:1.5rem; style="cursor:pointer;" }
Стили .row и .col - это очень быстрая настройка flexbox для отображения изображений на странице. Как вы показываете свои изображения, зависит от вас, поэтому вам не нужно следовать этому, если вы не хотите.
.imgsmall - это стиль, используемый для отображения небольшого изображения на странице, тогда как .imgfull будет использоваться для отображения большего изображения в нашем полноэкранном режиме.
.imgfull устанавливает максимальную высоту изображения на 85% от высоты экрана, и мы используем левое и правое поля для центрирования изображения по горизонтали. Чтобы центрировать его по вертикали, мы используем трюк css, чтобы расположить верх изображения на полпути вниз по экрану по высоте экрана, а затем перемещать изображение вверх на половину его собственной высоты. В результате изображение будет в центре по вертикали.
Для кнопки закрытия я создал квадратное изображение размером 64 пикселя с помощью инструмента редактирования изображений и добавил заглавную букву X в белый текст. Я масштабировал это, чтобы соответствовать размеру изображения, и сохранил его с прозрачным фоном как png. (Вы, вероятно, не увидите изображение ниже, потому что оно белое на белом.)
Убрав стили, давайте продолжим код JavaScript.
Во-первых, изображения. Используя очень простой стиль flexbox, я добавил несколько изображений, которые можно использовать вот так. Вы можете включать изображения на страницу, как хотите, поэтому убедитесь, что у вас есть изображения для работы с этим кодом.
<div class="row"> <div class="col"><img class="imgsmall" src="images/1.png" /></div> <div class="col"><img class="imgsmall" src="images/2.jpg" /></div> <div class="col"><img class="imgsmall" src="images/3.jpg" /></div> <div class="col"><img class="imgsmall" src="images/4.jpg" /></div> <div class="col"><img class="imgsmall" src="images/5.jpg" /></div> </div>
Теперь о коде.
Создайте переменную для хранения URL-адреса просматриваемого изображения.
var imgUrl = '';
Затем давайте создадим функции, которые мы будем использовать для запуска и закрытия полноэкранного просмотра.
function startFullScreen(img) {
imgUrl = img.src;
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
}
}
function endFullScreen() {
document.exitFullscreen();
}
Мы вызовем startFullScreen и передадим ему элемент изображения, по которому мы щелкнули, чтобы начать полноэкранный просмотр этого изображения. Это устанавливает src изображения в нашу переменную imgUrl, а затем запрашивает у браузера переход в полноэкранный режим. Через мгновение мы добавим eventListener, который будет обрабатывать все остальное, когда мы переключаемся в полноэкранный режим или из него. Функция endFullScreen просто сообщает браузеру, чтобы он прекратил работу в полноэкранном режиме.
Теперь давайте добавим eventListener, который будет фиксировать событие, которое запускается, когда браузер переключается между полноэкранным режимом. Мы будем использовать это для создания нашего элемента «darkBox» вместе с изображением и кнопками закрытия, когда мы войдем в полноэкранный режим, а затем удалим их снова после выхода из полноэкранного режима.
document.addEventListener("fullscreenchange", function(e) {
if (document.fullscreenElement) {
// Create the darkBox
var div = document.createElement("div");
div.id = "darkbox";
div.innerHTML = '<img class="imgfull" src="'+imgUrl+'" /> <img alt="exit fullscreen" title="Click to exit fullscreen (ESC)" class="closebtn" src="close.png" onclick="endFullScreen();" />';
document.getElementById("main").style.background = '#333';
document.getElementById("main").style.overflow = 'hidden';
document.getElementById("main").appendChild(div);
} else {
// remove the darkbox and reset the page
document.getElementById("main").style.background = 'white';
document.getElementById("main").style.overflow = 'auto';
var element = document.getElementById("darkbox");
element.parentNode.removeChild(element);
}
}, false);
Как вы видете. Когда событие запускается, мы проверяем, полноэкранный он или нет. Если это так, мы создаем новый div и присваиваем ему идентификатор «darkbox». Затем мы заполняем его тегом изображения, который имеет класс imgFull и imgUrl в качестве src. Мы также добавляем кнопку закрытия, используя это простое изображение X, которое мы создали, и размещаем его в правом верхнем углу. Мы также меняем цвет фона тела и устанавливаем переполнение как скрытое, чтобы полосы прокрутки не отображались.
Если мы выходим из полноэкранного режима, мы должны удалить элемент div «darkbox» и сбросить тег body обратно.
Наконец, давайте добавим самоисполняющуюся функцию, которая будет запускаться при загрузке страницы, которая автоматически присоединит обработчики событий клика к изображениям на странице для нас.
(function() {
imgelements = document.querySelectorAll("img");
for(i = 0; i < imgelements.length; i++) {
// add click event listener for all images on page
imgelements[i].addEventListener("click", function(e) {
var targetElement = event.target || event.srcElement;
startFullScreen(targetElement);
}, false);
}
})();
Здесь мы просто используем функцию querySelectorAll, чтобы получить все изображения на странице. Затем мы перебираем результаты и присоединяем прослушиватель событий для каждого из них. При нажатии мы вызываем функцию startFullScreen, которую создали сначала, и передаем ей targetElement. Это установит imgUrl и запросит полноэкранный режим.
Вот и все. Добавьте код на свою страницу, обновите, и вы сможете щелкнуть изображения, чтобы получить красивый полноэкранный предварительный просмотр, который выглядит примерно так.
Примечание. Фотография, показанная в этом превью, сделана Эбен Одонкор из Pexels.
Можно ли это улучшить? Конечно. Написав это, я подумал о том, как мы могли бы это улучшить, но я уверен, что вам, вероятно, придется. Я вернусь к нему в будущем, чтобы внести эти улучшения, но пока я надеюсь, что вы найдете это полезным.
