|
|
| Рядок 243: |
Рядок 243: |
| e.preventDefault(); | | e.preventDefault(); |
| showFilePageOverlay(target.href); | | showFilePageOverlay(target.href); |
| }
| |
| });
| |
|
| |
| })();
| |
|
| |
| (function() {
| |
| // ====== CSS для overlay ======
| |
| const style = document.createElement('style');
| |
| style.innerHTML = `
| |
| .custom-overlay {
| |
| position: fixed;
| |
| top:0; left:0;
| |
| width:100%; height:100%;
| |
| background: rgba(0,0,0,0.85);
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| flex-direction: column;
| |
| z-index: 9999;
| |
| opacity: 0;
| |
| transition: opacity 0.3s ease;
| |
| }
| |
| .custom-overlay.show { opacity: 1; }
| |
| .custom-overlay img {
| |
| max-width: 90%;
| |
| max-height: 90%;
| |
| border-radius: 5px;
| |
| box-shadow: 0 0 20px rgba(0,0,0,0.5);
| |
| }
| |
| .custom-overlay button {
| |
| margin: 10px;
| |
| padding: 8px 15px;
| |
| font-size: 16px;
| |
| cursor: pointer;
| |
| background: #f44336;
| |
| color: white;
| |
| border: none;
| |
| border-radius: 4px;
| |
| }
| |
| .nav-buttons { display: flex; justify-content: center; }
| |
| `;
| |
| document.head.appendChild(style);
| |
|
| |
| // ====== Переменные галереи ======
| |
| let images = Array.from(document.querySelectorAll('img'));
| |
| let currentIndex = 0;
| |
| let overlay, imgElement;
| |
|
| |
| // ====== Функция показа overlay ======
| |
| function showOverlay(index) {
| |
| currentIndex = index;
| |
| const url = images[currentIndex].src;
| |
|
| |
| // Если overlay уже существует — просто меняем изображение
| |
| if (!overlay) {
| |
| overlay = document.createElement('div');
| |
| overlay.className = 'custom-overlay';
| |
|
| |
| imgElement = document.createElement('img');
| |
| overlay.appendChild(imgElement);
| |
|
| |
| // Кнопка Закрити
| |
| const closeBtn = document.createElement('button');
| |
| closeBtn.innerText = '✕ Закрити';
| |
| closeBtn.addEventListener('click', () => overlay.remove());
| |
| overlay.appendChild(closeBtn);
| |
|
| |
| // Кнопки навигации
| |
| const navDiv = document.createElement('div');
| |
| navDiv.className = 'nav-buttons';
| |
|
| |
| const prevBtn = document.createElement('button');
| |
| prevBtn.innerText = '← Назад';
| |
| prevBtn.addEventListener('click', (e) => {
| |
| e.stopPropagation();
| |
| currentIndex = (currentIndex - 1 + images.length) % images.length;
| |
| imgElement.src = images[currentIndex].src;
| |
| });
| |
|
| |
| const nextBtn = document.createElement('button');
| |
| nextBtn.innerText = 'Вперед →';
| |
| nextBtn.addEventListener('click', (e) => {
| |
| e.stopPropagation();
| |
| currentIndex = (currentIndex + 1) % images.length;
| |
| imgElement.src = images[currentIndex].src;
| |
| });
| |
|
| |
| navDiv.appendChild(prevBtn);
| |
| navDiv.appendChild(nextBtn);
| |
| overlay.appendChild(navDiv);
| |
|
| |
| // Закрытие кликом по фону
| |
| overlay.addEventListener('click', e => {
| |
| if (e.target === overlay) overlay.remove();
| |
| });
| |
|
| |
| document.body.appendChild(overlay);
| |
| }
| |
|
| |
| imgElement.src = url;
| |
| overlay.classList.add('show');
| |
| }
| |
|
| |
| // ====== Перехват кликов на изображения ======
| |
| document.body.addEventListener('click', e => {
| |
| const target = e.target;
| |
| if (target.tagName === 'IMG') {
| |
| const parentLink = target.closest('a[href*="/w/images/"]');
| |
| if (!parentLink) {
| |
| e.preventDefault();
| |
| showOverlay(images.indexOf(target));
| |
| }
| |
| } | | } |
| }); | | }); |
|
| |
|
| })(); | | })(); |