jquery-museum demo

A zero-clutter jQuery image gallery.

• Single file.
• Works well on desktop & mobile.
• Clicking the image (or hitting arrow keys) goes to the next one.
• Clicking outside the image (or hitting escape) closes the overlay.
• Images can be deep-linked (uses URL hash).
• The browser back button is respected.

No other animations or styling.

source

view on github or download: jquery.museum.js

basic usage

<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='jquery.museum.js'></script>
<script>
    $(document).ready(function() {
        $.museum($('#content img'));
    });
</script>

you may also add a fullsize data tag to the img element to load a different image in the gallery.

<img src="thumb.jpg" data-fullsize="large.jpg" />

options

var options = {
    namespace: "msm",       // for custom CSS class namespacing
    padding: 25,            // in case you would like a specific amount of padding on the lightbox
    disable_url_hash: true, // disable using hashes in case your website already uses URL hashes for states
};
$.museum($('#content img'), options);