RSK World - Image Lightbox Gallery | Zoom, Navigation, AI, VR, Voice Control | RSK World

Zoom & Navigation AI & Themes Slideshow & Compare Analytics & Share Vanilla JS

Image Lightbox Gallery is an interactive image viewer with zoom, pan, keyboard navigation, and advanced features. Includes: lightbox with prev/next, zoom in/out/reset, drag-to-pan, touch support; AI-powered image tagging (AITagManager); VR/AR modes (WebXR); voice control (Web Speech API); slideshow and comparison modes; theme manager, search, filters, analytics, social sharing. CSS: style.css, advanced-styles.css, ultra-advanced-styles.css. JS: lightbox.js, ai-tags.js, slideshow-comparison.js, advanced-features.js, ultra-advanced-features.js. By rskworld.in.

If you find this Image Lightbox Gallery project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Image Lightbox Gallery

Lightbox & Zoom

lightbox.js: ImageLightbox class with zoom in/out/reset, mouse wheel zoom, drag-to-pan when zoomed, touch support, keyboard (ESC, arrows, +/-, 0). Image preloading, slide animations, counter and caption. Min/max zoom limits, smooth transitions.

lightbox.js: openLightbox(), zoom(), resetZoom(), applyZoom()
Mouse wheel zoom, drag to pan, touch gestures
Keyboard: ESC close, ←→ navigate, +/- zoom, 0 reset
Lazy thumbnails, preload full-size images

Project Structure & Files

Root: index.html (gallery + lightbox), test-features.html, simple-test.html, working-test.html. css: style.css, advanced-styles.css, ultra-advanced-styles.css. js: lightbox.js, ai-tags.js, slideshow-comparison.js, advanced-features.js, ultra-advanced-features.js. No build step. Open index.html or serve folder.

index.html, test-features.html, simple-test.html, working-test.html
No build step – open index.html or static server
Font Awesome 6, Picsum Photos for demo images
Zero dependencies; vanilla HTML, CSS, JavaScript

AI Tags & Themes

ai-tags.js: AITagManager with color/object/scene/mood analysis, semantic tags from title/description, confidence scores. advanced-features.js: ThemeManager for multiple themes, ImageSearchEngine, filter by tags. CSS variables for primary/secondary colors.

ai-tags.js: generateTags(), ColorAnalyzer, ObjectDetector, SceneAnalyzer
advanced-styles.css: --primary-color, --secondary-color
Theme selector, search dialog, filter by tags
Smooth transitions and glass-morphism panels

Slideshow & Comparison

slideshow-comparison.js: SlideshowMode with play/pause, configurable speed, transition types (fade, slide, zoom, flip, cube). ComparisonMode for side-by-side image compare. Advanced analytics tracking, gesture controls.

SlideshowMode: start(), stop(), nextSlide(), setSpeed(), setTransition()
ComparisonMode: side-by-side view, selection dialog
advanced-features.js: AnalyticsTracker, GestureController
Ctrl+S slideshow, Ctrl+F search shortcuts

Pages & Controls

index.html: Gallery grid, lightbox modal, advanced panel (right: search, filter, slideshow, compare, 3D, share, theme, analytics), ultra panel (left: VR, AR, ML, voice, face, emotion, color, enhance, blockchain, quantum, holographic, neural). test-features.html: feature test panel.

index.html – gallery + lightbox + both control panels
Right panel: search, themes, analytics, slideshow, compare
Left panel: VR, AR, voice, AI, face, emotion, color
Keyboard: ESC, arrows, +/-, 0, Ctrl+F, Ctrl+S

What You Get

Static HTML/CSS/JS: index.html, test-features.html, style.css, advanced-styles.css, ultra-advanced-styles.css, lightbox.js, ai-tags.js, slideshow-comparison.js, advanced-features.js, ultra-advanced-features.js. README.md with features and API. No build step. Open index.html or serve folder.

Complete source – all HTML, CSS and JS files
No build step – open index.html or static server
README.md with usage and customization
Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Open index.html to view the gallery. Click any image to open the lightbox; use zoom buttons or mouse wheel, drag to pan when zoomed. Use right panel for search, themes, slideshow, comparison; left panel for VR, AR, voice, AI features. See README.md.

index.html – main gallery and lightbox
style.css and advanced-styles.css: design tokens
Voice: "Next image", "Zoom in", "Close", "Play slideshow"
Author: RSK World | rskworld.in

Project Features

Core lightbox with zoom, pan, navigation, keyboard; AI tagging (AITagManager); VR/AR modes; voice control; face/emotion (simulated); color palette; slideshow and comparison; multiple themes; search, filters, analytics, social sharing. All vanilla JS, no frameworks.

Core: zoom, pan, prev/next, keyboard, touch
Advanced: AI tags, themes, slideshow, compare, search
Ultra: VR, AR, voice, face, emotion, color, enhance
Vanilla JS, responsive, mobile-first

Credits & Acknowledgments

Image Lightbox Gallery by RSK World. Interactive image viewer with zoom, AI tags, VR/AR, voice control and advanced features for learning front-end and vanilla JS.