将灯箱添加到 tumblr 不起作用

Question

我试过 lightbox、fancybox 等，但 none 这些灯箱对我的主题起作用。

这是我正在使用的：http://vintage.themelantic.com/

我想制作一个 "zoom" 图标（我做到了），当你点击它时，你可以在灯箱中看到 post 图片，就像这里一样 ---> http://narniatheme.tumblr.com/

我正确添加了所有代码，但仍然不起作用，它只是在新页面上加载图像。任何人都知道我如何能够做到这一点？

我唯一能添加的是 "zoom" 图标。

我从 "Narnia theme" 的代码中获取了代码，但是当我尝试从 0 添加灯箱时，它也不起作用。我搜索了整个代码，看看是否遗漏了什么，我想我没有遗漏，但也许我遗漏了 jaja 如果我可以添加 Narnia 主题中的代码，那就太棒了。我完全按照它们原来的顺序放置它们，但放在复古主题上。

以下是 Vintage 主题代码以防万一：pastebin。com/embed_js/gz5s56T7

---->I added below <head>: <-------------

<meta name="if:Lightbox" content="1"/>

<script type="text/javascript" src="http://static.tumblr.com/ssdtkch/AhIlqr0kb/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ssdtkch/YP9ls3323/untitled.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/ssdtkch/EUjlqtc4s/jquery.fancybox-1.3.4.css" media="screen" />


---> Below </style><-------------

{block:iflightbox}
<script>
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});


$("#various3").fancybox({
        'width' : '50%',
        'height'        : '30%',
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'type'  : 'iframe'
        });
});
</script>

{/block:iflightbox}


---- >Code for the posts:<-------------

{block:iflightbox}
<a id="single_image" href="{PhotoURL-500}" ><img src="http://27.media.tumblr.com/tumblr_lqr0e7QyrS1r0kskpo1_100.png" style="margin-left:3px; border:0px; width:24px; height:20px;cursor:pointer; float:left;" class="reblog_etc" alt=""/></a>


{/block:iflightbox}

Answer 1

所以我查看了您的代码，但没有任何效果。所以我查看了您的消息来源，弄清楚您做了什么以及您想要什么，并且它现在正在运行。在我向您展示如何修复它之前，请在从不同主题复制脚本和 css 时格外小心，而不要查看它们是如何交互的（否则您可能会得到意想不到的结果）。

所以发生的事情是你从各种来源复制了一些脚本，他们期望其他脚本在那里所以他们崩溃了（导致你的锚标签只是 link 到新标签中的照片） .

请执行以下操作：

擦除整个HTML主题，再次粘贴原来的Vintage主题（让我们从头开始）
在第 96 行附近，您将有一个  HTML 评论（或搜索它）。将以下内容粘贴到下一行：
```

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<meta name="if:Lightbox" content="1">
```
这将从开源添加 Fancybox 库的 CSS（这比将文件上传到 tumblr 更容易），您的灯箱基于此。
搜索 。这是当您将鼠标悬停在图片上时出现的黑色窗格。您会在那里看到 <div class="thumb-icons">，其中包含 Reblog 和 Like 按钮。在这两个之后，还要在thumb-icons里面div，加上：
```

{block:iflightbox}
{block:Photo}
<div class="thumb-icon">
    <a class="fancybox" href="{PhotoURL-500}" ><img src="http://27.media.tumblr.com/tumblr_lqr0e7QyrS1r0kskpo1_100.png" style="margin-left:3px; border:0px; width:24px; height:20px;cursor:pointer; float:left;" class="reblog_etc" alt=""/></a>
</div>{/block:Photo}
{/block:iflightbox}
```
当您将鼠标悬停在所有照片（虽然不是照片集）上时，这会将您的缩放图标添加到它们上。

搜索 。在这些脚本中，但在前三个（jquery.min.js、jquery.infinitescroll.js 和 vintage.js） 之后添加：

<!-- Lightbox-->
{block:iflightbox}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>
{/block:iflightbox}

这将导入 Fancybox 脚本并对其进行初始化（这在您的代码中没有发生）。

最后一步：更新预览，保存主题并在您的主题首选项中切换 "Lightbox" 设置（恐怕您可能需要再次编辑您的颜色），可能会关闭和打开。更新预览并检查缩放图标是否存在以及单击时魔法是否会发生。

现在有很多你可以编辑和定制的课程，但我认为如果你参考 Fancybox 的官方页面是最简单的：http://fancyapps.com/fancybox/

请告诉我它现在是否有效，祝你有美好的一天！

将灯箱添加到 tumblr 不起作用

Adding lightbox to tumblr doesn´t work

jquery

lightbox