Tumblr and Lightbox
Tumblr and Lightbox2 is a very wonderful combination!
from the Author’s page ( http://www.lokeshdhakar.com/projects/lightbox2/ ) : Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.
You can have an example by clicking on each photo in my tumblelog, (only on photo post, not on all pictures of my blog),
Now I will explain you how to setup it correctly on Tumblr:
NOTE^1: Edit the urls respecting the correct path where you’ve uploaded the files!
NOTE^2: Ensure that you’ve uploaded all the needed files!
I’ve made a list of all the file you must upload:
./css:
lightbox.css
./images:
bullet.gif donate-button.gif loading.gif thumb-1.jpg
close.gif download-icon.gif nextlabel.gif
closelabel.gif image-1.jpg prevlabel.gif
./js:
builder.js lightbox.js scriptaculous.js
effects.js prototype.js
First follow the instruction by Author’s page (edited by me for inserting it on Tumblr custom css):
- Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header. Between <head> </head> HTML tags!
<!-- Start LightBox Javascript -->
<script src="http://www.yourdomain.name/lightbox2/js/prototype.js" type="text/javascript"></script>
<script src="http://www.yourdomain.name/lightbox2/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="http://www.yourdomain.name/lightbox2/js/lightbox.js" type="text/javascript"></script>
<!-- End LightBox Javascript --> - Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
<!-- Import LightBox CSS -->
<link rel="stylesheet" href="http://www.yourdomain.com/lightbox2/css/lightbox.css" type="text/css" media="screen" /> - Edit your css/lightbox.css file:
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.yourdomain.com/lightbox2/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.yourdomain.com/lightbox2/images/nextlabel.gif) right 15% no-repeat; } - Edit your js/lightbox.js file:
fileLoadingImage: 'http://www.yourdomain.com/lightbox2/images/loading.gif',
fileBottomNavCloseImage: 'http://www.yourdomain.com/lightbox2/images/closelabel.gif',
Now let’s start with tumblr integration:
- On the custom CSS form on Tumblr, go to: {block:Photo} and edit your {LinkOpenTag} like this:
{LinkOpenTag}<a href="{PhotoURL-500}" rel="lightbox" title="{PhotoAlt}"><img src="{PhotoURL-400}" alt="{PhotoAlt}"/></a>{LinkCloseTag} - Edit PhotoURL dimensions as you like, you can put values: 100, 250, 400, 500.
It’s all! now you have Tumblr+Lightbox2
if you have problems, write them to me!
3 anni fa
