Make Tumblr Photo Post Act As Photoset

Question

I am new to Tumblr. I have such problem:

I am using Indy theme. When I post several photos, by clicking it acts like slideshow, I mean it's posted as {block:Photoset}. But when I post one photo, after clicking, it redirects me to another page.

All I want is to make even one photo act as photoset and after clicking be displayed on the same page.

Thans in advance.

Here is part of the html of the theme:

{block:Photo}
                <article class="post-photo" id="{PostID}">
                    <div class="post-content">
                    {block:IndexPage}<a href="{Permalink}"><img src="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{/block:IndexPage}
                    {block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}{/block:PermalinkPage}
                    {block:Caption}<p>{Caption}</p>{/block:Caption}
                {/block:Photo}


{block:Photoset}>
                <article class="post-photoset" id="{PostID}">
                    <div class="post-content">
                        <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
                          {block:Photos}
                            <div class="photo-data">
                              <a rel="post-{PostID}" href="{PhotoURL-HighRes}" {block:Caption}title="{Caption}"{/block:Caption}>
                              <div class="pxu-photo">
                                <img alt="{PhotoAlt}" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
                              </div>
                              </a>
                            </div>
                          {/block:Photos}
                        </div>
                    {block:Caption}<p>{Caption}</p>{/block:Caption}
                {/block:Photoset}

Orsino

[this link][1] fixed the problem. Not a very good solution but works :) – [1]: #23406870 – Orsino

Answer 1

It looks like you might be able to use the already existing Tumblr lightbox by wrapping your image in the same div -

<div class="photo-slideshow">

If that doesn't work then you could use a third party library to make it happen, for instance, here's a pretty simple lightbox -

http://lokeshdhakar.com/projects/lightbox2/

After you get that linked into your code, then just use their docs to make your images load into the lightbox!

Jointly