The thought ran in my mind to create a pure Javascript based video player. I wondered if it were possible and where would I start. I did some quick search and found this: http://blog.nihilogic.dk/2008/04/making-javascript-video-player.html

It is a pure javascript based video player! and the idea is pretty clever. Using PHP and mplayer on the server convert a video file into individual image frames, then use AJAX and stream the individual image frames in the JSON format. Display it on the web page using javascript.

It's an awesome idea and the author has 2 test videos as well. I like it! (but I want to better it :D. May be some time...(soon? :) ))

Labels: javascript, video, video player

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

Edit: The library has been updated with 2 bug fixes - Thanks to Gartheepan for finding the bugs - they were problems associated with window resizing. The download link is to the new version

As part of my javascript learning/brush-up, I am working on a JavaScript library that would offer easy to use UI widgets. Things like split vertical panels, split horizontal panels, tabbed windows etc...

I have created a javascript library that offers the easy ability to add these UI components - called JSToys. It may be downloaded from here - jsToys_1.1.zip

Here is a demo to show what it is capable of:

Labels: javascript, jsToys, launch, 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