Question

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

我希望有类似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}

并确保您还调整照片帖块，以便在点击时也可以在 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}

在主题的“头部”添加指向 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插件”，它可以执行类似的操作。

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

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

点击放大tumblr

1 个答案: