Slimbox2 Blogger Integration

Click on any image in this blog and you will see that it opens in a 'floating dialogue' above the current web page.  Perhaps Wikipedia describes it better:


This is achieved using a Java script called Lightbox, or it's clone (as I've used here) Slimbox.

So, the question is; how do you incorporate this into a Blogger / Blogspot blog?

Unfortunately the answer is not quite so straight forward.  The installation process can be broken down into four steps:

Step 1 - Obtaining The Script
This is the simple bit.
Download the Slimbox 2.02 script from here
You will also need JQuery 1.3.2 'minified' version from here
Rename this file from jquery-1.3.2.min.js to jquery-1.3.2.js


Step 2 - Modifying Script to work with Blogger Hosted Images
Here is the bit that took me ages to work through and understand. Hover over a couple of the images on this blog and you will notice that most of the images are hosted on http://*.bp.blogger.com/XXX

* being any number between 1 and 4
/XXX being some random url of letters and numbers

Unfortunately Slimbox2.2 script doesn't understand this random jumble of nunbers and letters and hence doesn't load when images hosted on bp.blogger.com are clicked.

The workaround is to open slimbox2.js (from the js folder in the downloaded slimbox-2.02.zip) with Wordpad.

Add the following to the bottom of the file:

jQuery(function($) {
$("a[href^='http://1.bp.blogspot.com'] > img:first-child[src]").parent().slimbox({}, function(el) {
return [el.firstChild.src.replace(/\/s\d+(?:\-c)?\/([^\/]+)$/, "/s512/$1"),
(el.title || el.firstChild.alt) + '
'];
});
});

Add the above three more times into slimbox2.js, each time incrementing the [href^='http://1.bp.blogspot.com']by one, so that you have separate code blocks for 1, 2, 3 and 4 .bp.blogspot.com

If anyone knows of a wildcard character to use here, I would be much obliged!


Step 3 - Hosting The Script
OK, so you have the script.
Next problem: Blogger doesn't have the facility to host java scripts.

OK, no issue. If you have a blogger account, then you have a google account and through you google account you can create websites using sites.google.com. These sites can be used to host java scripts.

Create you site and create a page at the top level.  Ensure that the page is a 'File Cabinet':
I called my page scripts.

Select the newly created scripts page and create two more file cabinet pages inside of scripts called css and js.

Your site map should now look like this:
Open the slimbox-2.02.zip downloaded in step 1 and upload the files

• closelabel.gif
• loading.gif
• nextlabel.gif
• prevlabel.gif
• slimbox2.css

into the css folder.
Similarly upload the files:

• slimbox2.js (the modified from step 2)
  
• jquery-1.3.2.js

to the js folder created above.


Step 4 - Modify Blog Template
Log onto blogger, select your blog and then select Layout - Edit HTML.
Add the following three lines to the section of the target blog:

< link href='http://sites.google.com/site/XXX/scripts/css/slimbox2.css' media='screen' rel='stylesheet' type='text/css'/ >

< script src='http://sites.google.com/site/XXX/scripts/js/jquery-1.3.2.js' type='text/javascript'/ >

< script src='http://sites.google.com/site/XXX/scripts/js/slimbox2.js' type='text/javascript'/ >

Replace "XXX" with your google sitename.

Here's how it looks for me:


Testing
.bp.blogspot.com  Hosted Images
Because of the additional lines of code we inserted into slimbox2.js in step 2, you should just be able to click any image hosted .bp.blogspot.com and the slimbox script should launch and show the image.

Images Hosted Elsewhere
When linking to images hosted elsewhere on the web, add rel="lightbox" to display image in slimbox.

For example:

href="http://YOURHOST.com/YOUR_IMAGE.jpg" rel="lightbox" title="IMAGE_TITLE"

Job Done
So, as I say, not all that straight forward but hey, we've learnt a little about java scripting and how blogger host images!

- Chris