I planned to make this happen for some time now: getting Slimbox to work with Blogger's quirky platform. But the solutions I always come up with never seem to be any viable ones. But today I finally managed to make it work in a way that satisfies me. If you want to know how, read on.
Firstly, the problem is the incapability to host the files required for Slimbox on a server (unless you're running on your own server/hosting account and not the free *.blogspot.com). Slimbox provides a very nice way of presenting an image or even a collection of images. For those that do not know, Slimbox is a clone of the original Lightbox. I prefer Slimbox because it's more lightweight as file size and also file count. The original Lightbox was built using the Prototype framework, which I personally never liked, and Slimbox comes in two flavors: MooTools and jQuery. So if you use any of those, you are safe to go for Slimbox.
But the issue at hand is not the history or origins of Slimbox, but rather the way we need to go to implement it into Blogger. So let's get started.
- Include the jQuery framework in your Blogger layout's html. Because we can't just upload it, we'll use the one Google places at our disposal here. So just go like this in your <head> tag:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
I went here for version 1.3.2 but you can use whichever you'd like - That's one down. Now we need to include the Slimbox files. Head on over and download them from digitalia.be. At the moment of this writing, the latest version is 2.03. Once downloaded unpack them somewhere on your hard drive where you can find them
- Uploading the files to our host is again an issue, as we don't have one. But Google yet again comes to our aid. Go to Google Sites and make a new website or use an existing site if you have one already. Having a Blogger account, I assume it shouldn't be too hard. On your Google Site click the "More Actions" button, go to Manage and click Attachments. Upload the slimbox2.js and image files you unpacked from the Slimbox archive. Don't upload slimbox2.css yet. You need to edit that first
- Open slimbox2.css with your favorite editor (please don't use Microsoft Word, I don't feel like explaining why it won't work if you have any problems) and edit the location of the image files. There are 4 of them, all of which you should have already uploaded to your Google site (closelabel.gif, loading.gif, nextlabel.gif and prevlabel.gif). Make sure you replace the url in the css file so they point to the location of your uploaded images. You can find out the location if you hover over the download link in your Google Sites Attachments section. You can skip the last part of the URL, after the file extension, the one with "?attredirects...". You don't need that. After you're done editing the slimbox2.css you can upload that one too
- Get back to editing your Blogger layout and add the JavaScript and CSS files from your Google site. It should look something like this:
<link href='http://sites.google.com/site/your_site/slimbox2.css' rel='stylesheet' type='text/css'/> <script src='http://sites.google.com/site/your_site/slimbox2.js' type='text/javascript'></script>
Make sure the HREF and SRC attributes point to your uploaded files. - That' about it! Now all you have to do is place a rel="lightbox" (or rel="lightbox[some_name]" if you would like to group them) attribute on the links that point to an image and you want it/them to have Lightbox/Slimbox capabilities. More on how Slimbox works and available features can be found on the official website. For a working example you can check out this page. At the end you will find a gallery of just 5 images and you will be able to scroll through them left/right.
One issue I had was with the fact that the links to images uploaded through Blogger were not pointing to the image itself but rather to a Picasa page containing the image and the Lighbox was activated but no image was displayed. To fix this I had to right-click the image in that page (Picasa page) and click "View image" in Firefox. After that replace the SRC in the link tag with the one of the image. A little more work but it gets the things working.
That's all I went through to get Slimbox working on a Blogger blog. Hope anyone find this useful. If you have any questions/suggestions feel free to leave a comment.
5 comments:
Thanks it works on me, :)
Thank you so much, this has been most helpful
It worked great! Thank you for posting this.
Thank You! It worked like charm - even with RSS-feeds from other photo blogs (for RSS-feeds you have to make an addition to the autoload code block in slimbox2.js though)
I want to thank you. Good job! You guys do a great blog, and have some great contents. Keep up the good work. Wondering where to go in 2019? Things to do has ranked as the best include a remote, idyllic island, the design capital ...
Post a Comment