Tumblr + lightbox + tagcloud

October 12th, 2009 at 7:22PM

Tumblr + lightbox + tagcloud

After spending way too much time implementing a lightbox in my tumblr, I feel I should write about it in case anyone else runs into the same problems.

I decided I wanted a lightbox because, well, they are cool and I figured it would be simple enough, being that I have used multiple different lightbox scripts on different sites in the past. And it is simple, except for one little glitch, that happened to take me forever to recognize - lightbox2 and tagcloud do not work together - or at least not for me.

Let me start from the beginning. I started the way I do anything, I searched Google for Tumblr and lightbox. The two good articles I could find were this one, which was great, and one by Greg Riley. I followed them perfectly, multiple times, but could not get it to work. I figured it must be something simple that I was blind to from staring at it so long, so I emailed Greg in hopes that he could give me the quick fix I needed.

Greg was more then helpful, he even developed a blank tumblr, with lightbox2 working, and sent me the code, I couldn’t ask for more right? Well, I started looking at it and decided to take out all the chunks of code I added to my theme one by one until it matched Gregs, low and behold, the tag cloud script was what was keeping my images docked.

So I returned to Google, and found what I should have known (I distinctly remember running into this problem on a different project).

Jquery conflicts with lightbox, more specifically prototype.js

There are two fixes I found, the first is found here:

Using jquery with other libraries

Simple enough, but I distinctly remember trying this on a different project and it not being so simple.

The seconds solution is to use a jquery lightbox, more specifically this jquery lightbox plugin.

So to get the two to work together do the following:

Download the jquery lightbox plugin, open jquery.lightbox-0.5.js and edit the imageLoading, imageBtnPrev, imageBtnNext, imageBtnClose, imageBlank links so they point to the correct place on your server (i.e. http://www.mysite.com/images/lightbox-ico-loading.gif), then upload it to your server.

next edit your theme and place the links in the <head> section

then place this before the </body> tag

and look for the {block:Photo} tag and insert

<div class=”media”>
<a href=”{PhotoURL-HighRes}” rel=”lightbox[photo_post]” title=”{PhotoAlt}”><img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>{LinkCloseTag}
{block:Caption}<div class=”copy”>{Caption}</div>{/block:Caption}
</div>
{/block:Photo}

Finally, the kicker, you have to remove the link to jquery that you already have installed for the tag cloud

so instead of

<!— Start Tumblr Tag Cloud —>
<script type=”text/javascript” src=”http://code.hr1v.com/jquery.1.2.6.min.js”></script><script type=”text/javascript” src=”http://tumblrtags.hr1v.com/widget.js?css=default&minsize=120&maxsize=100”></script>
<!— End Tumblr Tag Cloud —>

your tag cloud should only be

<!— Start Tumblr Tag Cloud —>
<script type=”text/javascript” src=”http://tumblrtags.hr1v.com/widget.js?css=default&minsize=120&maxsize=100”></script>
<!— End Tumblr Tag Cloud —>

I hope this helps someone, if you have any problems, do not hesitate to contact me.