zoomora 1.1.0 → 1.2.0

package/README.md

@@ -2,11 +2,20 @@
 
 ![Zoomora Lightbox Banner](assets/zoomora-lightbox-banner.jpg)
 
+<div align="center">
+
 A modern, responsive lightbox plugin with zoom, fullscreen, and gallery features. Perfect for showcasing images and videos in a beautiful, user-friendly interface.
 
 [![View Live Demo](https://img.shields.io/badge/View-Live%20Demo-667eea?style=for-the-badge&logo=github)](https://fronttheme.github.io/zoomora/)
-![Version](https://img.shields.io/badge/version-1.1.0-blue.svg)
-![License](https://img.shields.io/badge/license-MIT-green.svg)
+[![npm version](https://img.shields.io/npm/v/zoomora?style=for-the-badge&logo=npm&color=CB3837)](https://www.npmjs.com/package/zoomora)
+[![npm downloads](https://img.shields.io/npm/dm/zoomora?style=for-the-badge&logo=npm&color=CB3837)](https://www.npmjs.com/package/zoomora)
+[![License](https://img.shields.io/npm/l/zoomora?style=for-the-badge&color=green)](https://github.com/fronttheme/zoomora/blob/main/LICENSE)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/zoomora?style=for-the-badge&color=orange&logo=webpack)](https://bundlephobia.com/package/zoomora)
+[![GitHub stars](https://img.shields.io/github/stars/fronttheme/zoomora?style=for-the-badge&logo=github&color=yellow)](https://github.com/fronttheme/zoomora/stargazers)
+
+**[Demo](https://fronttheme.github.io/zoomora/)** • **[Documentation](#-quick-start)** • **[Report Bug](https://github.com/fronttheme/zoomora/issues)** • **[Request Feature](https://github.com/fronttheme/zoomora/issues)**
+
+</div>
 
 ## ✨ Features
 
@@ -22,8 +31,9 @@ A modern, responsive lightbox plugin with zoom, fullscreen, and gallery features
 - 🌓 **Fullscreen Mode** - Immersive viewing experience
 - 🎨 **Customizable** - Extensive options and callbacks
 - ♿ **Accessible** - Keyboard and screen reader friendly
-- 🚀 **Lightweight** - No dependencies required
+- 🚀 **Lightweight** - No dependencies required (~15KB gzipped)
 - 🔧 **Easy Integration** - Works with vanilla JS, React, Vue, etc.
+- 🎁 **MIT Licensed** - Free for personal and commercial use
 
 ## 📦 Installation
 
@@ -33,6 +43,12 @@ A modern, responsive lightbox plugin with zoom, fullscreen, and gallery features
 npm install zoomora
 ```
 
+### Yarn
+
+```bash
+yarn add zoomora
+```
+
 ### CDN
 
 ```html
@@ -86,6 +102,7 @@ const lightbox = new Zoomora({
   transition: 'fade', // 'fade' or 'slide'
   maxZoomScale: 3,
   animationDuration: 300,
+  closeOnBackgroundClick: true, // v1.2.0+
   autoHideDelay: 3000,
   autoHideEnabled: false,
   onOpen: (element, index) => {
@@ -182,6 +199,7 @@ const lightbox = Zoomora.bind('a[data-lightbox]', {
 | `maxZoomScale` | Number | `3` | Maximum zoom scale |
 | `zoomStep` | Number | `0.1` | Zoom step for scroll wheel |
 | `animationDuration` | Number | `300` | Animation duration in milliseconds |
+| `closeOnBackgroundClick` | Boolean | `true` | Close lightbox on background click (v1.2.0+) |
 | `showAutoHideToggle` | Boolean | `true` | Show auto-hide toggle button |
 | `autoHideDelay` | Number | `3000` | Delay before hiding controls (ms) |
 | `autoHideEnabled` | Boolean | `false` | Enable auto-hide by default |
@@ -250,13 +268,39 @@ Zoomora includes beautiful default styles, but you can customize them:
 }
 ```
 
+## 📊 Stats & Performance
+
+- **Bundle Size**: ~15KB minified + gzipped
+- **Zero Dependencies**: Pure vanilla JavaScript
+- **Browser Support**: All modern browsers (Chrome, Firefox, Safari, Edge)
+- **Mobile Optimized**: Touch-friendly with gesture support
+- **Performance**: 60fps smooth animations
+- **Accessibility**: WCAG 2.1 AA compliant
+
 ## 🌐 Browser Support
 
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- Mobile browsers (iOS Safari, Chrome Mobile)
+- ✅ Chrome (latest)
+- ✅ Firefox (latest)
+- ✅ Safari (latest)
+- ✅ Edge (latest)
+- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
+
+## 📝 Changelog
+
+See [CHANGELOG.md](CHANGELOG.md) for a detailed list of changes.
+
+### Recent Updates
+
+#### v1.2.0 (Latest)
+- ✨ **New**: Background click to close lightbox
+- ✨ **New**: `closeOnBackgroundClick` configuration option
+- 🐛 **Fixed**: Smart click detection between media and background
+
+#### v1.1.0
+- ✨ Progressive zoom levels (1x → 1.5x → 2x → 3x → 100%)
+- 🐛 Fixed drag dezooming issue
+- 🐛 Fixed auto-hide toggle not working
+- 🐛 Fixed vertical image boundary calculations
 
 ## 🤝 Contributing
 
@@ -268,27 +312,43 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 4. Push to the branch (`git push origin feature/AmazingFeature`)
 5. Open a Pull Request
 
-## 📝 License
+## 📄 License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
 ## 👨‍💻 Author
 
-**Faruk Ahmed**  
-[FrontTheme](https://fronttheme.com)
+**Faruk Ahmed**
+- Website: [FrontTheme](https://fronttheme.com)
+- Portfolio: [farukdesign.com](https://www.farukdesign.com/)
+- GitHub: [@fronttheme](https://github.com/fronttheme)
 
 ## 🙏 Acknowledgments
 
 - Inspired by modern lightbox libraries
 - Built with love for the web community
+- Thanks to all [contributors](https://github.com/fronttheme/zoomora/graphs/contributors)!
 
-## 🔗 Resources
+## 💬 Community & Support
 
-- 🟢 [Live Demo](https://fronttheme.github.io/zoomora/)
 - 🐛 [Report a bug](https://github.com/fronttheme/zoomora/issues)
 - 💡 [Request a feature](https://github.com/fronttheme/zoomora/issues)
-- 📖 [Documentation](https://github.com/fronttheme/zoomora)
+- 📖 [Read the docs](https://github.com/fronttheme/zoomora)
+- ⭐ [Star on GitHub](https://github.com/fronttheme/zoomora)
+
+## 🔗 Resources
+
+- 🟢 [Live Demo](https://fronttheme.github.io/zoomora/)
+- 📦 [NPM Package](https://www.npmjs.com/package/zoomora)
+- 📚 [Documentation](https://github.com/fronttheme/zoomora)
+- 💬 [Discussions](https://github.com/fronttheme/zoomora/discussions)
 
 ---
 
-Made with ❤️ by [FrontTheme](https://fronttheme.com)
+<div align="center">
+
+Made with ❤️ by [FrontTheme](https://fronttheme.com)
+
+**[⬆ back to top](#zoomora-lightbox)**
+
+</div>

package/dist/zoomora.es.js

@@ -24,10 +24,10 @@ var __commonJS = (cb, mod) => function __require() {
 var require_zoomora_es = __commonJS({
   "zoomora.es.js"(exports, module) {
     /*!
-     * Zoomora Lightbox Plugin v1.1.0
+     * Zoomora Lightbox Plugin v1.2.0
      * A modern, responsive lightbox plugin with zoom, fullscreen, and gallery features
      *
-     * Copyright (c) 2025 Faruk Ahmed (FrontTheme)
+     * Copyright (c) 2026 Faruk Ahmed (FrontTheme)
      * Licensed under MIT License
      */
     (function(global, factory) {
@@ -61,6 +61,8 @@ var require_zoomora_es = __commonJS({
             // 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,
@@ -315,11 +317,15 @@ var require_zoomora_es = __commonJS({
          * Handle fullscreen change events
          */
         handleFullscreenChange() {
-          const isInFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+          const isInFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
           if (!isInFullscreen && this.isFullscreen) {
             this.isFullscreen = false;
             this.zoomora.classList.remove("fullscreen");
             this.updateButtons();
+          } else if (isInFullscreen && !this.isFullscreen) {
+            this.isFullscreen = true;
+            this.zoomora.classList.add("fullscreen");
+            this.updateButtons();
           }
         }
         /**
@@ -327,7 +333,7 @@ var require_zoomora_es = __commonJS({
          * @param {Event} e - Click event
          */
         handleZoomoraClick(e) {
-          if (e.target === this.zoomora) {
+          if (e.target === this.zoomora && this.options.closeOnBackgroundClick) {
             this.close();
           }
         }
@@ -339,9 +345,37 @@ var require_zoomora_es = __commonJS({
           if (Date.now() - this.lastDragTime < 200) {
             return;
           }
-          const media = e.target.closest(".zoomora-media");
-          if (media && !media.classList.contains("no-zoom")) {
-            this.toggleZoom();
+          if (this.header && this.header.contains(e.target)) {
+            return;
+          }
+          if (e.target.closest("button")) {
+            return;
+          }
+          const mediaElement = e.target.closest(".zoomora-media, .zoomora-video, .zoomora-iframe");
+          if (mediaElement) {
+            if (mediaElement.classList.contains("zoomora-media") && !mediaElement.classList.contains("no-zoom")) {
+              this.toggleZoom();
+            }
+            return;
+          }
+          const videoContainer = e.target.closest(".zoomora-video-container");
+          if (videoContainer) {
+            if (e.target.closest(".zoomora-play-button")) {
+              return;
+            }
+            if (this.options.closeOnBackgroundClick) {
+              this.close();
+            }
+            return;
+          }
+          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;
+          }
+          if (this.options.closeOnBackgroundClick) {
+            this.close();
           }
         }
         /**
@@ -807,11 +841,6 @@ var require_zoomora_es = __commonJS({
             img.classList.add("no-zoom");
           }
         }
-        /**
-         * Calculate zoom levels for an image
-         * @param {HTMLImageElement} img - Image element
-         * @returns {Object} Zoom configuration
-         */
         /**
          * Calculate zoom levels for an image
          * @param {HTMLImageElement} img - Image element
@@ -952,7 +981,6 @@ var require_zoomora_es = __commonJS({
           if (!media || media.tagName !== "IMG") return;
           const zoomConfig = this.calculateZoomLevels(media);
           if (!zoomConfig.canZoom) {
-            console.log("Image cannot be zoomed (already at full size or larger)");
             return;
           }
           if (!media.dataset.zoomLevel) {
@@ -983,7 +1011,6 @@ var require_zoomora_es = __commonJS({
             media.style.transform = `translate(0px, 0px) scale(${targetScale})`;
             media.style.cursor = "grab";
             media.classList.add("zoomed");
-            console.log(`Zoomed to level ${currentLevel}/${zoomConfig.levels.length - 1} (${(targetScale * 100).toFixed(0)}%)`);
           }
         }
         /**
@@ -1015,17 +1042,37 @@ var require_zoomora_es = __commonJS({
          */
         enterFullscreen() {
           const element = this.zoomora;
-          const requestFullscreen = element.requestFullscreen || element.webkitRequestFullscreen || element.mozRequestFullScreen || element.msRequestFullscreen;
-          if (requestFullscreen) {
-            requestFullscreen.call(element).then(() => {
+          try {
+            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();
+              });
+            } else if (element.webkitRequestFullscreen) {
+              element.webkitRequestFullscreen();
+              this.isFullscreen = true;
+              this.zoomora.classList.add("fullscreen");
+              this.updateButtons();
+            } else if (element.mozRequestFullScreen) {
+              element.mozRequestFullScreen();
               this.isFullscreen = true;
               this.zoomora.classList.add("fullscreen");
               this.updateButtons();
-            }).catch((err) => {
-              console.warn("Zoomora: Could not enter fullscreen:", err);
+            } else if (element.msRequestFullscreen) {
+              element.msRequestFullscreen();
+              this.isFullscreen = true;
+              this.zoomora.classList.add("fullscreen");
+              this.updateButtons();
+            } else {
+              console.warn("Zoomora: Fullscreen API not supported, using CSS fallback");
               this.fallbackFullscreen();
-            });
-          } else {
+            }
+          } catch (error) {
+            console.error("Zoomora: Error entering fullscreen:", error);
             this.fallbackFullscreen();
           }
         }
@@ -1033,22 +1080,41 @@ var require_zoomora_es = __commonJS({
          * Exit fullscreen mode
          */
         exitFullscreen() {
-          const isInFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
-          if (isInFullscreen) {
-            const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
-            if (exitFullscreen) {
-              exitFullscreen.call(document).then(() => {
+          const isInFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
+          if (!isInFullscreen) {
+            this.fallbackExitFullscreen();
+            return;
+          }
+          try {
+            if (document.exitFullscreen) {
+              document.exitFullscreen().then(() => {
                 this.isFullscreen = false;
                 this.zoomora.classList.remove("fullscreen");
                 this.updateButtons();
               }).catch((err) => {
-                console.warn("Zoomora: Could not exit fullscreen:", err);
+                console.warn("Zoomora: Exit fullscreen failed:", err.message);
                 this.fallbackExitFullscreen();
               });
+            } else if (document.webkitExitFullscreen) {
+              document.webkitExitFullscreen();
+              this.isFullscreen = false;
+              this.zoomora.classList.remove("fullscreen");
+              this.updateButtons();
+            } else if (document.mozCancelFullScreen) {
+              document.mozCancelFullScreen();
+              this.isFullscreen = false;
+              this.zoomora.classList.remove("fullscreen");
+              this.updateButtons();
+            } else if (document.msExitFullscreen) {
+              document.msExitFullscreen();
+              this.isFullscreen = false;
+              this.zoomora.classList.remove("fullscreen");
+              this.updateButtons();
             } else {
               this.fallbackExitFullscreen();
             }
-          } else {
+          } catch (error) {
+            console.error("Zoomora: Error exiting fullscreen:", error);
             this.fallbackExitFullscreen();
           }
         }