A showcase can be used for displaying higher quality or larger scaled images than what can be placed in the page. Showcases support single viewing, multiple viewing through categorization, and optional captions.

The showcase component must be initialized on an element that will trigger the display of the showcases, for example.

<a href="/img/large.png" class="js-showcase">
    <img src="/img/large-thumb.png" alt="">

When the target is clicked, the value of getImage (defaults to href) will be used as the image URL, and the value of getTitle (defaults to title) will be used as the caption.

Category Grouping

To display multiple images that can be cycled through, a category must be defined. This category will group all images into the same showcase.

<a href="/img/large-1.png" class="js-showcase" title="1st image" data-showcase="category">
    <img src="/img/large-1-thumb.png" alt="">

<a href="/img/large-2.png" class="js-showcase" title="2nd image" data-showcase="category">
    <img src="/img/large-2-thumb.png" alt="">

The value of getCategory (defaults to data-showcase) will be used for grouping.


  • A .is-loading class will be added to the showcase wrapper while images are loading.
  • A .is-active class will be added to the currently active tab.
  • A .show class will be added to the li for the item currently being show.
  • Supports arrow and escape key events.


Variable Default Description
$showcase-class .showcase CSS class name for the showcase wrapper.
$showcase-class-caption .showcase-caption CSS class name for the showcase caption.
$showcase-class-close .showcase-close CSS class name for the showcase close button.
$showcase-class-inner .showcase-inner CSS class name for the inner showcase wrapper.
$showcase-class-items .showcase-items CSS class name for the showcase items list.
$showcase-class-tabs .showcase-tabs CSS class name for the showcase tabs list.
$showcase-class-next .showcase-next CSS class name for the showcase next button.
$showcase-class-prev .showcase-prev CSS class name for the showcase previous button.
$showcase-opacity 0.50 The alpha transparency for the showcase caption element.
$showcase-transition .3s The transition time for showcase resize animations.
$showcase-zindex 610 The z-index for the showcase element.


Inherits all options from the parent Component.

Option Type Default Description
blackout bool true Whether to display a blackout when a showcase is open.
clickout bool true Whether to hide the showcase when the blackout is clicked.
getCategory string data-showcase The attribute to read and categorize items in the showcase with.
getImage string href The attribute to read the image URL from.
getTitle string title The attribute to read the image title from.
gutter int 50 The margin in pixels to leave between the showcase and viewport edge.
stopScroll bool true Whether to remove the scrollbar on the window while the showcase is open. Requires html.touch for mobile devices to function properly.
template string <div class="showcase">
<div class="showcase-inner">
<ul class="showcase-items" data-showcase-items></ul>
<ol class="showcase-tabs bullets" data-showcase-tabs></ol>
<button class="showcase-prev" data-showcase-prev></button>
<button class="showcase-next" data-showcase-next></button>
<button class="showcase-close" data-showcase-close><span class="x"></span></button>
<div class="showcase-caption" data-showcase-caption></div>
The showcase markup. The data-showcase-* attributes are required.
swipe bool Toolkit.isTouch Will bind swipe events. If this is true on non-touch devices, it will bind equivalent mouse events.


Inherits all events from the parent Component.

Event Arguments Description
jumping int:oldIndex Triggered before an item is cycled into view. Applies to all next, previous, and cycle calls.
jumped int:newIndex Triggered after an item is cycled into view.
load collection:items Triggered after the items have been gathered and created in the showcase.


Inherits all properties from the parent Component.

Property Type Description Found With
animating bool Is the showcase currently animating.
blackout object The Toolkit.Blackout instance when blackout is enabled.
caption element The element that contains the current item caption. [data-showcase-caption]
data array A list of data for titles, images, and categories. This list changes each time the showcase opens.
index int The index of the currently shown item.
items element The element that contains all items. [data-showcase-items]
tabs element The element that contains all tabs — the list of bullets to jump between pages. [data-showcase-tabs]


Inherits all methods from the parent Component.

Method Description Bound To
hide() Hide the showcase. [data-showcase-close]
jump(int:index) Show a specific item defined by the index in the collection. [data-showcase-tabs] a
next() Go to the next item. [data-showcase-next]
prev() Go to the previous item. [data-showcase-prev]
show(element:node) Show the showcase and gather items based on the clicked node. selector