MediaWiki:Common.js: различия между версиями

Материал из Semantex
Перейти к навигации Перейти к поиску
Нет описания правки
Нет описания правки
 
(не показана 1 промежуточная версия этого же участника)
Строка 1: Строка 1:
// Находим все изображения на странице
// Находим все изображения на странице
var images = document.querySelectorAll('.mw-default-size img');
var images = document.querySelectorAll('.mw-default-size img');
console.log(images);


// Для каждого изображения добавляем обработчик события
// Для каждого изображения добавляем обработчик события
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');
Строка 33: Строка 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();
            }
        });
    });
});