1

我有一个 tumblr 博客，我在上面发布简短的网络漫画故事。我希望当我在一篇文章中发布几页时，它们看起来很小，但是当我点击它时，它会放大并且可以浏览漫画。

我想要类似的东西。

我该如何设置？

4

1 回答 1

0

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

然后，您需要将主题中的照片集代码编辑为以下内容：

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

并确保您还调整了照片发布块，以便在单击时它们也可以在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 文件的链接。

<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 插件”。

现在，当人们点击您的某个帖子中的照片时，将打开该图片的放大版本，他们将能够浏览该特定帖子中的图片。

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

于 2015-08-05T00:20:42.650 回答