Question

我曾尝试过lightbox，fancybox等，但这些灯箱都没有在我的主题上发挥作用。

这是我使用的那个：http://vintage.themelantic.com/

我想制作一个“缩放”图标（我做过），当你点击它时，你可以在这样的灯箱中看到帖子图像---＆gt; http://narniatheme.tumblr.com/

我正确添加了所有代码，但仍无法正常工作，只是将图片加载到新页面上。有谁知道我怎么能这样做？

我唯一可以添加的是“缩放”图标。

我从“纳尼亚主题”的代码中获取了代码，但是当我尝试从0添加灯箱时，它也没有用。我搜索了整个代码，看看我是否错过了什么，我想我没有，但也许我做了jaja如果我可以添加纳尼亚主题的那些它会很棒。我把它们完全放在原来的顺序和位置，但是在Vintage主题上。

以下是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而不查看它们如何交互（或者您可能会得到非常意外的结果）时，请格外小心。

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

请执行以下操作：

删除整个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中，添加：

<!-- Lightbox-->
{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脚本并对其进行初始化（代码中没有发生这种情况）。

最后一步：更新预览，保存主题并切换＆＃34;灯箱＆＃34;设置您的主题偏好设置（您可能需要再次编辑颜色我害怕），也许是关闭和打开。更新预览并检查缩放图标是否存在以及单击时会发生魔术。

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

请告诉我它现在是否有效并且度过了美好的一天！

将灯箱添加到tumblr不起作用

1 个答案: