
jAlert - The Ultimate jQuery Modal & Lightbox Plugin
โจ Why Choose jAlert?
๐ฏ Perfect for jQuery Sites - If you're already using jQuery, jAlert integrates seamlessly without adding bulky dependencies. No need to learn new frameworks or rewrite existing code.
โก Zero Config - Include JS/CSS and add a modal immediately, no complicated setup.
๐จ Beautiful by Default - 12 built-in themes with smooth animations. Your modals will look professional out of the box.
๐ฑ Responsive Design - Works perfectly on desktop, tablet, and mobile with touch-friendly controls and swipe gestures.
โฟ Basic Accessibility - Keyboard navigation, screen reader support, and ARIA attributes for better usability.
๐ฏ When to Use jAlert
- Simple Modal Needs - Quick alerts, confirmations, or information dialogs
- Image & Video Galleries - Lightbox slideshows with navigation controls
- Content Previews - Show videos, iframes, or AJAX content in modals
- Form Dialogs - Login forms, contact forms, or any interactive content
- jQuery Projects - Perfect addition to existing jQuery-based websites
- Quick Prototypes - Get beautiful modals running in minutes, not hours
Browser Compatibility
Minimum browser versions that should fully support this plugin:
- Chrome: 30+
- Firefox: 28+
- Safari: 7+
- Edge: 12+
- Opera: 17+
- Internet Explorer: 11 (with jQuery polyfills, but MutationObserver support is limited)
Note: IE10 and below are not fully supported due to missing ES5 features and MutationObserver.
๐ Quick Start
Installation
npm install jalert
Basic Usage
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link rel="stylesheet" href="node_modules/jalert/dist/jAlert.min.css">
<script src="node_modules/jalert/dist/jAlert.min.js"></script>
$.jAlert({
title: 'Success!',
content: 'Your action was completed successfully.',
theme: 'green'
});
$.jAlert({
image: 'path/to/image.jpg',
});
$.jAlert({
video: 'https://embed.youtube.com/my-video',
});
$.jAlert({
slideshow: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
slideshowOptions: {
autoAdvance: true,
showArrows: true,
showCounter: 'dots'
}
});
๐จ Key Features
๐ฑ Responsive & Mobile-Friendly
- Works perfectly on desktop, tablet, and mobile
- Touch-friendly controls and gestures
- Adaptive sizing for different screen sizes
๐ผ๏ธ Rich Media Support
- Images - Lightbox with zoom and navigation
- Videos - YouTube, Vimeo, and direct video files
- Slideshows - Multi-image galleries with controls
- Iframes - Embed any web content
- AJAX - Load dynamic content
๐ญ Beautiful Themes
14 built-in themes: default
, green
, red
, blue
, yellow
, orange
, brown
, gray
, black
, and dark variants (dark_green
, dark_red
, dark_blue
, dark_gray
, dark_orange
).
โจ๏ธ Keyboard & Accessibility
- Full keyboard navigation (ESC, arrow keys)
- Basic screen reader support with ARIA attributes
- Focus management and semantic HTML
- Touch-friendly controls with swipe gestures
โ๏ธ Flexible Configuration
- Custom sizes and positioning
- Animation controls
- Auto-advance slideshows
- Loop and navigation options
๐ Documentation & Examples
๐ฎ Live Demo: View Interactive Examples
๐ Full Documentation: Complete API Reference
๐ Changelog: Version History
โฌ๏ธ Upgrade Guide: Migration Instructions
๐ง Requirements
- jQuery 3.7.0+ (peer dependency)
- Modern browsers (see browser compatibility below)
๐ ๏ธ Development
Setup
git clone https://github.com/HTMLGuyLLC/jAlert.git
cd jAlert
npm install
Build & Test
npm run build
npm run dev
npm test
npm run test:unit
npm run test:e2e
npm run test:all
๐ Test Coverage:
- Unit Tests: Core functionality, slideshow features, and API methods
- E2E Tests: Real browser testing with Puppeteer for user interactions
- Visual Regression: Screenshot comparison testing for UI consistency
๐งช Test Requirements:
- E2E tests require Chrome/Chromium browser
- Visual tests may skip if browser dependencies are unavailable
- All tests work in CI/CD environments with
--no-sandbox
flag
๐ค Contributing
We welcome contributions! See our Contributing Guide for details.
Quick Start:
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests
- Submit a pull request
๐ License
MIT License - see LICENSE file for details.
๐ Support
โ Support the Project
If jAlert has been helpful to you, consider buying me a coffee! Your support helps maintain and improve this project.
โ Buy me a coffee
Made with โค๏ธ by HTMLGuy, LLC
[6.0.0] - 2025-07-03
๐ Major Release - Complete Feature Overhaul
jAlert 6.0.0 represents a massive expansion with a complete slideshow system, enhanced video support, and comprehensive media handling capabilities. This release introduces significant new features while maintaining backward compatibility where possible.
โจ New Features
-
๐ Complete Slideshow System: Revolutionary slideshow functionality with advanced features
- Image Navigation: Next/previous arrows, dot navigation, and number counters
- Video Support: HTML5 videos and YouTube/Vimeo iframes within slideshows
- Thumbnail Navigation: Drag-scrollable thumbnails with top/bottom positioning
- Auto-advance: Configurable intervals with pause-on-hover functionality
- Keyboard Navigation: Arrow key support with proper event cleanup
- Responsive Sizing: Contain and cover modes for optimal image display
- Advanced Callbacks:
onSlideChange
, onBeforeSlideChange
, onSlideshowEnd
, onSlideshowLoop
, onContentLoad
- Loop Control: Configurable looping with end-of-slideshow detection
- Preloading: Background image preloading for faster navigation
- Touch Support: Swipe gestures and touch-friendly controls for mobile devices
-
๐ฅ Enhanced Video Support: Comprehensive HTML5 video and iframe handling
- HTML5 Video: Full support for all video attributes (controls, autoplay, loop, mute, etc.)
- Responsive Containers: Proper aspect ratio handling with fallback defaults
- Video Configuration: Direct video object properties for complete video configuration
- Error Handling: Robust loading and error states with graceful fallbacks
- Utility Functions:
createHTML5Video()
, createVideoContainer()
, setupVideoEventHandlers()
- YouTube/Vimeo: Enhanced iframe support with responsive containers
-
๐ผ๏ธ Improved Media Handling: Enhanced image and iframe support
- Auto-sizing: Intelligent sizing for images, videos, and slideshows
- Responsive Design: Better mobile and tablet support
- Error States: Improved error handling and user feedback
- Loader Positioning: Better loading indicators and positioning
๐ง Technical Improvements
- Performance: Optimized slideshow rendering and video loading
- Memory Management: Comprehensive event cleanup and timer management
- Error Handling: Robust validation and fallback mechanisms
- Accessibility: Enhanced ARIA attributes and keyboard navigation
- Mobile Support: Touch-friendly controls and responsive layouts
๐ Bug Fixes
- Button Alias: Fixed missing
buttons
alias for btns
option - now both buttons
and btns
work identically
- Added proper alias handling so
buttons: [...]
gets converted to btns: [...]
internally
- Updated unit tests to verify alias functionality works correctly
- Responsive Video: Fixed extreme aspect ratio issues (450% padding-bottom)
- Event Cleanup: Proper cleanup of slideshow timers and event handlers
- Theme Validation: Invalid themes now return 'default' instead of false
- Size Defaults: Media modals now default to 'auto' size for better UX
- Memory Leaks: Comprehensive cleanup of MutationObserver and event listeners
- Button Sizing: Enlarged buttons on all screen sizes for better touch interaction (8px 14px padding on desktop, 8px 10px on mobile)
๐ Documentation
- Comprehensive API Documentation: Complete slideshow and video API reference
- Interactive Demos: 16 comprehensive demo sections with 200+ examples
- Test Coverage: 205 unit tests, 153 E2E tests, and visual regression tests
- Migration Guide: Detailed upgrade instructions for existing users
๐ Breaking Changes
- Default Size Behavior: Media modals (images, videos, slideshows) now default to
size: 'auto'
- Theme Validation: Invalid themes now return
'default'
instead of false
- Slideshow API: New slideshow system with different options structure
- Video API: Direct video object properties for HTML5 video configuration
- Default Padding Behavior: All modals now default to
noPadContent: true
(no padding around content)
Added
- Video modals and slideshows now support an optional
embedType
property ('iframe'
for YouTube/Vimeo, 'html5'
for direct video files). If not set, jAlert will auto-detect based on the video URL. If you set the wrong type, it will use what you specify.
โจ New Features
- New Orange and Dark Orange Themes: Added
orange
(bright, readable on light backgrounds) and dark_orange
(deep orange, white text) themes for alerts and buttons. The warningAlert
shortcut now uses the orange theme by default. If you want the old yellow warning, use theme: 'yellow'
.