Add a Lightbox 2 Slideshow to Your Tumblr Posts

Here’s how to add a really cool lightbox slideshow to your tumblr. The end result will be that when a user clicks an image on your blog, a stylish slideshow will pop up allowing the user to navigate through all the photos on your page. This is a great effect for photo blogs. Try it out on my tumblr to see the effect.

Here’s how to do it:

1. Download lightbox files & unzip

Get lightbox here: http://lokeshdhakar.com/projects/lightbox2/#download

2. Upload the image files

Tumblr allows you to upload static files to your theme. There is a 15mb limit per day, so be careful to do it right the first time! For this step you will only upload the IMAGE files from the lightbox package. You’ll need to edit some of the other files before you upload them.

  • Upload files here: http://www.tumblr.com/themes/upload_static_file
    You only need to upload these images:
    close.gif, closelabel.gif, nextlabel.gif, prevlabel.gif
  • Copy URLS into notepad as you add them (they should look something like this):
    http://static.tumblr.com/ubwkmto/Nvrweyu/loading.gif
    http://static.tumblr.com/ubwkmto/LXZwerwf5b/close.gif
    http://static.tumblr.com/ubwkmto/5nfasf00f5t/closelabel.gif
    http://static.tumblr.com/ubwkmto/xxawerwef6r/nextlabel.gif
    http://static.tumblr.com/ubwkmto/iN5werw73/prevlabel.gif

3. Edit lightbox.js

find the closelabel.gif, close.gif, and loading.gif referenced in the lightbox.js file and replace them with the absolute image paths from tumblr:

change this (lines 48 – 50):

LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

to this (using the URLs you copied from tumblr):

LightboxOptions = Object.extend({
fileLoadingImage: 'http://static.tumblr.com/ubwkmto/N5651/loading.gif',
fileBottomNavCloseImage: 'http://static.tumblr.com/ubwkmto/5sdf159/closelabel.gif',

also change this (on line 122):

<img src="images/close.gif" alt="" />

to something like this (use the URL you copied from tumblr):

<img src="http://static.tumblr.com/ubwkmto/LSDFasdfas651/close.gif" alt="" />

Now you can save and close

4. Edit lightbox.css

change this (line 16 & 17):

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

to this (using the URLS you copied from tumblr)

#prevLink:hover, #prevLink:visited:hover { background: url(http://static.tumblr.com/ubwkmto/iN55354f73/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://static.tumblr.com/ubwkmto/xx2353456r/nextlabel.gif) right 15% no-repeat; }

Now you can save and close

Note:
DON’T USE THE EXACT VALUES I PASTED ABOVE! They won’t work. I just made dummy URLs. Make sure to do the upload step (step two) and replace the relative paths (../images/whatever.gif) with the absolute paths tumblr gave you when you uploaded your files (http://static.tumblr.com/somegarbled/nonsense/yourimage.gif).

If you need more info about paths, go here: absolute vs relative paths

5. Upload the css and js files

Upload them here: http://www.tumblr.com/themes/upload_static_file
(you will need to upload lightbox.css, lightbox.js, prototype.js, builder.js, effects.js and scriptaculous.js)

Copy the URLs into notepad as you upload them:
http://static.tumblr.com/ubwkmto/fBxm00gtt/lightbox.css
http://static.tumblr.com/ubwkmto/6y3m00gua/lightbox.js
http://static.tumblr.com/ubwkmto/nsLm00fbl/prototype.js
http://static.tumblr.com/ubwkmto/Ag0m00fcp/builder.js
http://static.tumblr.com/ubwkmto/Ag0m00fcp/effects.js
http://static.tumblr.com/ubwkmto/Ag0m00fcp/scriptaculous.js

6. Reference the js and css files in your theme header:

In your Tumblr dash, go to Customize Theme > Edit HTML
Just before the </head> add these:

(these need to be in this order, make sure to replace the URLs with the ones you got from tumblr)

<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/nsLmasdfbl/prototype.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/Ag0asfdfcp/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/RUasdf2/effects.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/5adf0f7r/builder.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/6asfgua/lightbox.js"></script>

7. Activate the script in your theme images

Go to Customize Theme > Edit HTML
Just after the {block:Photo}, find the {LinkOpenTag} and change it to this:

<a href="{PhotoURL-HighRes}" rel="lightbox[image]" title="{PhotoAlt}">

Note:
the title=”{PhotoAlt}” part is optional
the title will give a caption to your lightbox images when viewed

If you did this correctly, now when someone clicks an image that has been posted as a photo-type post, it will bring up a cool slide show of all the images currently loaded on the page. This is a great feature for any photo blog!

See an example on my tumblr

Comment on this post or contact me on tumblr if you have any questions about this! Good luck!

Shoutout: I was having some trouble with this at first, but a little trick I got from Greg Riley’s Blog helped me figure this out. If this helps you out, show Greg a little appreciation by following his tumblr. Thanks Greg! 

 

2 thoughts on “Add a Lightbox 2 Slideshow to Your Tumblr Posts”

Leave a Reply

Your email address will not be published. Required fields are marked *