Displaying Inline Images with a Lightbox in Tumblr Text Posts
A feature that I think is currently missing from tumblr is a native lightbox overlay for viewing images from a text post. There is a lightbox for displaying images from a photo or photoset post, but none for a text post.
Solution: Use Fancybox
Here Iāll describe the simplest way I got fancybox working.
Theme Changes
First, download the required fancybox javascript and css files from here. Locate
jquery.fancybox.css
and
jquery.fancybox.pack.js
as shown below.
Now upload them to tumblr as theme assets. You can get to this option by clicking the additional settings when editing your themeās html.
Once theyāre on tumblr, add the following lines to the themeās html somewhere between the documentās <head></head> tags (code is incomplete):
<!-- Add fancyBox --> <link rel="stylesheet" href="INSERT CSS" type="text/css" media="screen" /> <script type="text/javascript" src="INSERT JS"></script>
To complete this code, you have to replace where it says INSERTĀ CSS/JSĀ with the location of the uploaded asset file. You can easily do this by highlighting the placeholder INSERTĀ then hitting theĀ āInsertā button for the asset.
Do this for both files.
Below where you added that code, add this next code responsible for adding fancybox on document load
<script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); </script>
Save the html changes.
Post Changes
For each image in the text post that you want fancybox enabled, make the following changes to the imageās html:
This is the automatic html produced by tumblr when an image is added to the text post.
<figure class="tmblr-full" data-orig-height="344" data-orig-width="675"> Ā <img src="https://64.media.tumblr.com/249df15a1afb5743daa1ad4f73b0ef2c/tumblr_inline_npowzt2B7F1rin8ov_540.png" data-orig-height="344" data-orig-width="675"> </figure>
Replace the ā<figure></figure>ā tags with ā<a></a>ā tags
Replace class="tmblr-full" with class=āfancyboxā
Add aĀ ārelā attribute to <a> to indicate how the lightbox will group images on the page
(note that grouping is page wide, so if another image in a completely different post has the same rel attribute, the images will still group together in the lightbox).
Add aĀ āhrefā attribute that links to the high quality 1280 version of the image.
To get the high quality version of the image, replace _540.png with _1280.png in the src path
The final code looks like this:
<a class="fancybox" rel="grouping" href="https://41.media.tumblr.com/249df15a1afb5743daa1ad4f73b0ef2c/tumblr_inline_npowzt2B7F1rin8ov_1280.png" data-orig-height="344" data-orig-width="675"> Ā Ā Ā <img src="https://64.media.tumblr.com/249df15a1afb5743daa1ad4f73b0ef2c/tumblr_inline_npowzt2B7F1rin8ov_540.png" data-orig-height="344" data-orig-width="675"> </a>
It seems like a lot to do, and it kinda is, but it only takes a couple minutes before posting to make these changes so it's definitely worth it. Options for transitions, captions, and a bunch of other stylistic features can be found on the fancybox website.


















