Tumblr Photo/Photoset popup

Question

The theme I use lets photoset images pop up to the grey gallery slide show. If I post only a single photo nothing happens, even when I insert a clickthrough URL. I'd like to have the grey slide show gallery for all images. On the dashboard it works, but not in the theme.

I think there's some code missing, but I don't know it. Could somebody have a look on it, please?

I use this theme http://mindspalace.tumblr.com

Header

Sadly the theme uses Tumblr's default lightbox, which is restricted to Photosets only. – Freon

But isn't there a code snippet that enables the lightbox in a single photo post? – Header

Nothing official, no. – Freon

Answer 1

There's no official way for doing this, but you could 'piggyback' tumblr's Lightbox function Tumblr.Lightbox.init() since it's already loaded on your blog for photosets. It accepts an array containing the urls of all the photoset images, but in this case there is only one image so you can just pass that.

A quick edit of the javascript tumblr appends to every photoset, to allow single photos:

<script class="inline_embed" type="text/javascript">
    var domain = document.domain,
    photo_{PostID} = [{
        "width": "{PhotoWidth-HighRes}",
        "height": "{PhotoHeight-HighRes}",
        "low_res": "{PhotoURL-250}",
        "high_res": "{PhotoURL-HighRes}"
    }];

    function event_is_alt_key(e) {
        return ((!e && window.event && (window.event.metaKey || window.event.altKey)) || (e && (e.metaKey || e.altKey)));
    };

    document.getElementById('photo_{PostID}').onclick = function (e) {
        if (event_is_alt_key(e)) return true;

        window.parent.Tumblr.Lightbox.init(photo_{PostID});

        return false;
    }
</script>

In the Edit HTML screen of your theme's Customize, search for the {Block:Photo} and inside, look for the <img or {PhotoURL tag. You'll need to add an id="{PostID} to the <img /> so it will resemble something like this:

<img id="photo_{PostID}" src="{PhotoURL-500}" />

Once you've done that, copy the modified javascript code block at the top and paste it after the image code, and save. When you click an image post, it should bring up the Lightbox that tumblr uses for photosets and show the vignette background.

---

Creating a custom HTML theme

Soporific