Ai-Projects: Reflections (Ai-Projects)

Thursday, May 28, 2009

AiBloggerBox: Renaming: BrightBox

After some thought, I think its best for AiBloggerBox to take a new name - something cooler than AiBloggerBox :)

Since the idea is similar to LightBox, I want the name to be similar - so people can identify it. Other things I considered when thinking of a name: its for Blogger - the name should somehow be indicative of this, something short, easy to remember, and at least a wee bit more creative than Ai-Blogger-Box.

I think BrightBox suits these criteria.

Bright is similar to Light
B for Blogger :D - hence some way of indicating this is for blogger
Easier to remember - at least its two real words now
Short - yes, shorter than before
More creative than original name - I think so :)

Yay, so there it is BrightBox! Now to go make labeling changes in the blog.

Labels: AiBloggerBox, BrightBox

Sunday, May 24, 2009

AiBloggerBox: Version 2: Setup (now BrightBox!)

Since the way Version 2 works has changed a little, I thought I'd post the new setup instructions:

Go to the <head> section of your blogger template and add:
<script type="text/javascript" src="PATH_TO_AiBloggerBox_JS_FILE"></script>

That's all :)

Here is a demo:

Click these and let AiBloggerBox kick in and show you what it can do!

Labels: AiBloggerBox, BrightBox

Saturday, May 23, 2009

AiBloggerBox: Version 2: Beta!

Happy to see people interested in this project :)

A Demo of this version is available here: AiBloggerBox Demo

I have rewritten AiBloggerBox almost (using one section of my previous code) from scratch. Here are the new changes:

Changed the mechanism through which the 'box' is created
Absolutely no external files needed! - The javascript file is completely self sufficient. Two other image files were needed before. Overall combined file size is smaller.
White border area around the images now - looks nicer :)
Proper resizing of images - if the image was bigger than the screen size, previously the image would be clipped. Now proper resizing is done, so the entire image is visible
Close button available - looks nicer :) (any mouse click/key press still closes the box)
Image auto-caption mechanism available - Uses the image name to print out image caption below the image in the box. For e.g. the picture "Vacation_in_Bali.jpg" would be automatically given the caption "Vacation in Bali" - easy way to have captions without doing edit HTML!
Easy to edit options to control white-bordering size in the box, caption on/off, close button on/off and colors. Just open the javascript file, it starts off with some variable declarations, for example one thing you will see is:

var AiBloggerBox_showCloseButton = 1

change this to

var AiBloggerBox_showCloseButton = 0

to stop showing the close button. It's that simple! (anything that starts off as AiBloggerBox_* is an editable preference - and these are all present at the very top)

I have tested it in FF3 and IE7 using 1 pure test page and this site itself. I completed coding and testing of it, so I thought I might as well release the beta. :)

I thought it would make better sense to release 2 versions of the JS file now - compressed and the normal one. The compressed one is smaller - meaning it will take less bandwidth when you put it in your site.

Compressed BrightBoxBox: BrightBox_v2.0_compressed.zip
Normal BrightBox: BrightBox_v2.0.zip

You would generally want the compressed version.

Labels: AiBloggerBox, BrightBox, javascript

Tuesday, April 21, 2009

AiBloggerBox (now BrightBox): Version 1.0.1 Release

Edit [May 31, 2009]: The instructions in this video are now out of date. In fact now it is easier than shown in the video to set BritghtBox up.

AiBloggerBox (now BrightBox) - now has been bug fixed and version 1.0.1 has been released. Version 1.1 is soon to be released as well.

Version 1.0.1 can be downloaded from here: AiBloggerBox

Version 1.0.1 notes:

Version 1.0 released was found to be an incomplete release.
It would not have worked (It was different from the version
running on http://www.ai-projects.info). Sorry about that.

Here are some updates on this version (from the correct V.1.0).
- Using addEventListener to add events so that this does
not kill all other mousedown and keypress events on the
document
- Added a check to see if onblur is set on the link element;
this would improve hit rate - no/low false positives. Meaning
it will not kill your other image links

Here is a quick video on how to set this up.

Labels: AiBloggerBox, BrightBox, lightbox, project

Monday, April 20, 2009

AiBloggerBox: Version 1.1 - Soon to come

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

Saturday, January 3, 2009

AiBloggerBox: A Lightbox alternative designed for easy Blogger integration

[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.