Edit: Prior to release of Version 1.1 - Version 1.0.1 a bug fixed version has been released. You may read about it or download it from these links. There is also a video on the setting up process, which you may watch at the bottom of this page as well.

This is a follow up to the previous entry on AiBloggerBox.

There were some comments from readers that this did not work at their sites. During that time I was on vacation and did not see their comments.

I plan to test AiBloggerBox more thoroughly now and make some enhancements :) - and release a working (as in works at all blogger sites ;) , not just mine) version. I just thought I would post the update here now.

Labels: AiBloggerBox, blogger, BrightBox, lightbox, project

[May 28, 2009] EDIT3: AiBloggerBox has now been renamed to BrightBox!

[May 24, 2009] EDIT2: Version 2.0 of AiBloggerBox (now BrightBox) is now available, feel free to try it out! Download link available at the bottom of this post, or over here: BrightBox

[April 21, 2009] EDIT1: My apologies to those who posted the comments. I was away for sometime and then busy with work for some time after; hence did not have time to respond to you. I have resumed this project and there is a new entry on it here.

I love Lightbox - for people who are not aware of what it is, in some websites you may notice that you click a picture and you see a zoomed version of the picture with a transparency layer to its sides. Here is a link to the official Lightbox website. There is a small issue on how blogger and lightbox integrate.

When you upload an image when making a post in blogger, you have to click "Edit Html" and make slight changes to the html for an image to have the lightbox effect. This is explained in detail in this website here.

I don't like this. I believe that given the nice wysiwyg "Create Post" interface of blogger, you shouldn't have to make html changes to achieve such an effect. I guess I had 2 options at this point - modify lightbox OR make my own lightbox-type effect, that would give me the effect but would not require this html code mod-ding on posts. Being who I am, I chose option 2 - make my own - for the sake of learning...

And I present to you AiBloggerBox. To make this work for you, all you need to is include this javascript file in your html pages. In blogger you would basically add this line in the head section of the blog template:

<script type="text/javascript" src="http://www.ai-projects.info/js/aibloggerbox.js"></script>

That's it! you're all set. When you click on any images in your post, they would get the zoomed version with the lightbox type effect without the html source changes on each post.

This can be used outside blogger too. How it works is when you have an image element contained within an anchor (link) element, the effect automatically kicks in on click of either element. The zoomed in image would have to be what the anchor element links to.

Here are some sample images. This page uses this effect.

Here is a download link for anyone who wants to use it

Version 1.0.1 (old - deprecated): aibloggerbox.zip

Version 2.0 (new - in favour) Compressed: BrightBox_v2.0_compressed.js
Version 2.0 (new): BrightBox_v2.0.js

Labels: AiBloggerBox, blogger, BrightBox, javascript, project

I wanted to try and add some php code to blogger, and when I added some php code to the template page, nothing seemed to happen....here is how you make it work:

It is actually very simple. It is a 2 step process.

Step 1: Set your blog file name in publishing option to index.php (the default is index.html). The fact that its a php file now allows you to integrate php code in the template that would be processed by the server. Here is an image of where you would do this:


Step 2: Add the php code to your template. Here is an image showing that.


The same steps will be followed for ASP pages or anyother server side scripting language - the difference being, the blog filename extension would have to correspond to the language (.asp for ASP).

The drawback is that this would only work on the index page, the rest of the pages (archives, post permanent link pages etc) are still generated as html pages.

Labels: blogger, php, programming, website