Skip to content

HTMLGuyLLC/jAlert

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Join the chat at https://gitter.im/jAlert/Lobby License Build npm

jAlert - The Ultimate jQuery Modal & Lightbox Plugin

๐Ÿš€ Version 5.0.5 - Enhanced Stability! A powerful, lightweight jQuery plugin for creating stunning modals, popups, lightboxes, and image slideshows. Perfect for modern web applications that need beautiful, accessible, and responsive dialogs.

โœจ 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.

โšก Lightning Fast - Lightweight and optimized for performance. No bloat, just pure functionality.

๐ŸŽจ 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.

๐Ÿ”„ Backward Compatible - Upgrading from older versions? Your existing code will work without changes.

๐ŸŽฏ When to Use jAlert

  • Simple Modal Needs - Quick alerts, confirmations, or information dialogs
  • Image 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

๐Ÿš€ Quick Start

Installation

npm install jalert

Basic Usage

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

<!-- Include jAlert -->
<link rel="stylesheet" href="node_modules/jalert/dist/jAlert.min.css">
<script src="node_modules/jalert/dist/jAlert.min.js"></script>
// Simple alert
$.jAlert({
    title: 'Success!',
    content: 'Your action was completed successfully.',
    theme: 'green'
});

// Image lightbox
$.jAlert({
    image: 'path/to/image.jpg',
    title: 'Beautiful Image'
});

// Slideshow gallery
$.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

12 built-in themes: default, green, red, blue, yellow, brown, gray, black, and dark variants.

โŒจ๏ธ 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 (Chrome 60+, Firefox 55+, Safari 12+, Edge 79+, IE11+)

๐Ÿ› ๏ธ Development

Setup

git clone https://github.com/HTMLGuyLLC/jAlert.git
cd jAlert
npm install

Build & Test

# Build commands
npm run build      # Production build (minified)
npm run dev        # Development build with watch mode

# Test commands
npm test           # Run unit tests only (fastest)
npm run test:unit  # Run unit tests only (alias)
npm run test:e2e   # Run end-to-end tests with Puppeteer
npm run test:all   # Run unit + e2e tests (full test suite)npm

๐Ÿ“‹ 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:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests
  5. 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