jqshowcase

jQuery Showcase

The jQuery Showcase Plugin makes it easy to display content in a modal window. The plugin attempts to intelligently guess the type of content that will be displayed by looking for images, media, links, or other general HTML content.

Requires jQuery 3.0+

Important: This Plugin uses features that are not supported by any Internet Explorer version.

Example

See the example.html file for more details.

Codepen Example

API

We can call the Showcase plugin on any jQuery object. See the example.html file for more information.

$('selector').showcase();
// OR
$('selector').showcase(callback);
// OR
$('selector').showcase(options, callback);

• options : The options for the Showcase instance
• callback : A callback function to execute on completion. The 'this' keyword in the callback function refers to the window.Showcase object.

To control the Showcase, call one of the methods on the global Showcase object:

Showcase.disable();

Options

Key	Description	Default
width	The numerical width for the Showcase or 'auto'	'auto'
height	The numerical height for the Showcase or 'auto'	'auto'
currentIndex	The current index if showcasing a jQuery collection	0
infoContent	The html string or jQuery object to place in the info box (See note below)	null
scaleMedia	If <img> and <video> elements should be scaled based on aspect ratio	true
animate	If the Showcase elements should animate in	true
fade	If the Showcase elements should fade in and out	true
cloneData	If data and events should be copied from the target element to the cloned element	false
expire	The amount of seconds before the Showcase closes automatically (0 to disable)	0
imageRegExp	The image RegExp used to check for image content in links	(See imageRegExp variable below)
videoRegExp	The video RegExp used to check for video content in links	(See videoRegExp variable below)
controlText	The title texts for the navigation elements	(See controlText variable below)
promise	The Promise to fulfill before loading the content (if the Promise is rejected with a string, that string will be Showcased)	null

let imageRegExp = /\.bmp|\.gif|\.jpe|\.jpeg|\.jpg|\.png|\.svg|\.tif|\.tiff|\.wbmp$/;
let videoRegExp = /\.mp4|\.ogg|\.webm$/;
let controlText = {
  close: 'Close',
  navLeft: 'Navigate Left',
  navRight: 'Navigate Right',
},

infoContent Option: The Showcase plugin uses the Info Box to display information about the content within the Showcase window. By using a string of plain text or HTML, or a jQuery object, in the infoContent option, the Info Box will display that data. Alternatively, each element used with the jQuery showcase method can contain the 'showcaseInfo' property, either set with the jQuery data method or inline (e.g <img data-showcase-info="Image Description">).

Methods & Properties

These methods and properties are accessed from the Showcase instance on the window object (e.g. window.Showcase.container), or from within a callback (e.g. this.disable()). All methods will return the global Showcase object.

.busy

If the Showcase Plugin is busy loading content.

.error

Get the current Showcase error string if there is one.

.container

Get the Showcase Container jQuery object.

.content

Get the current Showcase content jQuery object.

.setDefaults(options)

Set the default Showcase options

• options {Object} : The default options

.resetDefaults()

Reset the default Showcase options

.enable(callback)

Enable the Showcase if disabled. This method will leave all the Showcase content intact.

• callback {Function} : A callback function to execute after the Showcase is loaded

.disable(callback)

Disable the Showcase if enabled.

• callback {Function} : A callback function to execute after the Showcase is unloaded

.resize(width, height, animate, callback)

Resize the main Showcase content area.

• width {number} : The width to resize to
• height {number} : The height to resize to
• animate {bool} : If the content should animate to the new size
• callback {Function} : The callback to execute after the resize

.navigate(direction)

Navigate to the next or previous Showcase element.

• direction {string} : 'left' or 'right'

.on(event, handler)

.on(event, data, handler)

Add an event listener to the Showcase.

• event {string} : 'enable', 'disable', 'resize', 'navigate', or 'error'
• data {any} : Optional data to be passed to the handler
• handler {Function} : A handler for the event trigger

The handler receives the jQuery.Event object with the .data property that contains the data argument that was passed in the Showcase.on() method call

.off(event, handler)

Remove an event listener from the Showcase

• event {string} : 'enable', 'disable', 'resize', or 'navigate' (omit to clear all events)
• handler {Function} : The handler used in the Showcase.on method call (omit to clear all handlers)

.alert(message, callback)

.alert(message, button, callback)

Display an alert Popup

• message {string} : The message to display
• button {string} : The text for the alert button (null to disable)
• callback {Function} : The callback to execute after the alert is dismissed

The callback receives true if the button was clicked, or null if the Showcase was closed

.confirm(message, callback)

.confirm(message, buttons, callback)

Display a confirmation Popup

• message {string} : The message to display
• buttons {string[]} : The array of texts for the confirm and cancel buttons
• callback {Function} : The callback to execute after confirmation or cancellation

The callback receives true if the confirm button was clicked, false if the cancel button was clicked, or null if the Showcase was closed

.prompt(message, callback)

.prompt(message, button, input, callback)

Display a prompt Popup

• message {string} : The message to display
• button {string} : The text for the prompt confirmation button
• input {string|jQuery} : The input, textarea, or select element html string, or a jQuery element object for the user input
• callback {Function} : The callback to execute after the prompt is complete

The callback receives the trimmed string, or array of trimmed strings for multiple inputs, from the user input, or null if the Showcase was closed

License

MIT