在 tumblr 上点击放大

Question

我有一个 tumblr 博客，其中 post 网络漫画短篇小说。我希望当我 post 几个页面在单个 post 时，它们看起来很小，但是当我点击它时放大并且可以浏览漫画。

我想要类似 this 的东西。

如何设置？

Answer 1

您可以通过在您的主题中实施 Pirobox 插件 来实现此目的：http://www.pirolab.it/pirobox/

然后您需要将主题中的 photoset 代码 编辑为如下内容：

    {block:Photoset}
    <div class="photo">
        {block:Photos}
 <a rel="gallery" class="pirobox_gall" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
        {/block:Photos}
            </div>
    {/block:Photoset}

并确保您还调整了 photo-post 块，以便它们在单击时也会在 Pirobox 中打开。

    {block:Photo}
  <div class="photo">                       
<a rel="single" class="pirobox" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
        </div>

    <div class="caption">
         {Caption}
            </div>
      {/block:Photo}

在您的主题 "head" 中的 Pirobox js 文件中添加一个 link。

<script type="text/javascript" src="http://static.tumblr.com/ajtokgb/DfDluuzg8/pirobox_extended.js"></script>

在 "head" 之前或最好在其他脚本附近的 "body" 部分添加它。

<script type="text/javascript">
 $(document).ready(function() {
 $().piroBox_ext({
 piro_speed : 700,
 bg_alpha : 0.5,
 piro_scroll : true // pirobox always positioned at the center of the page
 });
 });
 </script>

当然，您需要使用 CSS 来设置样式。您还可以查看执行类似操作的 "fancybox plugin" 。

现在，当人们点击您的 post 中的一张照片时，将打开该图片的放大版本，他们将能够浏览来自该特定 post 的图片.

注意：此方法仅适用于照片 posts。每个主题都不同，您需要调整代码以适合您的主题。

在 tumblr 上点击放大

Click to enlarge on tumblr

tumblr

tumblr-themes

image-enlarge