zoomora 1.3.0 → 1.4.0

package/src/zoomora.js

@@ -1,5 +1,5 @@
 /*!
- * Zoomora Lightbox Plugin v1.3.0
+ * Zoomora Lightbox Plugin v1.4.0
  * A modern, responsive lightbox plugin with zoom, fullscreen, and gallery features
  *
  * Copyright (c) 2026 Faruk Ahmed (FrontTheme)
@@ -9,153 +9,138 @@
 // Import styles
 import './styles/zoomora.scss';
 
-(function (global, factory) {
-  'use strict';
+/**
+ * Zoomora Lightbox Plugin
+ * @class
+ */
+class Zoomora {
+  /**
+   * Default configuration options
+   * @type {Object}
+   */
+  static get defaults() {
+    return {
+      selector: '[data-zoomora]',
+      showCounter: true,
+      showThumbnails: true,
+      showFullscreen: true,
+      showZoom: true,
+      transition: 'fade', // 'fade' or 'slide'
+      useHref: false, // Use href instead of data-src
+      maxZoomScale: 3, // Maximum zoom scale
+      zoomStep: 0.1, // Zoom step for scroll wheel
+      animationDuration: 300, // Animation duration in ms
+      closeOnBackgroundClick: true, // Close lightbox when clicking on background
+      autoplayVideos: false, // Start YouTube and local videos when their slide opens
+      onOpen: null, // Callback when lightbox opens
+      onClose: null, // Callback when lightbox closes
+      onNext: null, // Callback when navigating to next item
+      onPrev: null, // Callback when navigating to previous item
 
-  if (typeof module === 'object' && typeof module.exports === 'object') {
-    // CommonJS/Node.js
-    module.exports = factory();
-  } else if (typeof define === 'function' && define.amd) {
-    // AMD
-    define(factory);
-  } else {
-    // Browser globals
-    global.Zoomora = factory();
+      // Auto-hide controls
+      showAutoHideToggle: true, // Show auto-hide toggle button
+      autoHideDelay: 3000, // Delay in ms before hiding controls
+      autoHideEnabled: false, // Default state of auto-hide
+    };
   }
-}(typeof window !== 'undefined' ? window : this, function () {
-  'use strict';
 
   /**
-   * Zoomora Lightbox Plugin
-   * @class
+   * Constructor
+   * @param {Object} options - Configuration options
    */
-  class Zoomora {
-    /**
-     * Default configuration options
-     * @type {Object}
-     */
-    static get defaults() {
-      return {
-        selector: '[data-zoomora]',
-        showCounter: true,
-        showThumbnails: true,
-        showFullscreen: true,
-        showZoom: true,
-        transition: 'fade', // 'fade' or 'slide'
-        useHref: false, // Use href instead of data-src
-        maxZoomScale: 3, // Maximum zoom scale
-        zoomStep: 0.1, // Zoom step for scroll wheel
-        animationDuration: 300, // Animation duration in ms
-        closeOnBackgroundClick: true, // Close lightbox when clicking on background
-        onOpen: null, // Callback when lightbox opens
-        onClose: null, // Callback when lightbox closes
-        onNext: null, // Callback when navigating to next item
-        onPrev: null, // Callback when navigating to previous item
-
-        // Auto-hide controls
-        showAutoHideToggle: true, // Show auto-hide toggle button
-        autoHideDelay: 3000, // Delay in ms before hiding controls
-        autoHideEnabled: false, // Default state of auto-hide
-      };
-    }
-
-    /**
-     * Constructor
-     * @param {Object} options - Configuration options
-     */
-    constructor(options = {}) {
-      this.options = {...Zoomora.defaults, ...options};
-      this.currentIndex = 0;
-      this.items = [];
-      this.isZoomed = false;
-      this.isFullscreen = false;
-      this.isDragging = false;
-      this.thumbnailsVisible = true;
-      this.startX = 0;
-      this.startY = 0;
-      this.currentX = 0;
-      this.currentY = 0;
-      this.currentScale = 1;
-      this.isInitialized = false;
-      this.eventListeners = new Map();
+  constructor(options = {}) {
+    this.options = {...Zoomora.defaults, ...options};
+    this.currentIndex = 0;
+    this.items = [];
+    this.isZoomed = false;
+    this.isFullscreen = false;
+    this.isDragging = false;
+    this.thumbnailsVisible = true;
+    this.startX = 0;
+    this.startY = 0;
+    this.currentX = 0;
+    this.currentY = 0;
+    this.currentScale = 1;
+    this.isInitialized = false;
+    this.eventListeners = new Map();
+
+    // Auto-hide controls
+    this.autoHideEnabled = false;
+    this.autoHideTimeout = null;
+    this.autoHideDelay = 3000;
+    this.isControlsVisible = true;
+
+    this.lastDragTime = 0;
+    this.boundMethods = {
+      handleDocumentClick: this.handleDocumentClick.bind(this),
+      handleKeydown: this.handleKeydown.bind(this),
+      handleFullscreenChange: this.handleFullscreenChange.bind(this),
+      handleZoomoraClick: this.handleZoomoraClick.bind(this),
+      handleContentClick: this.handleContentClick.bind(this),
+      handleMouseDown: this.handleMouseDown.bind(this),
+      handleMouseMove: this.handleMouseMove.bind(this),
+      handleMouseUp: this.handleMouseUp.bind(this),
+      handleTouchStart: this.handleTouchStart.bind(this),
+      handleTouchMove: this.handleTouchMove.bind(this),
+      handleTouchEnd: this.handleTouchEnd.bind(this),
+      handleWheel: this.handleWheel.bind(this),
+    };
+
+    this.init();
+  }
 
-      // Auto-hide controls
-      this.autoHideEnabled = false;
-      this.autoHideTimeout = null;
-      this.autoHideDelay = 3000;
-      this.isControlsVisible = true;
-
-      this.lastDragTime = 0;
-      this.boundMethods = {
-        handleDocumentClick: this.handleDocumentClick.bind(this),
-        handleKeydown: this.handleKeydown.bind(this),
-        handleFullscreenChange: this.handleFullscreenChange.bind(this),
-        handleZoomoraClick: this.handleZoomoraClick.bind(this),
-        handleContentClick: this.handleContentClick.bind(this),
-        handleMouseDown: this.handleMouseDown.bind(this),
-        handleMouseMove: this.handleMouseMove.bind(this),
-        handleMouseUp: this.handleMouseUp.bind(this),
-        handleTouchStart: this.handleTouchStart.bind(this),
-        handleTouchMove: this.handleTouchMove.bind(this),
-        handleTouchEnd: this.handleTouchEnd.bind(this),
-        handleWheel: this.handleWheel.bind(this),
-      };
-
-      this.init();
-    }
-
-    /**
-     * Initialize the plugin
-     */
-    init() {
-      if (this.isInitialized) {
-        console.warn('Zoomora: Plugin already initialized');
-        return;
-      }
+  /**
+   * Initialize the plugin
+   */
+  init() {
+    if (this.isInitialized) {
+      console.warn('Zoomora: Plugin already initialized');
+      return;
+    }
 
-      try {
-        this.createLightbox();
-        this.bindEvents();
+    try {
+      this.createLightbox();
+      this.bindEvents();
 
-        this.isInitialized = true;
-      } catch (error) {
-        console.error('Zoomora: Initialization failed', error);
-      }
+      this.isInitialized = true;
+    } catch (error) {
+      console.error('Zoomora: Initialization failed', error);
     }
+  }
 
-    /**
-     * Static method to bind to anchor tags with href
-     * @param {string} selector - CSS selector
-     * @param {Object} options - Configuration options
-     * @returns {Zoomora} - New Zoomora instance
-     */
-    static bind(selector, options = {}) {
-      const enhancedOptions = {
-        ...options,
-        selector: selector,
-        useHref: true
-      };
-      return new Zoomora(enhancedOptions);
-    }
-
-    /**
-     * Create lightbox HTML structure
-     */
-    createLightbox() {
-      // Check if lightbox already exists
-      if (document.getElementById('zoomoraLightbox')) {
-        console.warn('Zoomora: Lightbox already exists in DOM');
-        return;
-      }
+  /**
+   * Static method to bind to anchor tags with href
+   * @param {string} selector - CSS selector
+   * @param {Object} options - Configuration options
+   * @returns {Zoomora} - New Zoomora instance
+   */
+  static bind(selector, options = {}) {
+    const enhancedOptions = {
+      ...options,
+      selector: selector,
+      useHref: true
+    };
+    return new Zoomora(enhancedOptions);
+  }
+
+  /**
+   * Create lightbox HTML structure
+   */
+  createLightbox() {
+    // Check if lightbox already exists
+    if (document.getElementById('zoomoraLightbox')) {
+      console.warn('Zoomora: Lightbox already exists in DOM');
+      return;
+    }
 
-      // Build auto-hide button conditionally
-      const autoHideButtonHTML = this.options.showAutoHideToggle ? `
+    // Build auto-hide button conditionally
+    const autoHideButtonHTML = this.options.showAutoHideToggle ? `
         <button class="zoomora-btn" id="zoomoraAutoHideBtn" title="Toggle Auto-Hide Controls">
           <i class="zoomorai-controls-off"></i>
         </button>
       ` : '';
 
-      const zoomoraHTML = `
+    const zoomoraHTML = `
         <div class="zoomora" id="zoomoraLightbox">
           <div class="zoomora-container">
             <div class="zoomora-header" id="zoomoraHeader">
@@ -204,1560 +189,1604 @@ import './styles/zoomora.scss';
         </div>
       `;
 
-      document.body.insertAdjacentHTML('beforeend', zoomoraHTML);
-
-      // Cache DOM elements
-      this.zoomora = document.getElementById('zoomoraLightbox');
-      this.header = document.getElementById('zoomoraHeader');
-      this.content = document.getElementById('zoomoraContent');
-      this.slidesContainer = document.getElementById('zoomoraSlidesContainer');
-      this.counter = document.getElementById('zoomoraCounter');
-      this.thumbs = document.getElementById('zoomoraThumbs');
-      this.loading = document.getElementById('zoomoraLoading');
-      this.caption = document.getElementById('zoomoraCaption');
-      this.prevBtn = document.getElementById('zoomoraPrevBtn');
-      this.nextBtn = document.getElementById('zoomoraNextBtn');
-
-      // Verify all elements were created
-      if (!this.zoomora || !this.content || !this.counter || !this.thumbs || !this.loading || !this.caption) {
-        throw new Error('Failed to create required DOM elements');
-      }
+    document.body.insertAdjacentHTML('beforeend', zoomoraHTML);
+
+    // Cache DOM elements
+    this.zoomora = document.getElementById('zoomoraLightbox');
+    this.header = document.getElementById('zoomoraHeader');
+    this.content = document.getElementById('zoomoraContent');
+    this.slidesContainer = document.getElementById('zoomoraSlidesContainer');
+    this.counter = document.getElementById('zoomoraCounter');
+    this.thumbs = document.getElementById('zoomoraThumbs');
+    this.loading = document.getElementById('zoomoraLoading');
+    this.caption = document.getElementById('zoomoraCaption');
+    this.prevBtn = document.getElementById('zoomoraPrevBtn');
+    this.nextBtn = document.getElementById('zoomoraNextBtn');
+
+    // Verify all elements were created
+    if (!this.zoomora || !this.content || !this.counter || !this.thumbs || !this.loading || !this.caption) {
+      throw new Error('Failed to create required DOM elements');
     }
+  }
 
-    /**
-     * Bind event listeners
-     */
-    bindEvents() {
-      // Document click handler for opening lightbox
-      this.addEventListener(document, 'click', this.boundMethods.handleDocumentClick);
-
-      // Control button handlers
-      this.addEventListener(document.getElementById('zoomoraCloseBtn'), 'click', () => this.close());
-      this.addEventListener(document.getElementById('zoomoraPrevBtn'), 'click', () => this.prev());
-      this.addEventListener(document.getElementById('zoomoraNextBtn'), 'click', () => this.next());
-      if (this.options.showZoom) {
-        this.addEventListener(document.getElementById('zoomoraZoomBtn'), 'click', () => this.toggleZoom());
-      }
-      if (this.options.showFullscreen) {
-        this.addEventListener(document.getElementById('zoomoraFullscreenBtn'), 'click', () => this.toggleFullscreen());
-        this.addEventListener(document.getElementById('zoomoraCollapseBtn'), 'click', () => this.exitFullscreen());
-      }
-      if (this.options.showThumbnails) {
-        this.addEventListener(document.getElementById('zoomoraThumbnailBtn'), 'click', () => this.toggleThumbnails());
-      }
+  /**
+   * Bind event listeners
+   */
+  bindEvents() {
+    // Document click handler for opening lightbox
+    this.addEventListener(document, 'click', this.boundMethods.handleDocumentClick);
+
+    // Control button handlers
+    this.addEventListener(document.getElementById('zoomoraCloseBtn'), 'click', () => this.close());
+    this.addEventListener(document.getElementById('zoomoraPrevBtn'), 'click', () => this.prev());
+    this.addEventListener(document.getElementById('zoomoraNextBtn'), 'click', () => this.next());
+    if (this.options.showZoom) {
+      this.addEventListener(document.getElementById('zoomoraZoomBtn'), 'click', () => this.toggleZoom());
+    }
+    if (this.options.showFullscreen) {
+      this.addEventListener(document.getElementById('zoomoraFullscreenBtn'), 'click', () => this.toggleFullscreen());
+      this.addEventListener(document.getElementById('zoomoraCollapseBtn'), 'click', () => this.exitFullscreen());
+    }
+    if (this.options.showThumbnails) {
+      this.addEventListener(document.getElementById('zoomoraThumbnailBtn'), 'click', () => this.toggleThumbnails());
+    }
 
-      // Fullscreen change events
-      this.addEventListener(document, 'fullscreenchange', this.boundMethods.handleFullscreenChange);
-      this.addEventListener(document, 'webkitfullscreenchange', this.boundMethods.handleFullscreenChange);
-      this.addEventListener(document, 'mozfullscreenchange', this.boundMethods.handleFullscreenChange);
-      this.addEventListener(document, 'MSFullscreenChange', this.boundMethods.handleFullscreenChange);
+    // Fullscreen change events
+    this.addEventListener(document, 'fullscreenchange', this.boundMethods.handleFullscreenChange);
+    this.addEventListener(document, 'webkitfullscreenchange', this.boundMethods.handleFullscreenChange);
+    this.addEventListener(document, 'mozfullscreenchange', this.boundMethods.handleFullscreenChange);
+    this.addEventListener(document, 'MSFullscreenChange', this.boundMethods.handleFullscreenChange);
 
-      // Keyboard navigation
-      this.addEventListener(document, 'keydown', this.boundMethods.handleKeydown);
+    // Keyboard navigation
+    this.addEventListener(document, 'keydown', this.boundMethods.handleKeydown);
 
-      // Lightbox click to close
-      this.addEventListener(this.zoomora, 'click', this.boundMethods.handleZoomoraClick);
+    // Lightbox click to close
+    this.addEventListener(this.zoomora, 'click', this.boundMethods.handleZoomoraClick);
 
-      // Content click for zoom toggle and background click
-      this.addEventListener(this.content, 'click', this.boundMethods.handleContentClick);
+    // Content click for zoom toggle and background click
+    this.addEventListener(this.content, 'click', this.boundMethods.handleContentClick);
 
-      // Mouse drag events
-      this.addEventListener(this.content, 'mousedown', this.boundMethods.handleMouseDown);
-      this.addEventListener(this.content, 'mousemove', this.boundMethods.handleMouseMove);
-      this.addEventListener(this.content, 'mouseup', this.boundMethods.handleMouseUp);
-      this.addEventListener(this.content, 'mouseleave', this.boundMethods.handleMouseUp);
+    // Mouse drag events
+    this.addEventListener(this.content, 'mousedown', this.boundMethods.handleMouseDown);
+    this.addEventListener(this.content, 'mousemove', this.boundMethods.handleMouseMove);
+    this.addEventListener(this.content, 'mouseup', this.boundMethods.handleMouseUp);
+    this.addEventListener(this.content, 'mouseleave', this.boundMethods.handleMouseUp);
 
-      // Touch events
-      this.addEventListener(this.content, 'touchstart', this.boundMethods.handleTouchStart, {passive: false});
-      this.addEventListener(this.content, 'touchmove', this.boundMethods.handleTouchMove, {passive: false});
-      this.addEventListener(this.content, 'touchend', this.boundMethods.handleTouchEnd);
+    // Touch events
+    this.addEventListener(this.content, 'touchstart', this.boundMethods.handleTouchStart, {passive: false});
+    this.addEventListener(this.content, 'touchmove', this.boundMethods.handleTouchMove, {passive: false});
+    this.addEventListener(this.content, 'touchend', this.boundMethods.handleTouchEnd);
 
-      // Scroll-wheel zoom
-      if (this.options.showZoom) {
-        this.addEventListener(this.content, 'wheel', this.boundMethods.handleWheel, {passive: false});
-      }
+    // Scroll-wheel zoom
+    if (this.options.showZoom) {
+      this.addEventListener(this.content, 'wheel', this.boundMethods.handleWheel, {passive: false});
+    }
 
-      // Add auto-hide toggle button handler (only if enabled)
-      if (this.options.showAutoHideToggle) {
-        this.addEventListener(document.getElementById('zoomoraAutoHideBtn'), 'click', () => this.toggleAutoHide());
+    // Add auto-hide toggle button handler (only if enabled)
+    if (this.options.showAutoHideToggle) {
+      this.addEventListener(document.getElementById('zoomoraAutoHideBtn'), 'click', () => this.toggleAutoHide());
 
-        // Add mouse/touch activity listeners for auto-hide
-        this.addEventListener(this.zoomora, 'mousemove', () => this.handleUserActivity());
-        this.addEventListener(this.zoomora, 'touchstart', () => this.handleUserActivity());
-        this.addEventListener(this.zoomora, 'keydown', () => this.handleUserActivity());
-      }
+      // Add mouse/touch activity listeners for auto-hide
+      this.addEventListener(this.zoomora, 'mousemove', () => this.handleUserActivity());
+      this.addEventListener(this.zoomora, 'touchstart', () => this.handleUserActivity());
+      this.addEventListener(this.zoomora, 'keydown', () => this.handleUserActivity());
     }
+  }
 
-    /**
-     * Add event listener with cleanup tracking
-     * @param {EventTarget} element - DOM element or document
-     * @param {string} event - Event type
-     * @param {Function} handler - Event handler
-     * @param {Object} options - Event options
-     */
-    addEventListener(element, event, handler, options = {}) {
-      if (!element) return;
+  /**
+   * Add event listener with cleanup tracking
+   * @param {EventTarget} element - DOM element or document
+   * @param {string} event - Event type
+   * @param {Function} handler - Event handler
+   * @param {Object} options - Event options
+   */
+  addEventListener(element, event, handler, options = {}) {
+    if (!element) return;
 
-      element.addEventListener(event, handler, options);
+    element.addEventListener(event, handler, options);
 
-      // Track for cleanup
-      const key = `${element.constructor.name}_${event}`;
-      if (!this.eventListeners.has(key)) {
-        this.eventListeners.set(key, []);
-      }
-      this.eventListeners.get(key).push({element, event, handler, options});
-    }
-
-    /**
-     * Handle document click events
-     * @param {Event} e - Click event
-     */
-    handleDocumentClick(e) {
-      const target = e.target.closest(this.options.selector);
-      if (target) {
-        e.preventDefault();
-        this.open(target);
-      }
+    // Track for cleanup
+    const key = `${element.constructor.name}_${event}`;
+    if (!this.eventListeners.has(key)) {
+      this.eventListeners.set(key, []);
     }
+    this.eventListeners.get(key).push({element, event, handler, options});
+  }
 
-    /**
-     * Handle keyboard events
-     * @param {KeyboardEvent} e - Keyboard event
-     */
-    handleKeydown(e) {
-      if (!this.zoomora.classList.contains('active')) return;
-
-      switch (e.key) {
-        case 'Escape':
-          if (this.isFullscreen) {
-            this.exitFullscreen();
-          } else {
-            this.close();
-          }
-          break;
-        case 'ArrowLeft':
-          this.prev();
-          break;
-        case 'ArrowRight':
-          this.next();
-          break;
-        case 'z':
-        case 'Z':
-          this.toggleZoom();
-          break;
-        case 'f':
-        case 'F':
-          this.toggleFullscreen();
-          break;
-        case 't':
-        case 'T':
-          this.toggleThumbnails();
-          break;
-      }
+  /**
+   * Handle document click events
+   * @param {Event} e - Click event
+   */
+  handleDocumentClick(e) {
+    const target = e.target.closest(this.options.selector);
+    if (target) {
+      e.preventDefault();
+      this.open(target);
     }
+  }
 
-    /**
-     * Handle fullscreen change events
-     */
-    handleFullscreenChange() {
-      const isInFullscreen = !!(
-        document.fullscreenElement ||
-        document.webkitFullscreenElement ||
-        document.mozFullScreenElement ||
-        document.msFullscreenElement
-      );
+  /**
+   * Handle keyboard events
+   * @param {KeyboardEvent} e - Keyboard event
+   */
+  handleKeydown(e) {
+    if (!this.zoomora.classList.contains('active')) {
+      this.handleTriggerKeydown(e);
+      return;
+    }
 
-      // Only update if state changed from fullscreen to not fullscreen
-      if (!isInFullscreen && this.isFullscreen) {
-        this.isFullscreen = false;
-        this.zoomora.classList.remove('fullscreen');
-        this.updateButtons();
-      }
-      // Update if entering fullscreen
-      else if (isInFullscreen && !this.isFullscreen) {
-        this.isFullscreen = true;
-        this.zoomora.classList.add('fullscreen');
-        this.updateButtons();
-      }
+    switch (e.key) {
+      case 'Escape':
+        if (this.isFullscreen) {
+          this.exitFullscreen();
+        } else {
+          this.close();
+        }
+        break;
+      case 'ArrowLeft':
+        this.prev();
+        break;
+      case 'ArrowRight':
+        this.next();
+        break;
+      case 'z':
+      case 'Z':
+        this.toggleZoom();
+        break;
+      case 'f':
+      case 'F':
+        this.toggleFullscreen();
+        break;
+      case 't':
+      case 'T':
+        this.toggleThumbnails();
+        break;
     }
+  }
 
-    /**
-     * Handle zoomora container clicks
-     * @param {Event} e - Click event
-     */
-    handleZoomoraClick(e) {
-      if (e.target === this.zoomora && this.options.closeOnBackgroundClick) {
-        this.close();
-      }
+  /**
+   * Open the lightbox with Enter or Space on a focused trigger
+   * @param {KeyboardEvent} e - Keyboard event
+   */
+  handleTriggerKeydown(e) {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+
+    const trigger = e.target.closest(this.options.selector);
+    if (!trigger) return;
+
+    e.preventDefault();
+    this.open(trigger);
+  }
+
+  /**
+   * Handle fullscreen change events
+   */
+  handleFullscreenChange() {
+    const isInFullscreen = !!(
+      document.fullscreenElement ||
+      document.webkitFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.msFullscreenElement
+    );
+
+    // Only update if state changed from fullscreen to not fullscreen
+    if (!isInFullscreen && this.isFullscreen) {
+      this.isFullscreen = false;
+      this.zoomora.classList.remove('fullscreen');
+      this.updateButtons();
+    }
+    // Update if entering fullscreen
+    else if (isInFullscreen && !this.isFullscreen) {
+      this.isFullscreen = true;
+      this.zoomora.classList.add('fullscreen');
+      this.updateButtons();
     }
+  }
 
-    /**
-     * Handle content clicks
-     * @param {Event} e - Click event
-     */
-    handleContentClick(e) {
-      // Ignore click if we just finished dragging (within 200ms)
-      if (Date.now() - this.lastDragTime < 200) {
-        return;
-      }
+  /**
+   * Handle zoomora container clicks
+   * @param {Event} e - Click event
+   */
+  handleZoomoraClick(e) {
+    if (e.target === this.zoomora && this.options.closeOnBackgroundClick) {
+      this.close();
+    }
+  }
 
-      // Don't close on header clicks
-      if (this.header && this.header.contains(e.target)) {
-        return;
-      }
+  /**
+   * Handle content clicks
+   * @param {Event} e - Click event
+   */
+  handleContentClick(e) {
+    // Ignore click if we just finished dragging (within 200ms)
+    if (Date.now() - this.lastDragTime < 200) {
+      return;
+    }
 
-      // Don't close on button clicks
-      if (e.target.closest('button')) {
-        return;
-      }
+    // Don't close on header clicks
+    if (this.header && this.header.contains(e.target)) {
+      return;
+    }
 
-      // Check if click is directly on actual media element (img, video, iframe)
-      const mediaElement = e.target.closest('.zoomora-media, .zoomora-video, .zoomora-iframe');
+    // Don't close on button clicks
+    if (e.target.closest('button')) {
+      return;
+    }
 
-      if (mediaElement) {
-        // Only toggle zoom for images
-        if (mediaElement.classList.contains('zoomora-media') && !mediaElement.classList.contains('no-zoom')) {
-          this.toggleZoom();
-        }
-        return;
-      }
+    // Check if click is directly on actual media element (img, video, iframe)
+    const mediaElement = e.target.closest('.zoomora-media, .zoomora-video, .zoomora-iframe');
 
-      // Check if clicking inside video container but not on video itself
-      const videoContainer = e.target.closest('.zoomora-video-container');
-      if (videoContainer) {
-        // If clicking on the play button, don't close
-        if (e.target.closest('.zoomora-play-button')) {
-          return;
-        }
-        // If clicking on background area of video container, close
-        if (this.options.closeOnBackgroundClick) {
-          this.close();
-        }
-        return;
+    if (mediaElement) {
+      // Only toggle zoom for images
+      if (mediaElement.classList.contains('zoomora-media') && !mediaElement.classList.contains('no-zoom')) {
+        this.toggleZoom();
       }
+      return;
+    }
 
-      // Check if clicking on background elements (including when zoomed)
-      // This checks the actual target element, not just closest()
-      const clickedElement = e.target;
-      const isBackgroundElement =
-        clickedElement.classList.contains('zoomora-content') ||
-        clickedElement.classList.contains('zoomora-slide-container') ||
-        clickedElement.classList.contains('zoomora-slide') ||
-        clickedElement.classList.contains('zoomora-slides-container') ||
-        clickedElement.id === 'zoomoraContent' ||
-        clickedElement.id === 'zoomoraSlidesContainer';
-
-      if (isBackgroundElement && this.options.closeOnBackgroundClick) {
-        this.close();
+    // Check if clicking inside video container but not on video itself
+    const videoContainer = e.target.closest('.zoomora-video-container');
+    if (videoContainer) {
+      // If clicking on the play button, don't close
+      if (e.target.closest('.zoomora-play-button')) {
         return;
       }
-
-      // If we reach here and no media was clicked, close
+      // If clicking on background area of video container, close
       if (this.options.closeOnBackgroundClick) {
         this.close();
       }
+      return;
     }
 
-    /**
-     * Handle mouse down events
-     * @param {MouseEvent} e - Mouse event
-     */
-    handleMouseDown(e) {
-      this.startDrag(e);
+    // Check if clicking on background elements (including when zoomed)
+    // This checks the actual target element, not just closest()
+    const clickedElement = e.target;
+    const isBackgroundElement =
+      clickedElement.classList.contains('zoomora-content') ||
+      clickedElement.classList.contains('zoomora-slide-container') ||
+      clickedElement.classList.contains('zoomora-slide') ||
+      clickedElement.classList.contains('zoomora-slides-container') ||
+      clickedElement.id === 'zoomoraContent' ||
+      clickedElement.id === 'zoomoraSlidesContainer';
+
+    if (isBackgroundElement && this.options.closeOnBackgroundClick) {
+      this.close();
+      return;
     }
 
-    /**
-     * Handle mouse move events
-     * @param {MouseEvent} e - Mouse event
-     */
-    handleMouseMove(e) {
-      this.drag(e);
+    // If we reach here and no media was clicked, close
+    if (this.options.closeOnBackgroundClick) {
+      this.close();
     }
+  }
 
-    /**
-     * Handle mouse up events
-     */
-    handleMouseUp() {
-      this.endDrag();
-    }
+  /**
+   * Handle mouse down events
+   * @param {MouseEvent} e - Mouse event
+   */
+  handleMouseDown(e) {
+    this.startDrag(e);
+  }
 
-    /**
-     * Handle touch start events
-     * @param {TouchEvent} e - Touch event
-     */
-    handleTouchStart(e) {
-      this.startDrag(e);
-    }
+  /**
+   * Handle mouse move events
+   * @param {MouseEvent} e - Mouse event
+   */
+  handleMouseMove(e) {
+    this.drag(e);
+  }
 
-    /**
-     * Handle touch move events
-     * @param {TouchEvent} e - Touch event
-     */
-    handleTouchMove(e) {
-      this.drag(e);
-    }
+  /**
+   * Handle mouse up events
+   */
+  handleMouseUp() {
+    this.endDrag();
+  }
 
-    /**
-     * Handle touch end events
-     */
-    handleTouchEnd() {
-      this.endDrag();
-    }
+  /**
+   * Handle touch start events
+   * @param {TouchEvent} e - Touch event
+   */
+  handleTouchStart(e) {
+    this.startDrag(e);
+  }
+
+  /**
+   * Handle touch move events
+   * @param {TouchEvent} e - Touch event
+   */
+  handleTouchMove(e) {
+    this.drag(e);
+  }
 
-    /**
-     * Handle scroll-wheel zoom
-     * @param {WheelEvent} e - Wheel event
-     */
-    handleWheel(e) {
-      const media = this.content.querySelector('.zoomora-media');
-      if (!media || media.tagName !== 'IMG') return;
+  /**
+   * Handle touch end events
+   */
+  handleTouchEnd() {
+    this.endDrag();
+  }
 
-      const zoomConfig = this.calculateZoomLevels(media);
-      if (!zoomConfig.canZoom) return;
+  /**
+   * Handle scroll-wheel zoom
+   * @param {WheelEvent} e - Wheel event
+   */
+  handleWheel(e) {
+    const media = this.content.querySelector('.zoomora-media');
+    if (!media || media.tagName !== 'IMG') return;
 
-      e.preventDefault();
+    const zoomConfig = this.calculateZoomLevels(media);
+    if (!zoomConfig.canZoom) return;
 
-      const maxScale = zoomConfig.levels[zoomConfig.levels.length - 1];
-      const step = this.options.zoomStep || 0.1;
-      const direction = e.deltaY < 0 ? 1 : -1; // scroll/pinch up = zoom in
+    e.preventDefault();
 
-      let newScale = (this.currentScale || 1) + (direction * step * maxScale);
-      newScale = Math.max(1, Math.min(maxScale, newScale));
+    const maxScale = zoomConfig.levels[zoomConfig.levels.length - 1];
+    const step = this.options.zoomStep || 0.1;
+    const direction = e.deltaY < 0 ? 1 : -1; // scroll/pinch up = zoom in
 
-      if (newScale === this.currentScale) return;
+    let newScale = (this.currentScale || 1) + (direction * step * maxScale);
+    newScale = Math.max(1, Math.min(maxScale, newScale));
 
-      this.currentScale = newScale;
-      this.isZoomed = newScale > 1;
-      this.currentX = 0;
-      this.currentY = 0;
+    if (newScale === this.currentScale) return;
 
-      if (this.isZoomed) {
-        media.style.transform = `scale(${newScale})`;
-        media.style.cursor = 'grab';
-        media.classList.add('zoomed');
-      } else {
-        media.style.transform = '';
-        media.style.cursor = 'pointer';
-        media.classList.remove('zoomed');
-      }
+    this.currentScale = newScale;
+    this.isZoomed = newScale > 1;
+    this.currentX = 0;
+    this.currentY = 0;
 
-      // Keep the click-to-cycle zoom index roughly in sync with the
-      // continuous wheel scale, so a click after scrolling cycles sensibly.
-      let nearestIndex = 0;
-      zoomConfig.levels.forEach((level, index) => {
-        if (Math.abs(level - newScale) < Math.abs(zoomConfig.levels[nearestIndex] - newScale)) {
-          nearestIndex = index;
-        }
-      });
-      media.dataset.zoomLevel = nearestIndex.toString();
+    if (this.isZoomed) {
+      media.style.transform = `scale(${newScale})`;
+      media.style.cursor = 'grab';
+      media.classList.add('zoomed');
+    } else {
+      media.style.transform = '';
+      media.style.cursor = 'pointer';
+      media.classList.remove('zoomed');
     }
 
-    /**
-     * Get image source from element
-     * @param {Element} item - DOM element
-     * @returns {string} - Image source URL
-     */
-    getImageSource(item) {
-      const src = item.dataset.src || item.src || item.getAttribute('src');
-      const type = item.dataset.type || 'image';
-
-      // Handle YouTube URLs for video types
-      if (type === 'video' && src) {
-        return this.convertToEmbedUrl(src);
+    // Keep the click-to-cycle zoom index roughly in sync with the
+    // continuous wheel scale, so a click after scrolling cycles sensibly.
+    let nearestIndex = 0;
+    zoomConfig.levels.forEach((level, index) => {
+      if (Math.abs(level - newScale) < Math.abs(zoomConfig.levels[nearestIndex] - newScale)) {
+        nearestIndex = index;
       }
+    });
+    media.dataset.zoomLevel = nearestIndex.toString();
+  }
+
+  /**
+   * Get image source from element
+   * @param {Element} item - DOM element
+   * @returns {string} - Image source URL
+   */
+  getImageSource(item) {
+    const src = item.dataset.src || item.getAttribute('href') || item.src || item.getAttribute('src');
+    const type = item.dataset.type || 'image';
 
-      return src;
+    // Handle YouTube URLs for video types
+    if (type === 'video' && src) {
+      return this.convertToEmbedUrl(src);
     }
 
-    /**
-     * Convert YouTube URLs to embed format
-     * @param url
-     * @returns {*|string}
-     */
-    convertToEmbedUrl(url) {
-      // If already an embed URL, return as is
-      if (url.includes('youtube.com/embed/')) {
-        return url;
-      }
+    return src;
+  }
 
-      // Handle different YouTube URL formats
-      let videoId = null;
-      let startTime = null;
+  /**
+   * Convert YouTube URLs to embed format
+   * @param url
+   * @returns {*|string}
+   */
+  convertToEmbedUrl(url) {
+    // If already an embed URL, return as is
+    if (url.includes('youtube.com/embed/')) {
+      return url;
+    }
 
-      // Extract video ID and start time from different YouTube URL formats
-      if (url.includes('youtube.com/watch')) {
-        const urlParams = new URLSearchParams(url.split('?')[1]);
-        videoId = urlParams.get('v');
+    // Handle different YouTube URL formats
+    let videoId = null;
+    let startTime = null;
+
+    // Extract video ID and start time from different YouTube URL formats
+    if (url.includes('youtube.com/watch')) {
+      const urlParams = new URLSearchParams(url.split('?')[1]);
+      videoId = urlParams.get('v');
+      const t = urlParams.get('t');
+      if (t) {
+        // Convert time format (e.g., "111s" to seconds)
+        startTime = t.replace('s', '');
+      }
+    } else if (url.includes('youtu.be/')) {
+      const parts = url.split('/');
+      const videoAndParams = parts[parts.length - 1];
+      if (videoAndParams.includes('?')) {
+        videoId = videoAndParams.split('?')[0];
+        const urlParams = new URLSearchParams(videoAndParams.split('?')[1]);
         const t = urlParams.get('t');
-        if (t) {
-          // Convert time format (e.g., "111s" to seconds)
-          startTime = t.replace('s', '');
-        }
-      } else if (url.includes('youtu.be/')) {
-        const parts = url.split('/');
-        const videoAndParams = parts[parts.length - 1];
-        if (videoAndParams.includes('?')) {
-          videoId = videoAndParams.split('?')[0];
-          const urlParams = new URLSearchParams(videoAndParams.split('?')[1]);
-          const t = urlParams.get('t');
-          if (t) startTime = t.replace('s', '');
-        } else {
-          videoId = videoAndParams;
-        }
+        if (t) startTime = t.replace('s', '');
+      } else {
+        videoId = videoAndParams;
       }
+    }
 
-      if (videoId) {
-        let embedUrl = `https://www.youtube.com/embed/${videoId}`;
-        const params = new URLSearchParams();
-
-        if (startTime) {
-          params.append('start', startTime);
-        }
+    if (videoId) {
+      let embedUrl = `https://www.youtube.com/embed/${videoId}`;
+      const params = new URLSearchParams();
 
-        // Add other useful parameters
-        params.append('rel', '0'); // Don't show related videos
-        params.append('modestbranding', '1'); // Modest branding
+      if (startTime) {
+        params.append('start', startTime);
+      }
 
-        // Option: Add autoplay for YouTube videos (uncomment if desired)
-        // params.append('autoplay', '1');
+      // Add other useful parameters
+      params.append('rel', '0'); // Don't show related videos
+      params.append('modestbranding', '1'); // Modest branding
 
-        if (params.toString()) {
-          embedUrl += '?' + params.toString();
-        }
+      if (this.options.autoplayVideos) {
+        params.append('autoplay', '1');
+      }
 
-        return embedUrl;
+      if (params.toString()) {
+        embedUrl += '?' + params.toString();
       }
 
-      // If not a YouTube URL or couldn't parse, return original
-      return url;
+      return embedUrl;
     }
 
-    /**
-     * Get thumbnail source from element
-     * @param {Element} item - DOM element
-     * @returns {string} - Thumbnail source URL
-     */
-    getThumbnailSource(item) {
-      const type = item.dataset.type || 'image';
+    // If not a YouTube URL or couldn't parse, return original
+    return url;
+  }
 
-      // For video items, always use the img.src as thumbnail (poster image)
-      if (type === 'video') {
-        return item.src || item.getAttribute('src');
-      }
+  /**
+   * Get thumbnail source from element
+   * Order: data-thumbnail, the trigger's own image or the image inside it, then data-src or href.
+   * @param {Element|Object} item - DOM element or virtual item
+   * @returns {string} - Thumbnail source URL
+   */
+  getThumbnailSource(item) {
+    if (item.dataset.thumbnail) {
+      return item.dataset.thumbnail;
+    }
 
-      // For regular images, use data-src or fallback to src
-      return item.dataset.src || item.src || item.getAttribute('src');
+    const innerImage = item.querySelector?.('img');
+    const imageSrc = item.getAttribute('src') || innerImage?.getAttribute('src');
+    const type = item.dataset.type || 'image';
+
+    if (type === 'video') {
+      return imageSrc;
     }
 
-    /**
-     * Get group identifier from element
-     * @param {Element} element - DOM element
-     * @returns {string} - Group identifier
-     */
-    getGroup(element) {
-      if (this.options.useHref) {
-        return element.dataset.lightbox || element.dataset.gallery || 'default';
-      }
-      return element.dataset.zoomora || 'default';
+    return imageSrc || item.dataset.src || item.getAttribute('href');
+  }
+
+  /**
+   * Get group identifier from element
+   * @param {Element} element - DOM element
+   * @returns {string} - Group identifier
+   */
+  getGroup(element) {
+    if (this.options.useHref) {
+      return element.dataset.lightbox || element.dataset.gallery || 'default';
     }
+    return element.dataset.zoomora || 'default';
+  }
 
-    /**
-     * Open lightbox with specified element
-     * @param {Element} element - DOM element to open
-     */
-    open(element) {
-      if (!element) return;
+  /**
+   * Open lightbox with specified element
+   * @param {Element} element - DOM element to open
+   */
+  open(element) {
+    if (!element) return;
 
-      const group = this.getGroup(element);
-      let groupSelector;
+    const group = this.getGroup(element);
+    let groupSelector;
 
-      if (this.options.useHref) {
-        if (element.dataset.lightbox) {
-          groupSelector = `[data-lightbox="${group}"]`;
-        } else if (element.dataset.gallery) {
-          groupSelector = `[data-gallery="${group}"]`;
-        } else {
-          groupSelector = this.options.selector;
-        }
+    if (this.options.useHref) {
+      if (element.dataset.lightbox) {
+        groupSelector = `[data-lightbox="${group}"]`;
+      } else if (element.dataset.gallery) {
+        groupSelector = `[data-gallery="${group}"]`;
       } else {
-        groupSelector = `[data-zoomora="${group}"]`;
+        groupSelector = this.options.selector;
       }
+    } else {
+      groupSelector = `[data-zoomora="${group}"]`;
+    }
 
-      this.items = Array.from(document.querySelectorAll(groupSelector));
-      this.currentIndex = Math.max(0, this.items.indexOf(element));
+    this.items = Array.from(document.querySelectorAll(groupSelector));
+    this.currentIndex = Math.max(0, this.items.indexOf(element));
 
-      this._activateLightbox();
+    this._activateLightbox();
 
-      // Trigger callback
-      if (typeof this.options.onOpen === 'function') {
-        this.options.onOpen(element, this.currentIndex);
-      }
+    // Trigger callback
+    if (typeof this.options.onOpen === 'function') {
+      this.options.onOpen(element, this.currentIndex);
     }
+  }
 
-    /**
-     * Open lightbox programmatically with image(s) not present in the DOM.
-     * Accepts a single URL, an array of URLs, a config object, or an array
-     * of config objects — so all of these work:
-     *
-     *   lightbox.openImage('photo.jpg');
-     *   lightbox.openImage(['a.jpg', 'b.jpg'], { startIndex: 1 });
-     *   lightbox.openImage({ src: 'photo.jpg', caption: 'Hello' });
-     *   lightbox.openImage([
-     *     { src: 'a.jpg', caption: 'First' },
-     *     { src: 'https://youtu.be/xyz', type: 'video', thumb: 'poster.jpg' },
-     *   ]);
-     *
-     * @param {string|string[]|Object|Object[]} images - URL(s) or config object(s)
-     * @param {Object} [opts] - Options
-     * @param {number} [opts.startIndex=0] - Index to open at when passing an array
-     */
-    openImage(images, opts = {}) {
-      const list = Array.isArray(images) ? images : [images];
-
-      this.items = list.map(entry =>
-        this.createVirtualItem(typeof entry === 'string' ? {src: entry} : entry)
-      );
-
-      this.currentIndex = Math.max(
-        0,
-        Math.min(opts.startIndex || 0, this.items.length - 1)
-      );
-
-      this._activateLightbox();
-
-      // Trigger callback
-      if (typeof this.options.onOpen === 'function') {
-        this.options.onOpen(this.items[this.currentIndex], this.currentIndex);
-      }
-    }
+  /**
+   * Open lightbox programmatically with image(s) not present in the DOM.
+   * Accepts a single URL, an array of URLs, a config object, or an array
+   * of config objects — so all of these work:
+   *
+   *   lightbox.openImage('photo.jpg');
+   *   lightbox.openImage(['a.jpg', 'b.jpg'], { startIndex: 1 });
+   *   lightbox.openImage({ src: 'photo.jpg', caption: 'Hello' });
+   *   lightbox.openImage([
+   *     { src: 'a.jpg', caption: 'First' },
+   *     { src: 'https://youtu.be/xyz', type: 'video', thumb: 'poster.jpg' },
+   *   ]);
+   *
+   * @param {string|string[]|Object|Object[]} images - URL(s) or config object(s)
+   * @param {Object} [opts] - Options
+   * @param {number} [opts.startIndex=0] - Index to open at when passing an array
+   */
+  openImage(images, opts = {}) {
+    const list = Array.isArray(images) ? images : [images];
 
-    /**
-     * Create a virtual item that mimics a DOM element's interface so
-     * programmatic images work through the existing render pipeline without
-     * any changes to getImageSource, getThumbnailSource, updateCaption, etc.
-     * @param {Object} config
-     * @param {string} config.src - Full-size image/video/iframe URL
-     * @param {string} [config.thumb] - Thumbnail URL (falls back to src)
-     * @param {string} [config.type='image'] - 'image', 'video', or 'iframe'
-     * @param {string} [config.caption=''] - Caption text
-     * @param {string} [config.alt=''] - Alt text for the thumbnail img
-     * @returns {Object} Virtual item
-     */
-    createVirtualItem({src, thumb, type = 'image', caption = '', alt = ''}) {
-      const thumbSrc = thumb || src;
-      return {
-        dataset: {src, type, caption},
-        src: thumbSrc,
-        alt,
-        title: caption,
-        getAttribute: (name) => name === 'src' ? thumbSrc : null,
-      };
-    }
-
-    /**
-     * Shared activation sequence used by both open() and openImage().
-     * Resets state, shows the lightbox, and triggers all UI updates.
-     */
-    _activateLightbox() {
-      // Reset states
-      this.isZoomed = false;
-      this.isFullscreen = false;
-      this.thumbnailsVisible = true;
-      this.currentX = 0;
-      this.currentY = 0;
-      this.currentScale = 1;
+    this.items = list.map(entry =>
+      this.createVirtualItem(typeof entry === 'string' ? {src: entry} : entry)
+    );
 
-      this.zoomora.classList.add('active');
-      document.body.style.overflow = 'hidden';
+    this.currentIndex = Math.max(
+      0,
+      Math.min(opts.startIndex || 0, this.items.length - 1)
+    );
 
-      this.loadContent();
-      this.updateThumbnails();
-      this.updateCounter();
-      this.updateNavigation();
-      this.updateCaption();
-      this.updateButtons();
+    this._activateLightbox();
 
-      // Initialize auto-hide
-      if (this.autoHideEnabled) {
-        this.startAutoHideTimer();
-      } else {
-        this.showControls();
-      }
+    // Trigger callback
+    if (typeof this.options.onOpen === 'function') {
+      this.options.onOpen(this.items[this.currentIndex], this.currentIndex);
     }
+  }
 
-    /**
-     * Close lightbox
-     */
-    close() {
-      if (this.isFullscreen) {
-        this.exitFullscreen();
-      }
-
-      this.zoomora.classList.remove('active');
-      document.body.style.overflow = '';
-      this.isZoomed = false;
-      this.isFullscreen = false;
-      this.currentX = 0;
-      this.currentY = 0;
-      this.currentScale = 1;
+  /**
+   * Create a virtual item that mimics a DOM element's interface so
+   * programmatic images work through the existing render pipeline without
+   * any changes to getImageSource, getThumbnailSource, updateCaption, etc.
+   * @param {Object} config
+   * @param {string} config.src - Full-size image/video/iframe URL
+   * @param {string} [config.thumb] - Thumbnail URL (falls back to src)
+   * @param {string} [config.type='image'] - 'image', 'video', or 'iframe'
+   * @param {string} [config.caption=''] - Caption text
+   * @param {string} [config.alt=''] - Alt text for the thumbnail img
+   * @returns {Object} Virtual item
+   */
+  createVirtualItem({src, thumb, type = 'image', caption = '', alt = ''}) {
+    const thumbSrc = thumb || src;
+    return {
+      dataset: {src, type, caption},
+      src: thumbSrc,
+      alt,
+      title: caption,
+      getAttribute: (name) => name === 'src' ? thumbSrc : null,
+    };
+  }
 
-      const media = this.content.querySelector('.zoomora-media');
-      if (media) {
-        media.classList.remove('zoomed');
-        media.style.transform = '';
-        media.style.cursor = '';
-      }
+  /**
+   * Shared activation sequence used by both open() and openImage().
+   * Resets state, shows the lightbox, and triggers all UI updates.
+   */
+  _activateLightbox() {
+    // Reset states
+    this.isZoomed = false;
+    this.isFullscreen = false;
+    this.thumbnailsVisible = true;
+    this.currentX = 0;
+    this.currentY = 0;
+    this.currentScale = 1;
+
+    this.zoomora.classList.add('active');
+    document.body.style.overflow = 'hidden';
+
+    this.loadContent();
+    this.updateThumbnails();
+    this.updateCounter();
+    this.updateNavigation();
+    this.updateCaption();
+    this.updateButtons();
+
+    // Initialize auto-hide
+    if (this.autoHideEnabled) {
+      this.startAutoHideTimer();
+    } else {
+      this.showControls();
+    }
+  }
 
-      this.zoomora.classList.remove('fullscreen');
-      this.updateButtons();
+  /**
+   * Close lightbox
+   */
+  close() {
+    if (this.isFullscreen) {
+      this.exitFullscreen();
+    }
 
-      // Clean up auto-hide
-      this.stopAutoHideTimer();
-      this.showControls();
+    this.zoomora.classList.remove('active');
+    document.body.style.overflow = '';
 
-      // Trigger callback
-      if (typeof this.options.onClose === 'function') {
-        this.options.onClose(this.currentIndex);
-      }
+    // Stop playing media; the next open builds fresh media elements
+    const activeVideo = this.content.querySelector('video');
+    if (activeVideo) {
+      activeVideo.pause();
     }
 
-    /**
-     * Navigate to previous item
-     */
-    prev() {
-      if (this.currentIndex > 0) {
-        this.currentIndex--;
-        this.loadContent();
-        this.updateCounter();
-        this.updateThumbnails();
-        this.updateNavigation();
-        this.updateCaption();
+    const activeIframe = this.content.querySelector('iframe');
+    if (activeIframe) {
+      activeIframe.src = 'about:blank';
+    }
 
-        // Trigger callback
-        if (typeof this.options.onPrev === 'function') {
-          this.options.onPrev(this.currentIndex);
-        }
-      }
+    this.isZoomed = false;
+    this.isFullscreen = false;
+    this.currentX = 0;
+    this.currentY = 0;
+    this.currentScale = 1;
+
+    const media = this.content.querySelector('.zoomora-media');
+    if (media) {
+      media.classList.remove('zoomed');
+      media.style.transform = '';
+      media.style.cursor = '';
     }
 
-    /**
-     * Navigate to next item
-     */
-    next() {
-      if (this.currentIndex < this.items.length - 1) {
-        this.currentIndex++;
-        this.loadContent();
-        this.updateCounter();
-        this.updateThumbnails();
-        this.updateNavigation();
-        this.updateCaption();
+    this.zoomora.classList.remove('fullscreen');
+    this.updateButtons();
 
-        // Trigger callback
-        if (typeof this.options.onNext === 'function') {
-          this.options.onNext(this.currentIndex);
-        }
-      }
+    // Clean up auto-hide
+    this.stopAutoHideTimer();
+    this.showControls();
+
+    // Trigger callback
+    if (typeof this.options.onClose === 'function') {
+      this.options.onClose(this.currentIndex);
     }
+  }
 
-    /**
-     * Load content for current item
-     */
-    loadContent() {
-      if (!this.items[this.currentIndex]) return;
+  /**
+   * Navigate to previous item
+   */
+  prev() {
+    if (this.currentIndex > 0) {
+      this.currentIndex--;
+      this.loadContent();
+      this.updateCounter();
+      this.updateThumbnails();
+      this.updateNavigation();
+      this.updateCaption();
 
-      const item = this.items[this.currentIndex];
-      const src = this.getImageSource(item);
-      const type = item.dataset.type || 'image';
+      // Trigger callback
+      if (typeof this.options.onPrev === 'function') {
+        this.options.onPrev(this.currentIndex);
+      }
+    }
+  }
 
-      if (!src) {
-        console.error('Zoomora: No source found for item');
-        return;
+  /**
+   * Navigate to next item
+   */
+  next() {
+    if (this.currentIndex < this.items.length - 1) {
+      this.currentIndex++;
+      this.loadContent();
+      this.updateCounter();
+      this.updateThumbnails();
+      this.updateNavigation();
+      this.updateCaption();
+
+      // Trigger callback
+      if (typeof this.options.onNext === 'function') {
+        this.options.onNext(this.currentIndex);
       }
+    }
+  }
 
-      // Reset zoom state
-      this.isZoomed = false;
-      this.currentX = 0;
-      this.currentY = 0;
-      this.currentScale = 1;
+  /**
+   * Load content for current item
+   */
+  loadContent() {
+    if (!this.items[this.currentIndex]) return;
 
-      // Show loading spinner
-      this.loading.style.display = 'block';
+    const item = this.items[this.currentIndex];
+    const src = this.getImageSource(item);
+    const type = item.dataset.type || 'image';
 
-      if (this.slidesContainer) {
-        this.slidesContainer.innerHTML = '';
-      }
+    if (!src) {
+      console.error('Zoomora: No source found for item');
+      return;
+    }
+
+    // Reset zoom state
+    this.isZoomed = false;
+    this.currentX = 0;
+    this.currentY = 0;
+    this.currentScale = 1;
+
+    // Show loading spinner
+    this.loading.style.display = 'block';
+
+    if (this.slidesContainer) {
+      this.slidesContainer.innerHTML = '';
+    }
+
+    setTimeout(() => {
+      this.renderContent(src, type, item);
+    }, 100);
+  }
 
-      setTimeout(() => {
-        this.renderContent(src, type, item);
-      }, 100);
-    }
-
-    /**
-     * Render content based on type
-     * @param {string} src - Source URL
-     * @param {string} type - Content type
-     * @param {Element} item - Original item element
-     */
-    renderContent(src, type, item) {
-      const slideContainer = document.createElement('div');
-      slideContainer.className = 'zoomora-slide-container';
-
-      // Create slide wrapper
-      const slide = document.createElement('div');
-      slide.className = `zoomora-slide ${this.options.transition === 'slide' ? 'slide-effect' : 'fade-effect'}`;
-      slide.style.opacity = '0';
-      slide.style.transform = this.options.transition === 'slide' ? 'translateX(100%)' : 'scale(0.8)';
-
-      let mediaElement;
-
-      try {
-        switch (type) {
-          case 'video':
-            if (src.endsWith('.mp4') || src.endsWith('.webm') || src.endsWith('.ogg')) {
-              const videoContainer = document.createElement('div');
-              videoContainer.className = 'zoomora-video-container';
-
-              mediaElement = document.createElement('video');
-              mediaElement.src = src;
-              mediaElement.className = 'zoomora-video';
-              mediaElement.setAttribute('preload', 'metadata');
-
-              const posterSrc = item.src || item.getAttribute('src');
-              if (posterSrc) {
-                mediaElement.setAttribute('poster', posterSrc);
-              }
-
-              const playButton = document.createElement('div');
-              playButton.className = 'zoomora-play-button';
-              playButton.innerHTML = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>`;
-
-              playButton.addEventListener('click', () => {
-                mediaElement.play();
-                playButton.style.display = 'none';
-                mediaElement.setAttribute('controls', '');
-              });
-
-              mediaElement.addEventListener('ended', () => {
-                playButton.style.display = 'flex';
-              });
-
-              videoContainer.appendChild(mediaElement);
-              videoContainer.appendChild(playButton);
-              slideContainer.appendChild(videoContainer);
-            } else {
-              mediaElement = document.createElement('iframe');
-              mediaElement.src = src;
-              mediaElement.className = 'zoomora-video';
-              mediaElement.setAttribute('allowfullscreen', '');
-              mediaElement.setAttribute('frameborder', '0');
-              slideContainer.appendChild(mediaElement);
+  /**
+   * Render content based on type
+   * @param {string} src - Source URL
+   * @param {string} type - Content type
+   * @param {Element} item - Original item element
+   */
+  renderContent(src, type, item) {
+    const slideContainer = document.createElement('div');
+    slideContainer.className = 'zoomora-slide-container';
+
+    // Create slide wrapper
+    const slide = document.createElement('div');
+    slide.className = `zoomora-slide ${this.options.transition === 'slide' ? 'slide-effect' : 'fade-effect'}`;
+    slide.style.opacity = '0';
+    slide.style.transform = this.options.transition === 'slide' ? 'translateX(100%)' : 'scale(0.8)';
+
+    let mediaElement;
+
+    try {
+      switch (type) {
+        case 'video':
+          if (src.endsWith('.mp4') || src.endsWith('.webm') || src.endsWith('.ogg')) {
+            const videoContainer = document.createElement('div');
+            videoContainer.className = 'zoomora-video-container';
+
+            mediaElement = document.createElement('video');
+            mediaElement.src = src;
+            mediaElement.className = 'zoomora-video';
+            mediaElement.setAttribute('preload', 'metadata');
+
+            const posterSrc = item.src || item.getAttribute('src');
+            if (posterSrc) {
+              mediaElement.setAttribute('poster', posterSrc);
             }
-            break;
 
-          case 'iframe':
+            const playButton = document.createElement('div');
+            playButton.className = 'zoomora-play-button';
+            playButton.innerHTML = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>`;
+
+            playButton.addEventListener('click', () => {
+              mediaElement.play();
+              playButton.style.display = 'none';
+              mediaElement.setAttribute('controls', '');
+            });
+
+            mediaElement.addEventListener('ended', () => {
+              playButton.style.display = 'flex';
+            });
+
+            videoContainer.appendChild(mediaElement);
+            videoContainer.appendChild(playButton);
+            if (this.options.autoplayVideos) {
+              mediaElement.play()
+                .then(() => {
+                  playButton.style.display = 'none';
+                  mediaElement.setAttribute('controls', '');
+                })
+                .catch(() => {
+                  // Autoplay blocked by the browser: the play button stays visible
+                });
+            }
+            slideContainer.appendChild(videoContainer);
+          } else {
             mediaElement = document.createElement('iframe');
             mediaElement.src = src;
-            mediaElement.className = 'zoomora-iframe';
+            mediaElement.className = 'zoomora-video';
+            mediaElement.setAttribute('allowfullscreen', '');
+            mediaElement.setAttribute('allow', 'autoplay; fullscreen; picture-in-picture');
             mediaElement.setAttribute('frameborder', '0');
             slideContainer.appendChild(mediaElement);
-            break;
+          }
+          break;
 
-          default:
-            mediaElement = document.createElement('img');
-            mediaElement.src = src;
-            mediaElement.className = 'zoomora-media';
-            mediaElement.alt = item.alt || item.title || '';
+        case 'iframe':
+          mediaElement = document.createElement('iframe');
+          mediaElement.src = src;
+          mediaElement.className = 'zoomora-iframe';
+          mediaElement.setAttribute('frameborder', '0');
+          slideContainer.appendChild(mediaElement);
+          break;
 
-            mediaElement.onload = () => {
-              this.loading.style.display = 'none';
-              this.checkZoomability(mediaElement);
-              this.animateSlideIn(slide);
-            };
+        default:
+          mediaElement = document.createElement('img');
+          mediaElement.src = src;
+          mediaElement.className = 'zoomora-media';
+          mediaElement.alt = item.alt || item.title || '';
 
-            mediaElement.onerror = () => {
-              this.loading.style.display = 'none';
-              console.error('Zoomora: Failed to load image:', src);
-              this.animateSlideIn(slide);
-            };
+          mediaElement.onload = () => {
+            this.loading.style.display = 'none';
+            this.checkZoomability(mediaElement);
+            this.animateSlideIn(slide);
+          };
 
-            slideContainer.appendChild(mediaElement);
-        }
+          mediaElement.onerror = () => {
+            this.loading.style.display = 'none';
+            console.error('Zoomora: Failed to load image:', src);
+            this.animateSlideIn(slide);
+          };
 
-        slide.appendChild(slideContainer);
+          slideContainer.appendChild(mediaElement);
+      }
 
-        // Clear existing slides and add new one
-        this.slidesContainer.innerHTML = '';
-        this.slidesContainer.appendChild(slide);
+      slide.appendChild(slideContainer);
 
-        if (type !== 'image') {
-          this.loading.style.display = 'none';
-          this.animateSlideIn(slide);
-        }
+      // Clear existing slides and add new one
+      this.slidesContainer.innerHTML = '';
+      this.slidesContainer.appendChild(slide);
 
-      } catch (error) {
-        console.error('Zoomora: Error rendering content:', error);
+      if (type !== 'image') {
         this.loading.style.display = 'none';
+        this.animateSlideIn(slide);
       }
-    }
-
-    // Animation helper
-    animateSlideIn(slide) {
-      // Force reflow
-      slide.offsetHeight;
-
-      // Add active class and animate
-      slide.classList.add('active');
 
-      if (this.options.transition === 'slide') {
-        slide.style.transition = `transform ${this.options.animationDuration}ms ease, opacity ${this.options.animationDuration}ms ease`;
-        slide.style.transform = 'translateX(0)';
-        slide.style.opacity = '1';
-      } else {
-        slide.style.transition = `transform ${this.options.animationDuration}ms ease, opacity ${this.options.animationDuration}ms ease`;
-        slide.style.transform = 'scale(1)';
-        slide.style.opacity = '1';
-      }
+    } catch (error) {
+      console.error('Zoomora: Error rendering content:', error);
+      this.loading.style.display = 'none';
     }
+  }
 
-    // Toggle auto-hide controls
-    toggleAutoHide() {
-      this.autoHideEnabled = !this.autoHideEnabled;
-      const autoHideBtn = document.getElementById('zoomoraAutoHideBtn');
-
-      if (this.autoHideEnabled) {
-        autoHideBtn.classList.add('active');
-        autoHideBtn.title = 'Disable Auto-Hide Controls';
-        this.startAutoHideTimer();
-      } else {
-        autoHideBtn.classList.remove('active');
-        autoHideBtn.title = 'Enable Auto-Hide Controls';
-        this.stopAutoHideTimer();
-        this.showControls();
-      }
+  // Animation helper
+  animateSlideIn(slide) {
+    // Force reflow
+    slide.offsetHeight;
+
+    // Add active class and animate
+    slide.classList.add('active');
+
+    if (this.options.transition === 'slide') {
+      slide.style.transition = `transform ${this.options.animationDuration}ms ease, opacity ${this.options.animationDuration}ms ease`;
+      slide.style.transform = 'translateX(0)';
+      slide.style.opacity = '1';
+    } else {
+      slide.style.transition = `transform ${this.options.animationDuration}ms ease, opacity ${this.options.animationDuration}ms ease`;
+      slide.style.transform = 'scale(1)';
+      slide.style.opacity = '1';
     }
+  }
 
-    // Handle user activity
-    handleUserActivity() {
-      if (!this.autoHideEnabled) return;
+  // Toggle auto-hide controls
+  toggleAutoHide() {
+    this.autoHideEnabled = !this.autoHideEnabled;
+    const autoHideBtn = document.getElementById('zoomoraAutoHideBtn');
 
-      this.showControls();
+    if (this.autoHideEnabled) {
+      autoHideBtn.classList.add('active');
+      autoHideBtn.title = 'Disable Auto-Hide Controls';
       this.startAutoHideTimer();
+    } else {
+      autoHideBtn.classList.remove('active');
+      autoHideBtn.title = 'Enable Auto-Hide Controls';
+      this.stopAutoHideTimer();
+      this.showControls();
     }
+  }
 
-    // Start auto-hide timer
-    startAutoHideTimer() {
-      this.stopAutoHideTimer();
+  // Handle user activity
+  handleUserActivity() {
+    if (!this.autoHideEnabled) return;
 
-      this.autoHideTimeout = setTimeout(() => {
-        this.hideControls();
-      }, this.options.autoHideDelay);
-    }
+    this.showControls();
+    this.startAutoHideTimer();
+  }
 
-    // Stop auto-hide timer
-    stopAutoHideTimer() {
-      if (this.autoHideTimeout) {
-        clearTimeout(this.autoHideTimeout);
-        this.autoHideTimeout = null;
-      }
-    }
+  // Start auto-hide timer
+  startAutoHideTimer() {
+    this.stopAutoHideTimer();
 
-    // Show controls
-    showControls() {
-      if (this.isControlsVisible) return;
+    this.autoHideTimeout = setTimeout(() => {
+      this.hideControls();
+    }, this.options.autoHideDelay);
+  }
 
-      this.isControlsVisible = true;
-      this.zoomora.classList.remove('controls-hidden');
+  // Stop auto-hide timer
+  stopAutoHideTimer() {
+    if (this.autoHideTimeout) {
+      clearTimeout(this.autoHideTimeout);
+      this.autoHideTimeout = null;
+    }
+  }
 
-      // Animate controls back in
-      if (this.header) {
-        this.header.style.transform = 'translateY(0)';
-        this.header.style.opacity = '1';
-      }
+  // Show controls
+  showControls() {
+    if (this.isControlsVisible) return;
 
-      if (this.caption) {
-        this.caption.style.transform = 'translateX(-50%) translateY(0)';
-        this.caption.style.opacity = '1';
-      }
+    this.isControlsVisible = true;
+    this.zoomora.classList.remove('controls-hidden');
 
-      if (this.thumbs) {
-        this.thumbs.style.transform = 'translateX(-50%) translateY(0)';
-        this.thumbs.style.opacity = '1';
-      }
+    // Animate controls back in
+    if (this.header) {
+      this.header.style.transform = 'translateY(0)';
+      this.header.style.opacity = '1';
+    }
 
-      if (this.prevBtn) {
-        this.prevBtn.style.transform = 'translateX(0)';
-        this.prevBtn.style.opacity = '1';
-      }
+    if (this.caption) {
+      this.caption.style.transform = 'translateX(-50%) translateY(0)';
+      this.caption.style.opacity = '1';
+    }
 
-      if (this.nextBtn) {
-        this.nextBtn.style.transform = 'translateX(0)';
-        this.nextBtn.style.opacity = '1';
-      }
+    if (this.thumbs) {
+      this.thumbs.style.transform = 'translateX(-50%) translateY(0)';
+      this.thumbs.style.opacity = '1';
     }
 
-    // Hide controls
-    hideControls() {
-      if (!this.isControlsVisible) return;
+    if (this.prevBtn) {
+      this.prevBtn.style.transform = 'translateX(0)';
+      this.prevBtn.style.opacity = '1';
+    }
 
-      this.isControlsVisible = false;
-      this.zoomora.classList.add('controls-hidden');
+    if (this.nextBtn) {
+      this.nextBtn.style.transform = 'translateX(0)';
+      this.nextBtn.style.opacity = '1';
+    }
+  }
 
-      // Animate controls out
-      if (this.header) {
-        this.header.style.transform = 'translateY(-100%)';
-        this.header.style.opacity = '0';
-      }
+  // Hide controls
+  hideControls() {
+    if (!this.isControlsVisible) return;
 
-      if (this.caption) {
-        this.caption.style.transform = 'translateX(-50%) translateY(100%)';
-        this.caption.style.opacity = '0';
-      }
+    this.isControlsVisible = false;
+    this.zoomora.classList.add('controls-hidden');
 
-      if (this.thumbs) {
-        this.thumbs.style.transform = 'translateX(-50%) translateY(100%)';
-        this.thumbs.style.opacity = '0';
-      }
+    // Animate controls out
+    if (this.header) {
+      this.header.style.transform = 'translateY(-100%)';
+      this.header.style.opacity = '0';
+    }
 
-      if (this.prevBtn) {
-        this.prevBtn.style.transform = 'translateX(-100%)';
-        this.prevBtn.style.opacity = '0';
-      }
+    if (this.caption) {
+      this.caption.style.transform = 'translateX(-50%) translateY(100%)';
+      this.caption.style.opacity = '0';
+    }
 
-      if (this.nextBtn) {
-        this.nextBtn.style.transform = 'translateX(100%)';
-        this.nextBtn.style.opacity = '0';
-      }
+    if (this.thumbs) {
+      this.thumbs.style.transform = 'translateX(-50%) translateY(100%)';
+      this.thumbs.style.opacity = '0';
     }
 
-    /**
-     * Check if image can be zoomed
-     * @param {HTMLImageElement} img - Image element
-     */
-    checkZoomability(img) {
-      if (!img || !img.naturalWidth || !img.naturalHeight) return;
-
-      const imgRect = img.getBoundingClientRect();
-      const renderedWidth = imgRect.width;
-      const renderedHeight = imgRect.height;
-      const naturalWidth = img.naturalWidth;
-      const naturalHeight = img.naturalHeight;
-
-      const isScaledDown = naturalWidth > renderedWidth || naturalHeight > renderedHeight;
-      const zoomRatioX = naturalWidth / renderedWidth;
-      const zoomRatioY = naturalHeight / renderedHeight;
-      const maxZoomRatio = Math.max(zoomRatioX, zoomRatioY);
-
-      // Store zoom info
-      img.dataset.zoomRatio = maxZoomRatio.toString();
-      img.dataset.naturalWidth = naturalWidth.toString();
-      img.dataset.naturalHeight = naturalHeight.toString();
-      img.dataset.renderedWidth = renderedWidth.toString();
-      img.dataset.renderedHeight = renderedHeight.toString();
-
-      // Enable zoom if significantly scaled down
-      if (isScaledDown && maxZoomRatio > 1.1) {
-        img.classList.remove('no-zoom');
-      } else {
-        img.classList.add('no-zoom');
-      }
+    if (this.prevBtn) {
+      this.prevBtn.style.transform = 'translateX(-100%)';
+      this.prevBtn.style.opacity = '0';
     }
 
-    /**
-     * Calculate zoom levels for an image
-     * @param {HTMLImageElement} img - Image element
-     * @returns {Object} Zoom configuration
-     */
-    calculateZoomLevels(img) {
-      if (!img || !img.naturalWidth || !img.naturalHeight) {
-        return {canZoom: false, levels: [], currentLevel: 0};
-      }
+    if (this.nextBtn) {
+      this.nextBtn.style.transform = 'translateX(100%)';
+      this.nextBtn.style.opacity = '0';
+    }
+  }
 
-      // Get CONTAINER size (not current displayed image size)
-      const container = this.content.getBoundingClientRect();
-      const containerWidth = container.width;
-      const containerHeight = container.height;
+  /**
+   * Check if image can be zoomed
+   * @param {HTMLImageElement} img - Image element
+   */
+  checkZoomability(img) {
+    if (!img || !img.naturalWidth || !img.naturalHeight) return;
+
+    const imgRect = img.getBoundingClientRect();
+    const renderedWidth = imgRect.width;
+    const renderedHeight = imgRect.height;
+    const naturalWidth = img.naturalWidth;
+    const naturalHeight = img.naturalHeight;
+
+    const isScaledDown = naturalWidth > renderedWidth || naturalHeight > renderedHeight;
+    const zoomRatioX = naturalWidth / renderedWidth;
+    const zoomRatioY = naturalHeight / renderedHeight;
+    const maxZoomRatio = Math.max(zoomRatioX, zoomRatioY);
+
+    // Store zoom info
+    img.dataset.zoomRatio = maxZoomRatio.toString();
+    img.dataset.naturalWidth = naturalWidth.toString();
+    img.dataset.naturalHeight = naturalHeight.toString();
+    img.dataset.renderedWidth = renderedWidth.toString();
+    img.dataset.renderedHeight = renderedHeight.toString();
+
+    // Enable zoom if significantly scaled down
+    if (isScaledDown && maxZoomRatio > 1.1) {
+      img.classList.remove('no-zoom');
+    } else {
+      img.classList.add('no-zoom');
+    }
+  }
 
-      const naturalWidth = img.naturalWidth;
-      const naturalHeight = img.naturalHeight;
+  /**
+   * Calculate zoom levels for an image
+   * @param {HTMLImageElement} img - Image element
+   * @returns {Object} Zoom configuration
+   */
+  calculateZoomLevels(img) {
+    if (!img || !img.naturalWidth || !img.naturalHeight) {
+      return {canZoom: false, levels: [], currentLevel: 0};
+    }
 
-      // Calculate what the ORIGINAL fit-to-screen scale would be
-      const scaleToFitWidth = containerWidth / naturalWidth;
-      const scaleToFitHeight = containerHeight / naturalHeight;
-      const fitScale = Math.min(scaleToFitWidth, scaleToFitHeight);
+    // Get CONTAINER size (not current displayed image size)
+    const container = this.content.getBoundingClientRect();
+    const containerWidth = container.width;
+    const containerHeight = container.height;
 
-      // If image naturally fits or is smaller than container, can't zoom
-      if (fitScale >= 0.95) {
-        return {canZoom: false, levels: [], currentLevel: 0};
-      }
+    const naturalWidth = img.naturalWidth;
+    const naturalHeight = img.naturalHeight;
 
-      // Respect the configured ceiling (falls back to 3x only if misconfigured)
-      const configuredMax = Number(this.options.maxZoomScale);
-      const maxZoom = Number.isFinite(configuredMax) && configuredMax > 0
-        ? Math.max(1, configuredMax)
-        : 3;
+    // Calculate what the ORIGINAL fit-to-screen scale would be
+    const scaleToFitWidth = containerWidth / naturalWidth;
+    const scaleToFitHeight = containerHeight / naturalHeight;
+    const fitScale = Math.min(scaleToFitWidth, scaleToFitHeight);
 
-      // Calculate zoom levels based on FIT scale (not current scale)
-      const levels = [1]; // Start with fit-to-screen
+    // If image naturally fits or is smaller than container, can't zoom
+    if (fitScale >= 0.95) {
+      return {canZoom: false, levels: [], currentLevel: 0};
+    }
 
-      // Add progressive levels up to the configured max: 1.5x, 2x, 3x, 4x, 5x...
-      [1.5, 2, 3, 4, 5].forEach((candidate) => {
-        if (candidate <= maxZoom && fitScale * candidate <= 1) {
-          levels.push(candidate);
-        }
-      });
+    // Respect the configured ceiling (falls back to 3x only if misconfigured)
+    const configuredMax = Number(this.options.maxZoomScale);
+    const maxZoom = Number.isFinite(configuredMax) && configuredMax > 0
+      ? Math.max(1, configuredMax)
+      : 3;
 
-      // Add actual size (100%) as final level, capped at the configured max
-      const actualSizeScale = Math.min(1 / fitScale, maxZoom);
-      if (actualSizeScale > levels[levels.length - 1]) {
-        levels.push(actualSizeScale);
-      }
+    // Calculate zoom levels based on FIT scale (not current scale)
+    const levels = [1]; // Start with fit-to-screen
 
-      return {
-        canZoom: levels.length > 1,
-        levels: levels,
-        currentLevel: 0,
-        baseScale: fitScale,
-        naturalWidth: naturalWidth,
-        naturalHeight: naturalHeight
-      };
-    }
-
-    /**
-     * Update counter display
-     */
-    updateCounter() {
-      if (this.options.showCounter && this.counter) {
-        this.counter.textContent = `${this.currentIndex + 1} / ${this.items.length}`;
+    // Add progressive levels up to the configured max: 1.5x, 2x, 3x, 4x, 5x...
+    [1.5, 2, 3, 4, 5].forEach((candidate) => {
+      if (candidate <= maxZoom && fitScale * candidate <= 1) {
+        levels.push(candidate);
       }
-    }
+    });
 
-    /**
-     * Update caption display
-     */
-    updateCaption() {
-      if (!this.caption || !this.items[this.currentIndex]) return;
+    // Add actual size (100%) as final level, capped at the configured max
+    const actualSizeScale = Math.min(1 / fitScale, maxZoom);
+    if (actualSizeScale > levels[levels.length - 1]) {
+      levels.push(actualSizeScale);
+    }
 
-      const item = this.items[this.currentIndex];
-      const caption = item.dataset.caption || item.title || '';
+    return {
+      canZoom: levels.length > 1,
+      levels: levels,
+      currentLevel: 0,
+      baseScale: fitScale,
+      naturalWidth: naturalWidth,
+      naturalHeight: naturalHeight
+    };
+  }
 
-      if (caption) {
-        this.caption.textContent = caption;
-        this.caption.style.transform = 'translateX(-50%) translateY(0)';
-        this.caption.style.opacity = '1';
-        this.caption.style.pointerEvents = 'auto';
-        this.caption.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
-      } else {
-        this.caption.style.transform = 'translateX(-50%) translateY(100%)';
-        this.caption.style.opacity = '0';
-        this.caption.style.pointerEvents = 'none';
-        this.caption.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
-      }
+  /**
+   * Update counter display
+   */
+  updateCounter() {
+    if (this.options.showCounter && this.counter) {
+      this.counter.textContent = `${this.currentIndex + 1} / ${this.items.length}`;
     }
+  }
 
-    /**
-     * Update thumbnails display
-     */
-    updateThumbnails() {
-      if (!this.options.showThumbnails || !this.thumbs) return;
+  /**
+   * Update caption display
+   */
+  updateCaption() {
+    if (!this.caption || !this.items[this.currentIndex]) return;
+
+    const item = this.items[this.currentIndex];
+    const caption = item.dataset.caption || item.title || '';
+
+    if (caption) {
+      this.caption.textContent = caption;
+      this.caption.style.transform = 'translateX(-50%) translateY(0)';
+      this.caption.style.opacity = '1';
+      this.caption.style.pointerEvents = 'auto';
+      this.caption.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+    } else {
+      this.caption.style.transform = 'translateX(-50%) translateY(100%)';
+      this.caption.style.opacity = '0';
+      this.caption.style.pointerEvents = 'none';
+      this.caption.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+    }
+  }
 
-      if (this.items.length === 1) {
-        this.caption.classList.add('single-item-thumbnail');
-        this.thumbs.style.display = 'none';
-        return;
-      }
+  /**
+   * Update thumbnails display
+   */
+  updateThumbnails() {
+    if (!this.options.showThumbnails || !this.thumbs) return;
 
-      this.caption.classList.remove('single-item-thumbnail');
+    if (this.items.length === 1) {
+      this.caption.classList.add('single-item-thumbnail');
+      this.thumbs.style.display = 'none';
+      return;
+    }
 
-      this.thumbs.style.display = 'flex';
-      this.thumbs.innerHTML = '';
+    this.caption.classList.remove('single-item-thumbnail');
 
-      this.items.forEach((item, index) => {
-        const thumb = document.createElement('div');
-        thumb.className = 'zoomora-thumb';
-        if (index === this.currentIndex) thumb.classList.add('active');
+    this.thumbs.style.display = 'flex';
+    this.thumbs.innerHTML = '';
 
-        const img = document.createElement('img');
-        const thumbSrc = this.getThumbnailSource(item);
+    this.items.forEach((item, index) => {
+      const thumb = document.createElement('div');
+      thumb.className = 'zoomora-thumb';
+      if (index === this.currentIndex) thumb.classList.add('active');
 
-        if (thumbSrc) {
-          img.src = thumbSrc;
-          img.alt = item.alt || item.title || '';
-          img.onerror = () => {
-            thumb.style.display = 'none';
-          };
-        }
+      const img = document.createElement('img');
+      const thumbSrc = this.getThumbnailSource(item);
 
-        thumb.appendChild(img);
+      if (thumbSrc) {
+        img.src = thumbSrc;
+        img.alt = item.alt || item.title || '';
+        img.onerror = () => {
+          thumb.style.display = 'none';
+        };
+      }
 
-        thumb.addEventListener('click', () => {
-          this.currentIndex = index;
-          this.loadContent();
-          this.updateCounter();
-          this.updateThumbnails();
-          this.updateNavigation();
-          this.updateCaption();
-        });
+      thumb.appendChild(img);
 
-        this.thumbs.appendChild(thumb);
+      thumb.addEventListener('click', () => {
+        this.currentIndex = index;
+        this.loadContent();
+        this.updateCounter();
+        this.updateThumbnails();
+        this.updateNavigation();
+        this.updateCaption();
       });
-    }
 
-    /**
-     * Update navigation buttons
-     */
-    updateNavigation() {
-      const prevBtn = document.getElementById('zoomoraPrevBtn');
-      const nextBtn = document.getElementById('zoomoraNextBtn');
+      this.thumbs.appendChild(thumb);
+    });
+  }
 
-      if (prevBtn) {
-        prevBtn.style.display = this.currentIndex > 0 ? 'flex' : 'none';
-      }
-      if (nextBtn) {
-        nextBtn.style.display = this.currentIndex < this.items.length - 1 ? 'flex' : 'none';
-      }
+  /**
+   * Update navigation buttons
+   */
+  updateNavigation() {
+    const prevBtn = document.getElementById('zoomoraPrevBtn');
+    const nextBtn = document.getElementById('zoomoraNextBtn');
+
+    if (prevBtn) {
+      prevBtn.style.display = this.currentIndex > 0 ? 'flex' : 'none';
+    }
+    if (nextBtn) {
+      nextBtn.style.display = this.currentIndex < this.items.length - 1 ? 'flex' : 'none';
     }
+  }
 
-    /**
-     * Update control buttons
-     */
-    updateButtons() {
-      const fullscreenBtn = document.getElementById('zoomoraFullscreenBtn');
-      const collapseBtn = document.getElementById('zoomoraCollapseBtn');
+  /**
+   * Update control buttons
+   */
+  updateButtons() {
+    const fullscreenBtn = document.getElementById('zoomoraFullscreenBtn');
+    const collapseBtn = document.getElementById('zoomoraCollapseBtn');
 
-      if (fullscreenBtn && collapseBtn) {
-        if (this.isFullscreen) {
-          fullscreenBtn.style.display = 'none';
-          collapseBtn.style.display = 'flex';
-        } else {
-          fullscreenBtn.style.display = 'flex';
-          collapseBtn.style.display = 'none';
-        }
+    if (fullscreenBtn && collapseBtn) {
+      if (this.isFullscreen) {
+        fullscreenBtn.style.display = 'none';
+        collapseBtn.style.display = 'flex';
+      } else {
+        fullscreenBtn.style.display = 'flex';
+        collapseBtn.style.display = 'none';
       }
     }
+  }
 
-    /**
-     * Toggle zoom state
-     */
-    toggleZoom() {
-      const media = this.content.querySelector('.zoomora-media');
-      if (!media || media.tagName !== 'IMG') return;
+  /**
+   * Toggle zoom state
+   */
+  toggleZoom() {
+    const media = this.content.querySelector('.zoomora-media');
+    if (!media || media.tagName !== 'IMG') return;
 
-      // Calculate zoom levels
-      const zoomConfig = this.calculateZoomLevels(media);
+    // Calculate zoom levels
+    const zoomConfig = this.calculateZoomLevels(media);
 
-      if (!zoomConfig.canZoom) {
-        return;
-      }
+    if (!zoomConfig.canZoom) {
+      return;
+    }
 
-      // Get or initialize current zoom level
-      if (!media.dataset.zoomLevel) {
-        media.dataset.zoomLevel = '0';
-      }
+    // Get or initialize current zoom level
+    if (!media.dataset.zoomLevel) {
+      media.dataset.zoomLevel = '0';
+    }
 
-      let currentLevel = parseInt(media.dataset.zoomLevel) || 0;
+    let currentLevel = parseInt(media.dataset.zoomLevel) || 0;
 
-      // Cycle to next level
-      currentLevel++;
-      if (currentLevel >= zoomConfig.levels.length) {
-        // Reset to fit-to-screen
-        currentLevel = 0;
-      }
+    // Cycle to next level
+    currentLevel++;
+    if (currentLevel >= zoomConfig.levels.length) {
+      // Reset to fit-to-screen
+      currentLevel = 0;
+    }
 
-      const targetScale = zoomConfig.levels[currentLevel];
-      media.dataset.zoomLevel = currentLevel.toString();
-
-      if (currentLevel === 0) {
-        // Back to fit-to-screen
-        this.isZoomed = false;
-        this.isDragging = false;
-        media.classList.remove('dragging');
-        media.style.transform = '';
-        media.style.cursor = 'pointer';
-        media.classList.remove('zoomed');
-        this.currentX = 0;
-        this.currentY = 0;
-        this.currentScale = 1;
-      } else {
-        // Zoom in - reset position to center
-        this.isZoomed = true;
-        this.currentScale = targetScale;
-        this.currentX = 0; // Always reset to center on zoom change
-        this.currentY = 0;
+    const targetScale = zoomConfig.levels[currentLevel];
+    media.dataset.zoomLevel = currentLevel.toString();
 
-        media.style.transform = `translate(0px, 0px) scale(${targetScale})`;
-        media.style.cursor = 'grab';
-        media.classList.add('zoomed');
-      }
-    }
+    if (currentLevel === 0) {
+      // Back to fit-to-screen
+      this.isZoomed = false;
+      this.isDragging = false;
+      media.classList.remove('dragging');
+      media.style.transform = '';
+      media.style.cursor = 'pointer';
+      media.classList.remove('zoomed');
+      this.currentX = 0;
+      this.currentY = 0;
+      this.currentScale = 1;
+    } else {
+      // Zoom in - reset position to center
+      this.isZoomed = true;
+      this.currentScale = targetScale;
+      this.currentX = 0; // Always reset to center on zoom change
+      this.currentY = 0;
 
-    /**
-     * Toggle fullscreen mode
-     */
-    toggleFullscreen() {
-      if (!this.isFullscreen) {
-        this.enterFullscreen();
-      } else {
-        this.exitFullscreen();
-      }
+      media.style.transform = `translate(0px, 0px) scale(${targetScale})`;
+      media.style.cursor = 'grab';
+      media.classList.add('zoomed');
     }
+  }
 
-    /**
-     * Enter fullscreen mode
-     */
-    enterFullscreen() {
-      const element = this.zoomora;
-
-      try {
-        // Try standard API first
-        if (element.requestFullscreen) {
-          element.requestFullscreen()
-            .then(() => {
-              this.isFullscreen = true;
-              this.zoomora.classList.add('fullscreen');
-              this.updateButtons();
-            })
-            .catch(err => {
-              console.warn('Zoomora: Fullscreen request failed:', err.message);
-              this.fallbackFullscreen();
-            });
-        }
-        // Try webkit (Safari, older Chrome)
-        else if (element.webkitRequestFullscreen) {
-          element.webkitRequestFullscreen();
-          // Webkit doesn't return a promise, so set state immediately
-          this.isFullscreen = true;
-          this.zoomora.classList.add('fullscreen');
-          this.updateButtons();
-        }
-        // Try moz (Firefox)
-        else if (element.mozRequestFullScreen) {
-          element.mozRequestFullScreen();
-          this.isFullscreen = true;
-          this.zoomora.classList.add('fullscreen');
-          this.updateButtons();
-        }
-        // Try ms (IE11)
-        else if (element.msRequestFullscreen) {
-          element.msRequestFullscreen();
-          this.isFullscreen = true;
-          this.zoomora.classList.add('fullscreen');
-          this.updateButtons();
-        }
-        // Fallback to CSS fullscreen
-        else {
-          console.warn('Zoomora: Fullscreen API not supported, using CSS fallback');
-          this.fallbackFullscreen();
-        }
-      } catch (error) {
-        console.error('Zoomora: Error entering fullscreen:', error);
-        this.fallbackFullscreen();
-      }
+  /**
+   * Toggle fullscreen mode
+   */
+  toggleFullscreen() {
+    if (!this.isFullscreen) {
+      this.enterFullscreen();
+    } else {
+      this.exitFullscreen();
     }
+  }
 
-    /**
-     * Exit fullscreen mode
-     */
-    exitFullscreen() {
-      // First check if we're actually in fullscreen
-      const isInFullscreen = !!(
-        document.fullscreenElement ||
-        document.webkitFullscreenElement ||
-        document.mozFullScreenElement ||
-        document.msFullscreenElement
-      );
-
-      if (!isInFullscreen) {
-        // Not in real fullscreen, just exit CSS fullscreen
-        this.fallbackExitFullscreen();
-        return;
+  /**
+   * Enter fullscreen mode
+   */
+  enterFullscreen() {
+    const element = this.zoomora;
+
+    try {
+      // Try standard API first
+      if (element.requestFullscreen) {
+        element.requestFullscreen()
+          .then(() => {
+            this.isFullscreen = true;
+            this.zoomora.classList.add('fullscreen');
+            this.updateButtons();
+          })
+          .catch(err => {
+            console.warn('Zoomora: Fullscreen request failed:', err.message);
+            this.fallbackFullscreen();
+          });
+      }
+      // Try webkit (Safari, older Chrome)
+      else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+        // Webkit doesn't return a promise, so set state immediately
+        this.isFullscreen = true;
+        this.zoomora.classList.add('fullscreen');
+        this.updateButtons();
       }
-
-      try {
-        // Try standard API first
-        if (document.exitFullscreen) {
-          document.exitFullscreen()
-            .then(() => {
-              this.isFullscreen = false;
-              this.zoomora.classList.remove('fullscreen');
-              this.updateButtons();
-            })
-            .catch(err => {
-              console.warn('Zoomora: Exit fullscreen failed:', err.message);
-              this.fallbackExitFullscreen();
-            });
-        }
-        // Try webkit
-        else if (document.webkitExitFullscreen) {
-          document.webkitExitFullscreen();
-          this.isFullscreen = false;
-          this.zoomora.classList.remove('fullscreen');
-          this.updateButtons();
-        }
-        // Try moz
-        else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-          this.isFullscreen = false;
-          this.zoomora.classList.remove('fullscreen');
-          this.updateButtons();
-        }
-        // Try ms
-        else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
-          this.isFullscreen = false;
-          this.zoomora.classList.remove('fullscreen');
-          this.updateButtons();
-        }
-        // Fallback
-        else {
-          this.fallbackExitFullscreen();
-        }
-      } catch (error) {
-        console.error('Zoomora: Error exiting fullscreen:', error);
-        this.fallbackExitFullscreen();
+      // Try moz (Firefox)
+      else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen();
+        this.isFullscreen = true;
+        this.zoomora.classList.add('fullscreen');
+        this.updateButtons();
       }
+      // Try ms (IE11)
+      else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+        this.isFullscreen = true;
+        this.zoomora.classList.add('fullscreen');
+        this.updateButtons();
+      }
+      // Fallback to CSS fullscreen
+      else {
+        console.warn('Zoomora: Fullscreen API not supported, using CSS fallback');
+        this.fallbackFullscreen();
+      }
+    } catch (error) {
+      console.error('Zoomora: Error entering fullscreen:', error);
+      this.fallbackFullscreen();
     }
+  }
 
-    /**
-     * Fallback fullscreen using CSS
-     */
-    fallbackFullscreen() {
-      this.isFullscreen = true;
-      this.zoomora.classList.add('fullscreen');
-      this.updateButtons();
+  /**
+   * Exit fullscreen mode
+   */
+  exitFullscreen() {
+    // First check if we're actually in fullscreen
+    const isInFullscreen = !!(
+      document.fullscreenElement ||
+      document.webkitFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.msFullscreenElement
+    );
+
+    if (!isInFullscreen) {
+      // Not in real fullscreen, just exit CSS fullscreen
+      this.fallbackExitFullscreen();
+      return;
     }
 
-    /**
-     * Exit CSS fullscreen
-     */
-    fallbackExitFullscreen() {
-      this.isFullscreen = false;
-      this.zoomora.classList.remove('fullscreen');
-      this.updateButtons();
+    try {
+      // Try standard API first
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+          .then(() => {
+            this.isFullscreen = false;
+            this.zoomora.classList.remove('fullscreen');
+            this.updateButtons();
+          })
+          .catch(err => {
+            console.warn('Zoomora: Exit fullscreen failed:', err.message);
+            this.fallbackExitFullscreen();
+          });
+      }
+      // Try webkit
+      else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+        this.isFullscreen = false;
+        this.zoomora.classList.remove('fullscreen');
+        this.updateButtons();
+      }
+      // Try moz
+      else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+        this.isFullscreen = false;
+        this.zoomora.classList.remove('fullscreen');
+        this.updateButtons();
+      }
+      // Try ms
+      else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+        this.isFullscreen = false;
+        this.zoomora.classList.remove('fullscreen');
+        this.updateButtons();
+      }
+      // Fallback
+      else {
+        this.fallbackExitFullscreen();
+      }
+    } catch (error) {
+      console.error('Zoomora: Error exiting fullscreen:', error);
+      this.fallbackExitFullscreen();
     }
+  }
 
-    /**
-     * Toggle thumbnails visibility
-     */
-    toggleThumbnails() {
-      if (this.items.length === 1) return;
-
-      this.thumbnailsVisible = !this.thumbnailsVisible;
-      if (this.thumbs) {
-        this.thumbs.classList.toggle('thumbs-hidden', !this.thumbnailsVisible);
-
-        if (!this.caption || !this.items[this.currentIndex]) return;
+  /**
+   * Fallback fullscreen using CSS
+   */
+  fallbackFullscreen() {
+    this.isFullscreen = true;
+    this.zoomora.classList.add('fullscreen');
+    this.updateButtons();
+  }
 
-        const item = this.items[this.currentIndex];
-        const caption = item.dataset.caption || item.title || '';
+  /**
+   * Exit CSS fullscreen
+   */
+  fallbackExitFullscreen() {
+    this.isFullscreen = false;
+    this.zoomora.classList.remove('fullscreen');
+    this.updateButtons();
+  }
 
-        if (caption && this.thumbs.classList.contains('thumbs-hidden')) {
-          this.caption.style.bottom = '20px';
-          this.caption.style.transition = 'bottom 0.3s ease, transform 0.3s ease';
-        } else {
-          this.caption.style.bottom = '120px';
-        }
-      }
-    }
+  /**
+   * Toggle thumbnails visibility
+   */
+  toggleThumbnails() {
+    if (this.items.length === 1) return;
 
-    /**
-     * Start drag operation
-     * @param {Event} e - Mouse or touch event
-     */
-    startDrag(e) {
-      const media = this.content.querySelector('.zoomora-media');
-      if (!media || !this.isZoomed) return;
+    this.thumbnailsVisible = !this.thumbnailsVisible;
+    if (this.thumbs) {
+      this.thumbs.classList.toggle('thumbs-hidden', !this.thumbnailsVisible);
 
-      this.isDragging = true;
-      media.classList.add('dragging');
-      media.style.cursor = 'grabbing';
+      if (!this.caption || !this.items[this.currentIndex]) return;
 
-      this.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;
-      this.startY = e.clientY || (e.touches && e.touches[0].clientY) || 0;
+      const item = this.items[this.currentIndex];
+      const caption = item.dataset.caption || item.title || '';
 
-      // Read current position from transform
-      const transform = window.getComputedStyle(media).transform;
-      if (transform && transform !== 'none') {
-        const matrix = new DOMMatrix(transform);
-        this.currentX = matrix.m41;
-        this.currentY = matrix.m42;
+      if (caption && this.thumbs.classList.contains('thumbs-hidden')) {
+        this.caption.style.bottom = '20px';
+        this.caption.style.transition = 'bottom 0.3s ease, transform 0.3s ease';
       } else {
-        this.currentX = 0;
-        this.currentY = 0;
+        this.caption.style.bottom = '120px';
       }
-
-      e.preventDefault();
     }
+  }
 
-    /**
-     * Handle drag movement
-     * @param {Event} e - Mouse or touch event
-     */
-    drag(e) {
-      if (!this.isDragging) return;
-      e.preventDefault();
+  /**
+   * Start drag operation
+   * @param {Event} e - Mouse or touch event
+   */
+  startDrag(e) {
+    const media = this.content.querySelector('.zoomora-media');
+    if (!media || !this.isZoomed) return;
+
+    this.isDragging = true;
+    media.classList.add('dragging');
+    media.style.cursor = 'grabbing';
+
+    this.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;
+    this.startY = e.clientY || (e.touches && e.touches[0].clientY) || 0;
+
+    // Read current position from transform
+    const transform = window.getComputedStyle(media).transform;
+    if (transform && transform !== 'none') {
+      const matrix = new DOMMatrix(transform);
+      this.currentX = matrix.m41;
+      this.currentY = matrix.m42;
+    } else {
+      this.currentX = 0;
+      this.currentY = 0;
+    }
 
-      const media = this.content.querySelector('.zoomora-media');
-      if (!media) return;
+    e.preventDefault();
+  }
 
-      const clientX = e.clientX || (e.touches && e.touches[0].clientX) || 0;
-      const clientY = e.clientY || (e.touches && e.touches[0].clientY) || 0;
+  /**
+   * Handle drag movement
+   * @param {Event} e - Mouse or touch event
+   */
+  drag(e) {
+    if (!this.isDragging) return;
+    e.preventDefault();
 
-      const deltaX = clientX - this.startX;
-      const deltaY = clientY - this.startY;
+    const media = this.content.querySelector('.zoomora-media');
+    if (!media) return;
 
-      let newX = this.currentX + deltaX;
-      let newY = this.currentY + deltaY;
+    const clientX = e.clientX || (e.touches && e.touches[0].clientX) || 0;
+    const clientY = e.clientY || (e.touches && e.touches[0].clientY) || 0;
 
-      // Calculate boundaries for BOTH width AND height
-      const container = this.content.getBoundingClientRect();
-      const mediaRect = media.getBoundingClientRect();
+    const deltaX = clientX - this.startX;
+    const deltaY = clientY - this.startY;
 
-      // How much the scaled image overflows the container
-      const overflowX = Math.max(0, (mediaRect.width - container.width) / 2);
-      const overflowY = Math.max(0, (mediaRect.height - container.height) / 2);
+    let newX = this.currentX + deltaX;
+    let newY = this.currentY + deltaY;
 
-      // Constrain drag to overflow boundaries
-      if (overflowX > 0) {
-        newX = Math.max(-overflowX, Math.min(overflowX, newX));
-      } else {
-        newX = 0; // Center horizontally if no overflow
-      }
+    // Calculate boundaries for BOTH width AND height
+    const container = this.content.getBoundingClientRect();
+    const mediaRect = media.getBoundingClientRect();
 
-      if (overflowY > 0) {
-        newY = Math.max(-overflowY, Math.min(overflowY, newY));
-      } else {
-        newY = 0; // Center vertically if no overflow
-      }
+    // How much the scaled image overflows the container
+    const overflowX = Math.max(0, (mediaRect.width - container.width) / 2);
+    const overflowY = Math.max(0, (mediaRect.height - container.height) / 2);
 
-      // Apply transform
-      media.style.transform = `translate(${newX}px, ${newY}px) scale(${this.currentScale})`;
+    // Constrain drag to overflow boundaries
+    if (overflowX > 0) {
+      newX = Math.max(-overflowX, Math.min(overflowX, newX));
+    } else {
+      newX = 0; // Center horizontally if no overflow
+    }
 
-      // Update for next frame
-      this.startX = clientX;
-      this.startY = clientY;
-      this.currentX = newX;
-      this.currentY = newY;
+    if (overflowY > 0) {
+      newY = Math.max(-overflowY, Math.min(overflowY, newY));
+    } else {
+      newY = 0; // Center vertically if no overflow
     }
 
-    /**
-     * End drag operation
-     */
-    endDrag() {
-      if (!this.isDragging) return;
+    // Apply transform
+    media.style.transform = `translate(${newX}px, ${newY}px) scale(${this.currentScale})`;
 
-      this.isDragging = false;
-      this.lastDragTime = Date.now();
+    // Update for next frame
+    this.startX = clientX;
+    this.startY = clientY;
+    this.currentX = newX;
+    this.currentY = newY;
+  }
 
-      const media = this.content.querySelector('.zoomora-media');
-      if (media) {
-        media.classList.remove('dragging');
-        if (this.isZoomed) {
-          media.style.cursor = 'grab';
-        }
-      }
-    }
+  /**
+   * End drag operation
+   */
+  endDrag() {
+    if (!this.isDragging) return;
 
-    /**
-     * Go to specific item by index
-     * @param {number} index - Item index
-     */
-    goTo(index) {
-      if (index < 0 || index >= this.items.length) return;
+    this.isDragging = false;
+    this.lastDragTime = Date.now();
 
-      this.currentIndex = index;
-      this.loadContent();
-      this.updateCounter();
-      this.updateThumbnails();
-      this.updateNavigation();
-      this.updateCaption();
+    const media = this.content.querySelector('.zoomora-media');
+    if (media) {
+      media.classList.remove('dragging');
+      if (this.isZoomed) {
+        media.style.cursor = 'grab';
+      }
     }
+  }
 
-    /**
-     * Get current item index
-     * @returns {number} - Current index
-     */
-    getCurrentIndex() {
-      return this.currentIndex;
-    }
+  /**
+   * Go to specific item by index
+   * @param {number} index - Item index
+   */
+  goTo(index) {
+    if (index < 0 || index >= this.items.length) return;
+
+    this.currentIndex = index;
+    this.loadContent();
+    this.updateCounter();
+    this.updateThumbnails();
+    this.updateNavigation();
+    this.updateCaption();
+  }
 
-    /**
-     * Get total number of items
-     * @returns {number} - Total items
-     */
-    getTotalItems() {
-      return this.items.length;
-    }
+  /**
+   * Get current item index
+   * @returns {number} - Current index
+   */
+  getCurrentIndex() {
+    return this.currentIndex;
+  }
 
-    /**
-     * Check if lightbox is open
-     * @returns {boolean} - True if open
-     */
-    isOpen() {
-      return this.zoomora && this.zoomora.classList.contains('active');
-    }
+  /**
+   * Get total number of items
+   * @returns {number} - Total items
+   */
+  getTotalItems() {
+    return this.items.length;
+  }
 
-    /**
-     * Update options
-     * @param {Object} newOptions - New options to merge
-     */
-    updateOptions(newOptions) {
-      this.options = {...this.options, ...newOptions};
-    }
+  /**
+   * Check if lightbox is open
+   * @returns {boolean} - True if open
+   */
+  isOpen() {
+    return this.zoomora && this.zoomora.classList.contains('active');
+  }
 
-    /**
-     * Refresh the lightbox (re-scan for items)
-     */
-    refresh() {
-      if (this.isOpen()) {
-        const currentItem = this.items[this.currentIndex];
-        if (currentItem) {
-          this.open(currentItem);
-        }
+  /**
+   * Update options
+   * @param {Object} newOptions - New options to merge
+   */
+  updateOptions(newOptions) {
+    this.options = {...this.options, ...newOptions};
+  }
+
+  /**
+   * Refresh the lightbox (re-scan for items)
+   */
+  refresh() {
+    if (this.isOpen()) {
+      const currentItem = this.items[this.currentIndex];
+      if (currentItem) {
+        this.open(currentItem);
       }
     }
+  }
 
-    /**
-     * Destroy the lightbox instance
-     */
-    destroy() {
-      if (!this.isInitialized) return;
+  /**
+   * Destroy the lightbox instance
+   */
+  destroy() {
+    if (!this.isInitialized) return;
 
-      // Close if open
-      if (this.isOpen()) {
-        this.close();
-      }
+    // Close if open
+    if (this.isOpen()) {
+      this.close();
+    }
 
-      // Clean up auto-hide
-      this.stopAutoHideTimer();
+    // Clean up auto-hide
+    this.stopAutoHideTimer();
 
-      // Remove all event listeners
-      this.eventListeners.forEach((listeners, _key) => {
-        listeners.forEach(({element, event, handler, options}) => {
-          if (element && element.removeEventListener) {
-            element.removeEventListener(event, handler, options);
-          }
-        });
+    // Remove all event listeners
+    this.eventListeners.forEach((listeners, _key) => {
+      listeners.forEach(({element, event, handler, options}) => {
+        if (element && element.removeEventListener) {
+          element.removeEventListener(event, handler, options);
+        }
       });
-      this.eventListeners.clear();
+    });
+    this.eventListeners.clear();
 
-      // Remove DOM elements
-      if (this.zoomora && this.zoomora.parentNode) {
-        this.zoomora.parentNode.removeChild(this.zoomora);
-      }
-
-      // Reset properties
-      this.isInitialized = false;
-      this.items = [];
-      this.currentIndex = 0;
-      this.zoomora = null;
-      this.content = null;
-      this.counter = null;
-      this.thumbs = null;
-      this.loading = null;
-      this.caption = null;
+    // Remove DOM elements
+    if (this.zoomora && this.zoomora.parentNode) {
+      this.zoomora.parentNode.removeChild(this.zoomora);
     }
+
+    // Reset properties
+    this.isInitialized = false;
+    this.items = [];
+    this.currentIndex = 0;
+    this.zoomora = null;
+    this.content = null;
+    this.counter = null;
+    this.thumbs = null;
+    this.loading = null;
+    this.caption = null;
   }
+}
 
-  // Export the class
-  return Zoomora;
-}));
+export default Zoomora;