Shoebox (v4.5)

A jQuery media lightbox inspired by MediaboxAdvanced, and updated for the modern web.

This replaces Shoebox v3, is a complete rewrite and is fully responsive.


To use it, include template using John Resig's JS Microtemplate style. There's some built in HTML, but it's flexible now. Note the data-template-name attribute.

JS Template

<script type="text/html" data-template-name="my_template">

    <a class="btn-close" href="#close">&times;</a>

    <video src="<%=src%>"></video>
    <p class="caption"><%=caption%></p>


Close becomes a close button.

The Content

Instantiate the content like this

<script type="text/javascript">
    var Videos = {};  // Context objects
    Video['order'] = [];  // Ordered list of keys

You can name it whatever you want. This gives you namespacing.

Then, each place a video appears on the page. For example, in Django you do something like this:

<script type="text/javascript">
    Videos["video-{{ video.any_unique_id }}"] = {
        template: "my_template",
        src: "{{ video.link }}",
        caption: "{{ video.caption|markdown|escapejs }}"
    VideoCards['order'].push("video-{{ video.any_unique_id }}"); // This gives us an index for next and previous
<a href="{{ video.link }}" data-shoebox-namespace="Videos" data-shoebox="video-{{ video.any_unique_id }}">
    <img src="..."> <!-- Whatever you want here. Doesn't matter. The important part is the link. -->

You can use any variable you put in the context in the template, as well as namespace, next and previous. Which lets you...

<a href="#" data-shoebox-namespace="<%=namespace%>" data-shoebox="<%=next%>">
// This becomes a link to the next object in your namespace, according to the Videos['order']