Use Tumblr's built-in lightbox to display high resolution photos. I don't necessarily recommend using this anymore as it unnecessarily relies on jQuery, which you may not need. For a vanilla JS version, see: https://gist.github.com/edadams/5ce1ec3d0b1f69e80724af7eb3b606f4

tumblr-lightbox-for-photos.js

Hey! Just to let you know there is a much better version of this script that doesn't require jQuery here:
https://gist.github.com/edadams/5ce1ec3d0b1f69e80724af7eb3b606f4

For posterity, and because this Gist got unexpectedly popular for a random code snippet, I will preserve the original below. Please do know that I've figured out a much better way to do this, which is above.

$(function(){ // shorthand document.ready()
    $('.make_lightbox').each(function(){ // this is just an element I let them click, it carries a series of data- attributes.
        $(this).on('click',function(){  // when clicked. this is the newer jQuery click() handler that's only in v1.8+ so that may be something to note.
            var lbArray = []; // create blank array.
            var arrayContents = {"width":$(this).data('width'), "height":$(this).data('height'), "low_res":$(this).data("lowres"), "high_res":$(this).data('highres')}; // make set of the data- attributes. 
            lbArray.push(arrayContents); // push the set into the array.
            Tumblr.Lightbox.init(lbArray,1); // trigger Tumblr lightbox. the '1' is the number of photos it expects. specific to how tumblr has things set up.
            $('body').toggleClass('tumblr_lightbox_active'); // use this to prevent the user from scrolling.
        });
    });
});


// Example usage:
{block:Photo}
    {block:HighRes}
        <div class="make_lightbox" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}">View high resolution version</div>
    {/block:HighRes}
{/block:Photo}


// and a bit of css to stop them from scrolling.
// according to a comment, this is optional
body.tumblr_lightbox_active {
    overflow: hidden;
}

Hi Edadams!

Please can you help me and be more specific where to paste the codes?

I want to use a lightbox like this blog: http://duecentos.tumblr.com/ When you click each image a pop up shows the image bigger.

In my blog goes to a dark grey background away from the blog :/ ------> http://spotyone.tumblr.com/

Please, i would really appreciate your help, thanks :)

Using Tumblr's own lightbox, great idea! Implemented it in my theme at forlornhedgehog/chandelier. I found it better to inline the click function though, as it stops problems if you're using an infinite scroll.

Also, there's no need to add the overflow: hidden to the body as Tumblr's lightbox code does that itself.

TY! If you use this on <a> tags, be sure to preventDefault() or return false; – not sure what's proper.

Thanks for this! Got it working beautifully. I have an additional question:
How would I change the script so that it pulls data from the second photo in the photoset?
I'd like to display only the first photo of the set in the post, then be able to click on it to open the lightbox to the NEXT image (or ALL of the other images in the set, enabling the user to click through them all in the lightbox.
I guess that would require another overlay for buttons, etc?

It's so cool that this is still active over 4 years after I posted it.

@karlkerschl - I'm not sure how to do what you mean. If you want that level of customisation, I wouldn't use Tumblr's built-in lightbox at all. I'd go for something that'll give you the control you want such as ColorBox (or any other lightbox plugin of your choosing). My "hack" here is suitable for Photo posts, not Photoset posts (i.e., where there's only ever one image).

Edit: Just so everyone knows, you can find a much more up to date version of this here: Tumblr Lightbox for Photos for 2018. The new version doesn't require jQuery and is just a bit more neatly written.

Thanks so much for the response! I'm looking into other lightboxes now, but this was a good learning experience.