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 t

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