Feature-rich Modal Popup Plugin - jQuery Showcase

Showcase is a responsive, powerful jQuery modal popup plugin to showcase any content (e.g. images, videos, text, ajax content) in an elegant way.

More features:

• Keyboard navigation.
• Light & dark themes.
• Auto scales images and videos while maintaining the aspet ratio.
• Fade in and Fade out animations.
• Loading indicator.
• Responsive design based on CSS flexbox.
• Useful Callbacks, Methods & Events.
• Also can be used to create custom alert/confirm/prompt dialogs.

Basic usage:

1. To get started, load jQuery library and the Showcase plugin in your html document.

<!-- Light theme -->
<link href="css/jquery.showcase.light.css" rel="stylesheet">
<!-- Dark theme -->
<link href="css/jquery.showcase.light.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<!-- Main JavaScript -->
<script src="jquery.showcase.js"></script>

2. Call the function on any jQuery object to create a modal window.

$('element').showcase(options, callback);

3. All possible options to customize the modal window.

$('element').showcase({

  // width/height
  width: 'auto',
  height: 'auto',

  // current index
  currentIndex: 0,

  // html string or jQuery object to place in the info box
  infoContent: null,

  // auto scales images and videos while maintaining the apset ratio.
  scaleMedia: true,

  // force scaling
  forceScaling: false,

  // animate in elements
  animate: true,

  // enable fade in and fade out animations
  fade: true,

  // If data and events should be copied from the element to the Showcase clone
  cloneData: false,

  // the amount of seconds before the Showcase closes automatically (0 to disable)
  expire: 0,

  // image RegExp used to check for image content
  imageRegExp: /\.bmp|\.gif|\.jpe|\.jpeg|\.jpg|\.png|\.svg|\.tif|\.tiff|\.wbmp$/,

  // the video RegExp used to check for video content in links
  videoRegExp: /\.mp4|\.ogg|\.webm$/,

  // text for controls
  controlText: {
    close: 'Close',
    navLeft: 'Navigate Left',
    navRight: 'Navigate Right',
  },

  // the Promise to fulfill before loading the content
  promise: null

}, function(){
   // do something
});

4. If you want to create custom alert/confirm/prompt dialogs to replace the native JavaScript popup boxes:

// alert popup
Showcase.alert(message, button, callback)

// alert popup
Showcase.confirm(message, buttons, callback)

// alert popup
Showcase.prompt(message, button, input, callback)

5. API methods.

// checks if the Showcase is busy loading content.
Showcase.busy()

// gets the current Showcase error
Showcase.error()

// gets the Showcase container
Showcase.container()

// gets the current Showcase content 
Showcase.content()

// enables the Showcase
Showcase.enable(callback)

// disables the Showcase
Showcase.disable(callback)

// resizes the Showcase content
Showcase.resize(width, height, animate, callback)

// navigate to the next or previous Showcase element.
Showcase.navigate('left')
Showcase.navigate('right')

6. Available event handlers.

• enable
• disable
• resize
• navigate

Showcase.on(event, data, handler)
Showcase.off(event, handler)

Change log:

2018-05-19

• Added expire option to close the Showcase automatically.
• Changed result from popup to null if Showcase was closed.

2018-05-18

• Fixed small viewport with auto height and removed empty symbol element

2018-05-14

• CSS Update

---

This awesome jQuery plugin is developed by AdventCoding. For more Advanced Usages, please check the demo page or visit the official website.