Bitbucket is a code hosting site with unlimited public and private repositories. We're also free for small teams!

Close

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.

Requires:

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>

</script>

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
</script>

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
</script>
<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. -->
</a>

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']

Recent activity

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.