Tumblr 照片/照片集弹出窗口答案

【问题标题】：Tumblr Photo/Photoset popupTumblr 照片/照片集弹出窗口
【发布时间】：2014-05-01 11:00:09
【问题描述】：

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

我认为缺少一些代码，但我不知道。有人可以看看吗？

我用这个主题http://mindspalace.tumblr.com

【问题讨论】：

遗憾的是，主题使用 Tumblr 的默认灯箱，仅限于照片集。
但是没有代码 sn-p 可以在单个照片帖子中启用灯箱吗？
没有官方的，没有。

标签： tumblr

【解决方案1】：

没有官方的方法可以做到这一点，但您可以“搭载”tumblr 的 Lightbox 功能Tumblr.Lightbox.init()，因为它已经加载到您的博客上用于照片集。它接受一个包含所有照片集图像的 url 的数组，但在这种情况下，只有一个图像，所以你可以传递它。

javascript tumblr 的快速编辑附加到每个照片集，以允许单张照片：

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

在主题自定义的编辑 HTML 屏幕中，搜索 {Block:Photo} 并在内部查找 <img 或 {PhotoURL 标记。您需要将id="{PostID} 添加到<img />，这样它就会类似于这样：

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

完成后，复制顶部修改后的 javascript 代码块并将其粘贴到图像代码之后，然后保存。当您点击图片帖子时，它应该会调出 tumblr 用于照片集的 Lightbox 并显示晕影背景。

Creating a custom HTML theme

【讨论】：