Feature-rich Modal Popup Plugin - jQuery Showcase

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" 
<!-- 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.

  // 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,
  // image RegExp used to check for image content
  imageRegExp: /\.bmp|\.gif|\.jpe|\.jpeg|\.jpg|\.png|\.svg|\.tif|\.tiff|\.wbmp$/,
  // 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.
// gets the current Showcase error
// gets the Showcase container
// gets the current Showcase content 
// enables the Showcase
// disables the Showcase
// resizes the Showcase content
Showcase.resize(width, height, animate, callback)
// navigate to the next or previous Showcase element.

6. Available event handlers.

  • enable
  • disable
  • resize
  • navigate
Showcase.on(event, data, handler)
Showcase.off(event, handler)

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

  • Publication date: 12.05.2018
  • Source