Joomla!LABS Image Comparison Slider Module 2.0.1

Joomla!LABS Image Comparison Slider Module Version 2.0.1

🐛 Bug Fixes & Improvements

This is a maintenance release that fixes asset loading issues and improves code quality.

✨ What's New

🐛 Critical Fixes

• ✅ Asset Loading Fixed - CSS and JavaScript now load correctly in frontend
  • Resolved Web Asset Manager registration issues
  • Fixed missing parameters in registerStyle() and registerScript() methods
  • Corrected ES6 module type attribute

🎨 Code Quality Improvements

• Optimized Template Structure - Cleaner, more maintainable HTML

  • Improved indentation and formatting
  • Alternative PHP syntax for better readability
  • Removed unnecessary whitespace

• Enhanced CSS - Better slider handle display

  • Fixed icon centering with flexbox
  • Removed duplicate declarations
  • Consolidated styles

🔒 Security Enhancements

• XSS Protection - Added htmlspecialchars() to all image URL attributes for consistent security

---

🔧 Changes in Detail

Asset Loading Fix

Problem: CSS and JavaScript files were not loading in frontend due to incomplete Web Asset Manager registration.

Solution: Updated registration methods with proper parameter signatures:

// Before (missing parameters)
$wa->registerStyle('imagecomparisonslider.style', 'media/.../css/imagecomparisonslider.css');

// After (complete parameters)
$wa->registerStyle('imagecomparisonslider.style', 'media/.../css/imagecomparisonslider.css', [], []);
$wa->registerScript('imagecomparisonslider.script', 'media/.../js/imagecomparisonslider.js', [], ['type' => 'module'], []);

Template Improvements

Changes:

• Cleaner HTML with proper indentation
• Alternative PHP syntax (if: / endif;) for conditionals
• Removed spaces around = in attributes (class="..." instead of class = "...")
• Added htmlspecialchars() to image src attributes
• Consistent use of loading="lazy" for images

CSS Optimization

Fixed: Icon not centered in handle button

Solution: Proper flexbox implementation with consolidated properties

---

📋 Requirements

Software	Version
Joomla!	4.x, 5.x, 6.0+
PHP	8.1+
Browser	Modern browsers (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)

---

📥 Installation

1. Download the package: mod_joomlalabs_imagecomparisonslider_module_v2.0.1_j4_j5_j6.zip
2. In Joomla Administrator: System → Extensions → Install
3. Upload the downloaded package
4. Module will update automatically

---

🆙 Upgrading from v2.0.0

This is a seamless upgrade with no breaking changes:

1. ✅ Direct upgrade: Simply install the new package over v2.0.0
2. ✅ Settings preserved: All module configurations remain unchanged
3. ✅ No manual steps: Fully automated update process

---

📝 Full Changelog

Full Changelog: v2.0.0...v2.0.1

---

🙏 Credits

Original concept by CodyHouse
Modernized for Joomla 6+ by Joomla!LABS

---

💝 Support This Project

If you find this module useful, consider supporting its development:

---

Made with ❤️ for the Joomla! Community

⭐ If this project helped you, please give it a star! ⭐

Joomla!LABS Image Comparison Slider Module 2.0.0

🎉 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

Joomla!LABS Image Comparison Slider Module 1.2.0

Joomla!LABS Image Comparison Slider Module Version 1.2.0
➕ Add SVG image for the handle

Joomla!LABS Image Comparison Slider Module 1.1.1

Joomla!LABS Image Comparison Slider Module Version 1.1.1
✔️ fix css for having full width image

Joomla!LABS Image Comparison Slider Module 1.1.0

Joomla!LABS Image Comparison Slider Module Version 1.1.0
✔️ correct JS and CSS inclusion
✔️ fix image label on administrator

Joomla!LABS Image Comparison Slider Module 1.0.0

Joomla!LABS Image Comparison Slider Module Version 1.0.0