1

I have a tumblr blog on which I post short webcomic stories. I want that when I post a few pages in a single post, they appear small, but when I click it enlarges and one can browse through the comic.

I would like to have something similar to this.

How can I set it up?

smyslov
  • 1,279
  • 1
  • 8
  • 29
Boris
  • 13
  • 4

1 Answers1

0

You can achieve this by implementing the Pirobox plugin in your theme: http://www.pirolab.it/pirobox/

You will then need to edit the photoset code in your theme to something like this:

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

And make sure you also adjust the photo-post block so they also open in Pirobox when clicked.

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

Add a link to the Pirobox js file in the "head" of your theme.

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

Add this before the "head" or preferably in the "body" section near your other scripts.

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

And you will need to style it with CSS of course. You can also look into the "fancybox plugin" which does something similar.

Now when people click on a photo from one of your posts, an enlarged version of the picture will open up and they will be able to browse through the pictures from that specific post.

Note: This method will only work with photo posts. Every theme is different, you will need to adjust the code to suit your theme.

Hyphe
  • 81
  • 5