Lightboxing and Flickr

JC made me check out his installation of a cool WordPress plugin that does lightboxing. I decided to apply the same stuff in my blog – and modify it a bit to be able to link to the image’s Flickr page somewhat dynamically.

Results

If you’re not interested in the details, then just spot the difference between these two lightbox-enabled links (I just hope it does work as I intended it to).

Here’s an image which I linked to Flickr

Here’s an image which I linked to the Gallery within my domian

LINK REMOVED (as the old gallery doesn’t exist anymore)

If you noticed the difference, and are interested in how I did that – read on…lightbox: http://www.huddletogether.com/projects/lightbox2/ “Lightbox 2.0”

Lightbox 2.0

My first concern was that the lightbox script might require that all your files are locally hosted (meaning coming from the same domain – your/my domain). Of course, given that I try to host my blog images in Flickr now – that certainly will not do. To cut a long story short, it can load hotlinked images – and naturally my next instinct was to incorporate my Flickr linking into the script. Which required a bit of hacking into the js file.

Basically, the script (or collection of scripts to be more precise) checks out all <a> tags in a given page and checks if it has an attribute rel="lightbox" – which is the trigger that it is a lightbox-enabled anchor. You’d normally use this with images, so the script is built to load images.

so you have code like:

<a rel="lightbox" href="your_BIG_image_here" title="optional_caption_here">
<img src="your_SMALL_image_here" alt="optional_data" />
</a>

Which it will then create the lighbox instance for and grabs some data into the array. The one I paid attention to was imageArray[activeImage][0] – which was the URL of the [BIG] image/or the URL in your lightbox anchor.

Next was simply just to inject code that does this:

1. check the URL, and strip it off the extraneous data, leaving the Flickr ID alone, then reinserting it into a newly formed URL string.
2. Add a link in the image caption to redirect to the images Flickr page.
3. Do not do any of this when the URL isn’t from Flickr.

It’s a simple enough task, the only problem is the parsing of the URL, matching a flickr URL, and converting it to the standard Flickr photo page image URL. The Flickr image above uses http://static.flickr.com/54/182121733_f8659ad49c_o.png – which had to be converted to http://www.flickr.com/photos/nargalzius/182121733. The answer was to use regular expressions.

For #3, I used your typical if/else to match a regular expression as true or false. I used /(.+flickr.+)/i which basically meant a case insensitive match which had the word “flickr” between any one or more characters – which obviously solved the detection of a flickr URL. If that tested as true, it then gets that URL and does a replace function using the JavaScript syntax:

imageArray[activeImage][0].replace(/(http:\/\/static.flickr.com\/.+\/)(\d+)(.+)/g, "http://www.flickr.com/photos/nargalzius/$2");

Which meant:

1. Take the first value from the array (which is http://static.flickr.com/54/182121733_f8659ad49c_o.png)
2. Match it to /(http:\/\/static.flickr.com\/.+\/)(\d+)(.+)/g – which further meant
   • Match in groups: first group matches http://www.static.flickr.com/, then any one or more characters which ending with a forward slash. This will incidentally match: http://static.flickr.com/54/ as group 1.
   • Second group matches any one or more digits – which will match 182121733
   • Lastly, match any one or more characters as the third group _f8659ad49c_o.png (just to be safe and sure that underscore was delimited properly)
3. Take that/those match(es) and replace them with http://www.flickr.com/photos/nargalzius/ plus the data from the second group.

And voila! you have an instant JavaScript match and replace of any valid Flickr hotlinking URL – which is displayed in the caption. In case you haven’t noticed it yet, the difference between those two links are: for the Flickr, you should see a link at the bottom left of the image… to its respective Flickr page.