{"id":448,"date":"2006-07-13T02:01:46","date_gmt":"2006-07-13T02:01:46","guid":{"rendered":"http:\/\/www.nargalzius.com\/blog2\/http:\/www.nargalzius.com\/blog2\/archives\/2006\/07\/2006_07_13_1001.php"},"modified":"2017-02-11T08:36:34","modified_gmt":"2017-02-11T08:36:34","slug":"lightboxing-and-flickr","status":"publish","type":"post","link":"http:\/\/nargalzius.com\/blog\/archives\/2006\/07\/13\/lightboxing-and-flickr","title":{"rendered":"Lightboxing and Flickr"},"content":{"rendered":"
\n

NOTICE<\/strong>
CONTENTS NO LONGER APPLICABLE<\/p>\n

The content discussed in this post is no longer valid; as I’m now using a different “lightbox” implementation.
More here<\/a><\/p><\/div>\n

JC<\/a> made me check out his installation of a cool WordPress plugin<\/a> that does lightboxing.<\/a> 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<\/a> page somewhat<\/em> dynamically.<\/p>\n

Results<\/h2>\n

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).<\/p>\n

Here’s an image which I linked to Flickr<\/a><\/p>\n

\"\"<\/a><\/p>\n

Here’s an image which I linked to the Gallery<\/a> within my domian<\/p>\n

LINK REMOVED (as the old gallery doesn’t exist anymore)<\/h2>\n

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

Lightbox 2.0<\/a><\/h2>\n

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

Basically, the script (or collection of scripts to be more precise) checks out all <a><\/code> tags in a given page and checks if it has an attribute rel=\"lightbox\"<\/code> – 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.<\/p>\n

so you have code like:<\/p>\n

<a rel=\"lightbox\" href=\"your_BIG_image_here\" title=\"optional_caption_here\">\n<img src=\"your_SMALL_image_here\" alt=\"optional_data\" \/>\n<\/a><\/code><\/pre>\n
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]<\/code> – which was the URL<\/code> of the [BIG] image\/or the URL<\/code> in your lightbox anchor.<\/p>\n
Next was simply just to inject code that does this:<\/p>\n
    \n
  1. check the URL<\/code>, and strip it off the extraneous data, leaving the Flickr<\/a> ID alone, then reinserting it into a newly formed URL<\/code> string.<\/li>\n
  2. Add a link in the image caption to redirect to the images Flickr<\/a> page.<\/li>\n
  3. Do not<\/strong> do any of this when the URL<\/code> isn’t<\/em> from Flickr<\/a>.<\/li>\n<\/ol>\n
    It’s a simple enough task, the only problem is the parsing of the URL<\/code>, matching a flickr URL<\/code>, and converting it to the standard Flickr photo page image URL<\/code>. The Flickr<\/a> image above uses http:\/\/static.flickr.com\/54\/182121733_f8659ad49c_o.png<\/code> – which had to be converted to http:\/\/www.flickr.com\/photos\/nargalzius\/182121733<\/code>. The answer was to use regular expressions.<\/p>\n
    For #3, I used your typical if\/else<\/code> to match a regular expression as true<\/em> or false.<\/em> I used \/(.+flickr.+)\/i<\/code> 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<\/code>. If that tested as true<\/em>, it then gets that URL<\/code> and does a replace<\/code> function using the JavaScript syntax:<\/p>\n
    imageArray[activeImage][0].replace(\/(http:\\\/\\\/static.flickr.com\\\/.+\\\/)(\\d+)(.+)\/g, \"http:\/\/www.flickr.com\/photos\/nargalzius\/$2\");<\/code><\/pre>\n
    Which meant:<\/p>\n
      \n
    1. Take the first value from the array (which is http:\/\/static.flickr.com\/54\/182121733_f8659ad49c_o.png<\/code>)<\/li>\n
    2. Match it to \/(http:\\\/\\\/static.flickr.com\\\/.+\\\/)(\\d+)(.+)\/g<\/code> – which further<\/em> meant\n