Skip to content

Instantly share code, notes, and snippets.

@ara303
Last active December 5, 2018 10:31
Show Gist options
  • Save ara303/6038781 to your computer and use it in GitHub Desktop.
Save ara303/6038781 to your computer and use it in GitHub Desktop.
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
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;
}
@ara303
Copy link
Author

ara303 commented Nov 29, 2018

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.

@karlkerschl
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment