Tumblr LightBox

[ZacharyKeith_]

So I have a website that I’m messing around with through Tumblr (zacharykeith.com), and my theme has the Tumblr light box effect for when I post two or more pictures in the same posting. But I would like this feature to include single posts as well. If you visit the site you’ll notice when you click on the first image it redirects you to another page, but how would I add the light box feature to single images like this?

cc @TheDoc

[TheDoc]

Unfortunately, if you’re using the built-in Tumblr lightbox for photosets there’s currently no way to apply it to single photos as well. What you *can* do is apply your own lightbox (eg. [View.js](http://finegoodsmarket.com/view/ “”)) to single photos.

[ZacharyKeith_]

Right on! Thanks @TheDoc!

[ZacharyKeith_]

@TheDoc

Hey so I bought View.js and now I’m pretty confused as to how to implement this in my website. I read the directions to install it on their website but I’m pretty confused. Could you help guide me in the right direction?

[TheDoc]

So you’d include the script on your page, and then simply add a class to your photo posts like this:

[ZacharyKeith_]

I still can’t figure it out. This is what opened when I downloaded the view.js

And is this the right place to post your code you gave me?

I also don’t understand where to paste the script.
Thanks for putting up with newbies!

[TheDoc]

1) Upload the view.min.js file through here: http://www.tumblr.com/themes/upload_static_file

2) Copy the URL from 1 and paste it near the bottom of your theme file like this:

3) Find where in your theme your `{block:Photo} … {/block:Photo}` posts are being rendered and look for `{LinkOpenTag}` and `{LinkCloseTag}`.

4) Replace `{LinkOpenTag}` with ``

5) Replace `{LinkCloseTag}` with ``

[ZacharyKeith_]

@TheDoc
So this is the code I’m dealing with:
v

I uploaded the view.min.js to the Static Uploader and pasted it too, but it’s still not working.

[ZacharyKeith_]

{block:Photo}
{block:IndexPage}{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}

{block:IndexPage}{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}

[TheDoc]

So you’ll want to go like this:

{block:Photo}



{/block:Photo}

[ZacharyKeith_]

Now when I click on a single image it redirects me to a new page where the image can be viewed larger. [Check it out it’s the first post.](http://www.zacharykeith.com/ “”)

[TheDoc]

You have this:

It should be this:

Also, it needs to go near the *end* of your entire file, just before the closing `` will do.

[ZacharyKeith_]

@TheDoc This is still not working. I don’t understand what’s going wrong.

Here’s a [screenshot](http://i904.photobucket.com/albums/ac246/sodaPOOP_photos/ScreenShot2013-04-23at62753PM.png “”) of the developers instructions. Maybe I’m missing one of these steps?

[TheDoc]

You didn’t follow the instructions in my post above. Once you’ve done that, let me know and I’ll have a look.

[ZacharyKeith_]

I Posted this code right before the closing And nothing happened.

[Author]

Posts