MediaWiki:Common.js: различия между версиями
Перейти к навигации
Перейти к поиску
Нет описания правки Метка: отменено |
Нет описания правки |
||
(не показано 8 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
// Находим все изображения на странице | |||
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(); | |||
} | |||
}); | |||
}); | |||
}); |
Текущая версия от 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(); } }); }); });