Interactive Image Gallery

Features

• Interactive image gallery with zoom lens effect
• Touch and mouse swipe navigation
• Slideshow mode
• Fullscreen toggle
• Keyboard navigation support
• Dynamic image height adjustment
• Touch and mouse lens zoom
• Fullscreen image viewer
• Responsive grid layout
• Debug mode with real-time testing

Live Preview

imagegallery.ianmaloba.com

Technologies Used

• Vanilla JavaScript
• HTML5
• CSS3

Key Functionality

Gallery View

• Hover or touch images to activate zoom lens
• Click on any image to open fullscreen view
• Responsive grid layout that adapts to screen size
• Dynamic image height adjustment based on aspect ratio

Fullscreen Mode

• Navigate images using:
  • Next/Previous buttons (fixed position on screen edges)
  • Keyboard arrow keys
  • Touch swipe gestures
• Toggle slideshow mode with adjustable speed
• Activate ultimate fullscreen
• Customizable image display (contain/fill modes)

Settings Panel

• Slideshow speed adjustment
• Image fill/contain toggle
• Theme toggle (dark/light)
• Grid size customization (small/medium/large)

Debug Mode

• Press Ctrl+Shift+D or click Debug button to activate
• Real-time testing of layout changes
• Navigation button position fixing
• Grid size instant switching
• Image fill/contain testing
• Detailed console logging

Keyboard Shortcuts

• → (Right Arrow): Next image
• ← (Left Arrow): Previous image
• Space: Toggle slideshow
• F: Toggle fullscreen mode
• Esc: Close fullscreen / Exit ultimate fullscreen
• Ctrl+Shift+D: Toggle debug mode

Browser Compatibility

• Works on all modern browsers
• Responsive design for mobile and desktop
• Touch-optimized for mobile devices
• Keyboard accessible for desktop users

Performance Optimizations

• Lazy loading of images
• Throttled resize handlers
• Efficient DOM manipulation
• Optimized animations and transitions

Accessibility Features

• Keyboard navigation support
• ARIA labels for screen readers
• Focus management for keyboard users
• High contrast options in light/dark themes