tumblrtumblr-themesimage-enlarge

Click to enlarge on tumblr


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?


Solution

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