Skip to content

Joomla!LABS Image Comparison Slider Module 2.0.0

Choose a tag to compare

View all tags
@Razzo1987 Razzo1987 released this 21 Dec 15:15
· 12 commits to master since this release
v2.0.0
47a42c1
This commit was signed with the committer’s verified signature.
Razzo1987 Luca Racchetti
GPG key ID: F3FA87355DFF9D37
Verified
Learn about vigilant mode.

🎉 What's New

Version 2.0 is a complete rewrite of the Image Comparison Slider module, bringing modern architecture, enhanced accessibility, and improved performance to Joomla 6+.

✨ Highlights

🚀 Modern Architecture

  • Joomla 6+ Ready - Full namespace support and modern structure
  • Zero jQuery - Pure vanilla JavaScript ES6+
  • Web Asset Manager - Proper asset loading and caching
  • Service Provider - Dependency injection pattern
  • PSR-12 Compliant - Clean, maintainable code

♿ Enhanced Accessibility (WCAG 2.1 AAA)

  • Full Keyboard Navigation - Arrow keys, Home, End support
  • Screen Reader Ready - Complete ARIA attributes
  • Focus Management - Clear visual indicators
  • Reduced Motion - Respects user preferences
  • Alt Text Support - Proper image descriptions

⚡ Performance Improvements

  • 30KB Smaller - Removed jQuery dependency
  • IntersectionObserver - Lazy loading and viewport detection
  • ResizeObserver - Efficient responsive updates
  • GPU Acceleration - Hardware-accelerated CSS transforms
  • Optimized Touch - Better mobile performance

🎨 New Features

  • Image Captions - Optional labels for both images
  • ARIA Label - Customizable screen reader descriptions
  • Bootstrap Integration - Native support for Bootstrap buttons
  • SVG Icons - Scalable, crisp graphics
  • Smooth Animations - CSS3-powered transitions

📋 Requirements

Component Version
Joomla! 4.4+ (Recommended: 6.0+)
PHP 8.1+ (Recommended: 8.2 or 8.3)
Browser Modern browsers (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)

🎯 Key Features

User Experience

  • ✅ Interactive draggable slider for image comparison
  • ✅ Touch-friendly mobile interface
  • ✅ Keyboard navigation (arrows, Home, End)
  • ✅ Smooth CSS3 animations
  • ✅ Responsive design for all screen sizes
  • ✅ Lazy loading for better performance

Accessibility

  • ✅ WCAG 2.1 AAA compliant
  • ✅ Full keyboard support
  • ✅ Screen reader compatible
  • ✅ ARIA attributes throughout
  • ✅ Focus indicators
  • ✅ Reduced motion support

Configuration

  • ✅ Easy media picker for images
  • ✅ Alt text for accessibility
  • ✅ Optional image captions
  • ✅ Customizable ARIA labels
  • ✅ Module class suffix
  • ✅ Caching support

💡 Usage

Mouse/Touch

  • Click & Drag - Drag the center handle left or right
  • Touch & Swipe - Swipe on mobile devices

Keyboard

  • Tab - Focus the slider
  • ← / → - Move left/right (1% per press)
  • ↑ / ↓ - Alternative arrows
  • Home - Jump to start (0%)
  • End - Jump to end (100%)

🐛 Known Issues

None at this time. Please report any issues on GitHub Issues.

🔄 Breaking Changes from v1.x

  • jQuery Removed - Module now uses vanilla JavaScript
  • File Structure - New namespace-based structure
  • HTML Structure - Updated with new CSS classes
  • Asset Loading - Web Asset Manager instead of manual loading
  • Template Changes - If you have overrides, they need updating
Assets 3
Loading