Grow your CSS skills. Land your dream job.

Tumblr LightBox

  • # April 18, 2013 at 4:14 pm

    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

    # April 18, 2013 at 4:19 pm

    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.

    # April 18, 2013 at 4:29 pm

    Right on! Thanks @TheDoc!

    # April 23, 2013 at 5:00 pm

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

    # April 23, 2013 at 5:10 pm

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

    # April 23, 2013 at 6:04 pm

    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!

    # April 23, 2013 at 6:16 pm

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

    # April 23, 2013 at 6:50 pm

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

    # April 23, 2013 at 6:51 pm

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

    # April 23, 2013 at 6:59 pm

    So you’ll want to go like this:

    {block:Photo}

    {PhotoAlt}

    {/block:Photo}

    # April 23, 2013 at 7:08 pm

    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/ “”)

    # April 23, 2013 at 7:11 pm

    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.

    # April 23, 2013 at 7:29 pm

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

    # April 23, 2013 at 7:51 pm

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

    # April 23, 2013 at 8:45 pm

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

Viewing 15 posts - 1 through 15 (of 29 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".