MediaWiki:Common.js: различия между версиями
Перейти к навигации
Перейти к поиску
Нет описания правки |
Нет описания правки |
||
(не показаны 2 промежуточные версии этого же участника) | |||
Строка 4: | Строка 4: | ||
// Для каждого изображения добавляем обработчик события | // Для каждого изображения добавляем обработчик события | ||
images.forEach(function(image) { | images.forEach(function(image) { | ||
image.addEventListener('click', function() { | image.addEventListener('click', function(event) { | ||
// Отменяем переход по ссылке | |||
event.preventDefault(); | |||
// Создаем элемент для полноэкранного просмотра | // Создаем элемент для полноэкранного просмотра | ||
var fullscreenContainer = document.createElement('div'); | var fullscreenContainer = document.createElement('div'); | ||
Строка 31: | Строка 34: | ||
// Добавляем контейнер в тело документа | // Добавляем контейнер в тело документа | ||
document.body.appendChild(fullscreenContainer); | document.body.appendChild(fullscreenContainer); | ||
// Добавляем обработчик события клика на контейнер полноэкранного просмотра | |||
fullscreenContainer.addEventListener('click', function(event) { | |||
// Проверяем, был ли клик выполнен вне изображения | |||
if (event.target === fullscreenContainer) { | |||
// Удаляем элементы при клике на пустую область | |||
fullscreenContainer.remove(); | |||
} | |||
}); | |||
}); | }); | ||
}); | }); |
Текущая версия от 13:05, 27 апреля 2024
// Находим все изображения на странице var images = document.querySelectorAll('.mw-default-size img'); // Для каждого изображения добавляем обработчик события images.forEach(function(image) { image.addEventListener('click', function(event) { // Отменяем переход по ссылке event.preventDefault(); // Создаем элемент для полноэкранного просмотра var fullscreenContainer = document.createElement('div'); fullscreenContainer.className = 'fullscreen-container'; // Создаем изображение для полноэкранного просмотра var fullscreenImage = document.createElement('img'); fullscreenImage.src = image.src; fullscreenImage.className = 'fullscreen-image'; // Создаем кнопку для закрытия полноэкранного режима var closeButton = document.createElement('button'); closeButton.textContent = 'Закрыть'; closeButton.className = 'close-button'; // Добавляем обработчик события для кнопки закрытия closeButton.addEventListener('click', function() { // Удаляем элементы при закрытии полноэкранного режима fullscreenContainer.remove(); }); // Добавляем изображение и кнопку закрытия в контейнер для полноэкранного просмотра fullscreenContainer.appendChild(fullscreenImage); fullscreenContainer.appendChild(closeButton); // Добавляем контейнер в тело документа document.body.appendChild(fullscreenContainer); // Добавляем обработчик события клика на контейнер полноэкранного просмотра fullscreenContainer.addEventListener('click', function(event) { // Проверяем, был ли клик выполнен вне изображения if (event.target === fullscreenContainer) { // Удаляем элементы при клике на пустую область fullscreenContainer.remove(); } }); }); });