Skip to content

jAlert 5.0.0 - Complete Modernization

Choose a tag to compare

View all tags
@HTMLGuyLLC HTMLGuyLLC released this 26 Jun 23:20
· 28 commits to master since this release
v5.0.0
5479f54

🚀 jAlert 5.0.0 - Complete Modernization

🎉 Major Release - 100% Backward Compatible

jAlert has been completely rewritten with modern development practices while maintaining full API compatibility. This release brings significant improvements in performance, browser support, and features.

✨ What's New

🎠 Lightbox Slideshow Feature

  • Next/Previous Navigation: Arrow controls for easy browsing
  • Dot Navigation: Visual indicators for slide position
  • Number Counter: Alternative to dots showing "1 / 5"
  • Auto-Advance: Automatic slide progression with configurable timing
  • Keyboard Controls: Arrow key navigation
  • Pause on Hover: Stop auto-advance when hovering
  • Loop Option: Restart slideshow at the end
  • Smart Sizing: Fit current image or fit largest across all slides
  • Caption Support: Display text overlays on slides
  • Responsive Design: Adapts to viewport size

🔧 Modern Build System

  • Webpack 5: Efficient bundling and optimization
  • Babel Transpilation: ES5 output for maximum browser compatibility
  • PostCSS: Modern CSS processing with Autoprefixer
  • Source Maps: Better debugging experience
  • Optimized Production Builds: Smaller, faster files

🧪 Comprehensive Testing

  • Unit Tests: Jest-based test suite
  • End-to-End Tests: Puppeteer for browser testing
  • Visual Regression: Automated visual testing
  • Quality Assurance: Automated testing pipeline

🔧 Technical Improvements

  • Performance: Optimized bundle size and loading speed
  • Accessibility: Enhanced keyboard navigation and screen reader support
  • Mobile Support: Improved responsive design and touch interactions
  • Error Handling: Better validation and user-friendly error messages
  • Code Organization: Modular architecture for improved maintainability

🐛 Bug Fixes

  • Fixed slideshow options not being properly merged with defaults
  • Fixed loader persistence issues in slideshows
  • Fixed fitLargest sizing to respect viewport dimensions
  • Fixed legacy file references and cleanup
  • Fixed demo and asset organization

📦 Dependency Updates

  • jQuery: Updated to 3.7.0+ (now a peer dependency)
  • Build Tools: Modernized to latest stable versions
  • Browser Support: ES5 compatible for maximum compatibility

🔄 Breaking Changes

None! This release maintains 100% backward compatibility with all existing APIs.

📋 Quick Upgrade Guide

For Existing Users

No code changes required! Your existing code will work immediately.

  1. Update files:

    npm install jalert@5.0.0
# Or download manually from this release

  2. Update HTML references (if needed):

    <!-- Old -->
<script src="src/jAlert.min.js"></script>

<!-- New -->
<script src="dist/jAlert.min.js"></script>

  3. Ensure jQuery 3.7.0+:

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

For New Users

npm install jalert
<link rel="stylesheet" href="node_modules/jalert/dist/jAlert.min.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="node_modules/jalert/dist/jAlert.min.js"></script>
$.jAlert({
    title: 'Hello World',
    content: 'Welcome to jAlert 5.0!'
});

🎯 New Slideshow Examples

Basic Slideshow

$.jAlert({
    slideshow: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
    slideshowOptions: {
        showArrows: true,
        showCounter: 'dots'
    }
});

Advanced Slideshow

$.jAlert({
    slideshow: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
    slideshowOptions: {
        autoAdvance: true,
        autoAdvanceInterval: 3000,
        showArrows: true,
        showCounter: 'numbers',
        keyboardNav: true,
        loop: true,
        pauseOnHover: true,
        resizeMode: 'fitLargest'
    }
});

🌐 Browser Compatibility

  • IE11+ (ES5 compatible)
  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

📚 Documentation

🛠️ Development

  • Modern development workflow with npm scripts
  • Automated testing and quality assurance
  • Source maps for debugging
  • Optimized build process

📁 File Structure

jAlert/
├── src/          # Source files (development)
├── dist/         # Distribution files (production)
│   ├── jAlert.min.js
│   ├── jAlert.min.css
│   └── jAlert-functions.min.js
├── tests/        # Test suite
└── docs/         # Documentation

🎉 What's Next?

After upgrading, explore:

  • The new slideshow feature for image galleries
  • Enhanced documentation and examples
  • Modern development workflow
  • Contribution opportunities

📞 Support

Happy coding! 🚀

Previous Versions

For older versions, see the releases page.

Assets 2
Loading