Last active
December 5, 2018 10:31
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
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
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.