Powerful jQuery Modal & Lightbox Plugin

$.jAlert({
  title: 'Success!',
  content: 'Green theme example',
  theme: 'green'
});

$.jAlert({
  title: 'Warning!',
  content: 'Orange theme example',
  theme: 'orange'
});

$.jAlert({
  title: 'Info',
  content: 'Dark blue theme example',
  theme: 'dark_blue'
});

$.jAlert({
  title: 'Alert!',
  content: 'Dark orange theme example',
  theme: 'dark_orange'
});

$.jAlert({
  title: 'Small',
  content: 'This is a small modal',
  size: 'sm'
});

$.jAlert({
  title: 'Large',
  content: 'This is a large modal with more space',
  size: 'lg'
});

$.jAlert({
  title: 'Full Screen',
  content: 'This modal takes up the full screen',
  size: 'full'
});

$.jAlert({
  title: 'Auto Size',
  content: 'This modal automatically sizes to content',
  size: 'auto'
});

$.jAlert({
  title: 'Single Button',
  content: 'This alert has one custom button',
  btns: {
    text: 'Got It!',
    theme: 'green',
    onClick: function() {
      alert('Button clicked!');
    }
  }
});

$.jAlert({
  title: 'Multiple Buttons',
  content: 'Choose an action:',
  btns: [
    {text: 'Save', theme: 'green'},
    {text: 'Cancel', theme: 'red'},
    {text: 'Help', theme: 'blue'}
  ]
});

$.jAlert({
  type: 'confirm',
  confirmQuestion: 'Are you sure you want to delete this item?',
  confirmBtnText: 'Delete',
  denyBtnText: 'Keep',
  onConfirm: function() {
    alert('Item deleted!');
  },
  onDeny: function() {
    alert('Item kept safe.');
  }
});

$.jAlert({
  title: 'Bootstrap Styled Buttons',
  content: 'Buttons with Bootstrap CSS classes',
  btns: [
    {
      text: 'Large Outline',
      class: 'btn btn-outline-primary btn-lg'
      // No theme needed - custom classes override
    },
    {
      text: 'Small Outline',
      class: 'btn btn-outline-success btn-sm'
    },
    {
      text: 'Rounded Pill',
      class: 'btn btn-outline-warning rounded-pill'
    }
  ]
});

$.jAlert({
  title: 'Action Buttons',
  content: 'Each button has a different action',
  btns: [
    {
      text: 'Show Alert',
      theme: 'green',
      onClick: function() {
        alert('Another alert!');
      }
    },
    {
      text: 'Log Info',
      theme: 'secondary',
      onClick: function(e, btn) {
        console.log('Info button clicked', btn);
      }
    }
  ]
});

$.jAlert({
  title: 'Persistent Modal',
  content: 'Some buttons don\'t close the modal',
  btns: [
    {
      text: 'Stay Open',
      theme: 'blue',
      closeAlert: false,
      onClick: function() {
        alert('Modal stays open!');
      }
    },
    {
      text: 'Close Modal',
      theme: 'red',
      closeAlert: true
    }
  ]
});

$.jAlert({
  image: 'https://picsum.photos/600/400?random=1'
});

$.jAlert({
  video: 'https://www.youtube.com/embed/dQw4w9WgXcQ'
});

$.jAlert({
  iframe: 'https://example.com',
  size: 'lg'
});

$.jAlert({
  video: {
    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4',
    controls: true
  }
});

$.jAlert({
  slideshow: [
    'https://picsum.photos/600/400?random=1',
    'https://picsum.photos/600/400?random=2',
    'https://picsum.photos/600/400?random=3'
  ]
});

$.jAlert({
  slideshow: [
    {src: 'https://picsum.photos/600/400?random=4', caption: 'First image'},
    {src: 'https://picsum.photos/600/400?random=5', caption: 'Second image'}
  ]
});

$.jAlert({
  slideshow: [
    'https://picsum.photos/600/400?random=6',
    'https://picsum.photos/600/400?random=7'
  ],
  slideshowOptions: {
    autoAdvance: true,
    interval: 2000
  }
});

$.jAlert({
  slideshow: [
    'https://picsum.photos/600/400?random=8',
    {src: 'https://www.youtube.com/embed/dQw4w9WgXcQ', type: 'video'},
    'https://picsum.photos/600/400?random=9'
  ]
});

$.jAlert({
  slideshow: [
    {src: 'https://picsum.photos/800/600?random=201', thumbnail: 'https://picsum.photos/150/100?random=301', caption: 'Beautiful landscape'},
    {src: 'https://picsum.photos/600/800?random=202', thumbnail: 'https://picsum.photos/150/100?random=302', caption: 'Portrait orientation'},
    {src: 'https://picsum.photos/900/500?random=203', thumbnail: 'https://picsum.photos/150/100?random=303', caption: 'Wide panoramic view'}
  ],
  slideshowOptions: {
    showThumbnails: true,
    showArrows: true,
    showCounter: 'numbers'
  }
});

$.jAlert({
  slideshow: [
    {src: 'https://picsum.photos/400/300?random=401', caption: 'Small image (400x300) - cropped to fill'},
    {src: 'https://picsum.photos/1200/800?random=402', caption: 'Large image (1200x800) - cropped to fit'},
    {src: 'https://picsum.photos/300/600?random=403', caption: 'Tall image (300x600) - cropped to fill'}
  ],
  size: 'lg',
  slideshowOptions: {
    imageSize: 'cover',
    showArrows: true,
    showCounter: 'dots'
  }
});

$.jAlert({
  type: 'confirm',
  title: 'Delete Item',
  content: 'Are you sure you want to delete this item?',
  onConfirm: function() {
    console.log('Confirmed!');
  },
  onDeny: function() {
    console.log('Denied!');
  }
});

$.jAlert({
  title: 'Animated',
  content: 'This modal has custom animations',
  showAnimation: 'bounceIn',
  hideAnimation: 'bounceOut'
});

$.jAlert({
  ajax: 'https://httpbin.org/html',
  size: 'lg'
});

$.jAlert({
  title: 'Events',
  content: 'Check console for events',
  onOpen: function() {
    console.log('Modal opened');
  },
  onClose: function() {
    console.log('Modal closed');
  }
});