Slimbox2 in Blogger

Just implemented Slimbox2 on this blog to enhance presenting photos.

From the site:

Slimbox 2 is a 4 KB visual clone of the popularLightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

I like it, it works well and is pretty easy to set up. I hosted the JS files in my Google Drive so all is sweet.
I followed this helpful guide to put things in the right place. For the bit where you have to specify where the slimbox js files reside I used this post to host the code in my own Google Drive.



Don't forget to edit the CSS code to point to the gif files for the slimbox buttons, which can also be hosted on your drive.

This post shows a little demo of the Slimbox in action. All photos are hosted on Google+, I just grab the links for each photo direct when viewing them on Google+ then manipulate them to get thumbnails, medium size for the slimbox then a link to the Google+ photo page in the caption of slimbox.

This is the code I use for a typical photo:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6NUP8wgl43MMQS9V1xEH-QGd76IhOlJPcnsEgBuAhzJP29geoMxy_-ElX6l4Bs79Ww_n5sLbQOSJ1J_vFZqFffTHyN43yxQ3NYpvCMcvNavFKQm5shI05ZPh5wqJ1Hf0fiahoeWnioVw4/w800-h0-no/20130716203501.jpg" rel="lightbox-1" title="&lt;a target='_blank' 
href='https://plus.google.com/photos/113986254461554402739/albums/5661964724265425841/5903191206264760002?pid=5903191206264760002&amp;oid=113986254461554402739'&gt;Google+ Link&lt;/a&amp;gt"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6NUP8wgl43MMQS9V1xEH-QGd76IhOlJPcnsEgBuAhzJP29geoMxy_-ElX6l4Bs79Ww_n5sLbQOSJ1J_vFZqFffTHyN43yxQ3NYpvCMcvNavFKQm5shI05ZPh5wqJ1Hf0fiahoeWnioVw4/w250-h0-no/20130716203501.jpg" /></a>

More simply:

<a href="http://link-to-medium-photo" rel="lightbox-1" title="&lt;a target='_blank' 
href='http://link-to-original-page'&gt;Link text&lt;/a&amp;gt"><img src="http://link-to-thumbnail-photo" /></a>

The URL for the photo (obtained by right-clicking on the photo in Google+ and selecting copy link) can be tweaked to display different sizes. There is a bit in the URL: .../w800-h600-no/... which is controlling the image size, changing those values changes the size displayed. If you use 0 then the full size is shown.

So w800-h800-no will scale the image to be 800 wide or high whichever the greater is...
w0-h0-no will show the full resolution image.

So I use the same URL twice, one w800-h800 for an 800 sized image in the slimbox, and one w250-h250 for a 250 sized thumbnail. I then grab the full URL from Google+ (in the address bar) when viewing the photo to put in the caption link so people can go visit the original page (and +1 it hopefully).

To put a link in a caption in slim box use the title attribute of the link, so <a href="xyz" title="<link text here>">...

<link text here> must be formatted such to fool the browser into creating the link, so a link like this:

<a href="www.google.com">Click here</a>

Needs to be formatted like so:

 &lt;a href='http://www.google.com/'&gt;Click here&lt;/a&amp;gt

Note how the symbols are replace with html entities and the href is in single quotes.