|
|
| Строка 119: |
Строка 119: |
| window.vkVideoInit(); | | window.vkVideoInit(); |
| } | | } |
|
| |
|
| |
| /* Простое раскрытие картинок во всплывающем окне по клику на них (для удобства назову — FancyBoxAlternative) */
| |
|
| |
| (function() {
| |
| 'use strict';
| |
|
| |
| if (document.getElementById('wikiImageModal')) {
| |
| return;
| |
| }
| |
|
| |
| var modalHTML = [
| |
| '<div id="wikiImageModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); z-index: 10000; cursor: zoom-out;">',
| |
| ' <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90vw; max-height: 90vh;">',
| |
| ' <img id="wikiModalImage" style="max-width: 100%; max-height: 100%; display: block; margin: 0 auto;" src="" alt="">',
| |
| ' <div id="wikiModalCaption" style="color: white; text-align: center; padding: 10px; font-size: 16px;"></div>',
| |
| ' </div>',
| |
| ' <button id="wikiModalClose" style="position: absolute; top: 20px; right: 30px; background: none; border: none; color: white; font-size: 40px; cursor: pointer; z-index: 10001;">×</button>',
| |
| '</div>'
| |
| ].join('');
| |
|
| |
| document.body.insertAdjacentHTML('beforeend', modalHTML);
| |
|
| |
| var modal = document.getElementById('wikiImageModal');
| |
| var modalImg = document.getElementById('wikiModalImage');
| |
| var modalCaption = document.getElementById('wikiModalCaption');
| |
| var closeBtn = document.getElementById('wikiModalClose');
| |
|
| |
| function openModal(img) {
| |
| // Check if this is a video element handled by TimedMediaHandler
| |
| if (isVideoElement(img)) {
| |
| return;
| |
| }
| |
|
| |
| modalImg.src = img.src;
| |
| modalCaption.textContent = img.alt || img.title || 'Изображение';
| |
| modal.style.display = 'block';
| |
| document.body.style.overflow = 'hidden';
| |
| }
| |
|
| |
| function closeModal() {
| |
| modal.style.display = 'none';
| |
| document.body.style.overflow = 'auto';
| |
| }
| |
|
| |
| function isVideoElement(element) {
| |
| if (element.closest('.video-js') ||
| |
| element.closest('.mw-tmh-player') ||
| |
| element.closest('.mw-tmh-thumbnail') ||
| |
| element.parentNode.classList.contains('mw-tmh-player') ||
| |
| element.src && (element.src.includes('.ogv') || element.src.includes('.webm') || element.src.includes('.oga'))) {
| |
| return true;
| |
| }
| |
| return false;
| |
| }
| |
|
| |
| function addImageHandlers() {
| |
| var images = document.querySelectorAll('img');
| |
|
| |
| images.forEach(function(img) {
| |
| // Skip if already has handler or is modal image
| |
| if (img.hasAttribute('data-zoom-handler') ||
| |
| img === modalImg ||
| |
| img.classList.contains('no-zoom')) {
| |
| return;
| |
| }
| |
|
| |
| // Skip video-related images
| |
| if (isVideoElement(img)) {
| |
| return;
| |
| }
| |
|
| |
| // Add visual feedback
| |
| img.style.cursor = 'zoom-in';
| |
| img.style.transition = 'opacity 0.2s';
| |
|
| |
| img.addEventListener('mouseenter', function() {
| |
| this.style.opacity = '0.9';
| |
| });
| |
|
| |
| img.addEventListener('mouseleave', function() {
| |
| this.style.opacity = '1';
| |
| });
| |
|
| |
| // Add click handler
| |
| img.addEventListener('click', function(e) {
| |
| e.preventDefault();
| |
| e.stopPropagation();
| |
| openModal(this);
| |
| });
| |
|
| |
| // Mark as processed
| |
| img.setAttribute('data-zoom-handler', 'true');
| |
| });
| |
| }
| |
|
| |
| closeBtn.addEventListener('click', closeModal);
| |
| modal.addEventListener('click', closeModal);
| |
|
| |
| // Prevent modal content from closing modal when clicked
| |
| modalImg.addEventListener('click', function(e) {
| |
| e.stopPropagation();
| |
| });
| |
|
| |
| // Close modal with Escape key
| |
| document.addEventListener('keydown', function(e) {
| |
| if (e.key === 'Escape' && modal.style.display === 'block') {
| |
| closeModal();
| |
| }
| |
| });
| |
|
| |
| // Initialize when DOM is ready
| |
| if (document.readyState === 'loading') {
| |
| document.addEventListener('DOMContentLoaded', addImageHandlers);
| |
| } else {
| |
| addImageHandlers();
| |
| }
| |
|
| |
| var observer = new MutationObserver(function(mutations) {
| |
| mutations.forEach(function(mutation) {
| |
| if (mutation.addedNodes.length) {
| |
| setTimeout(addImageHandlers, 100);
| |
| }
| |
| });
| |
| });
| |
|
| |
| observer.observe(document.body, {
| |
| childList: true,
| |
| subtree: true
| |
| });
| |
|
| |
| })();
| |