Tumblr 照片/照片集弹出窗口 [英] Tumblr Photo/Photoset popup

问题描述

我使用的主题让 photoset 图像弹出到灰色画廊幻灯片.如果我只发布一张照片，即使我插入了点击 URL，也不会发生任何事情.我想要所有图像的灰色幻灯片放映库.在仪表板上它有效，但在主题中无效.

我认为缺少一些代码，但我不知道.请问有人可以看一下吗?

我使用这个主题

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

解决方案

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

这篇关于Tumblr 照片/照片集弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！