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.




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: , , , ,

posted by Aishwar @ 12:00 PM  

16 Comments:

  • At January 22, 2009 6:12 AM , Blogger Open door to everyone... said...

    There seems good if you can also style it with border around the image like in this: http://lightbox-blogger-templates.blogspot.com/

     

  • At January 22, 2009 6:58 AM , Blogger Open door to everyone... said...

    Just tested, it seems not working either with images hosted with blogger or others. It just show the transparent image and nothing else

     

  • At January 27, 2009 4:41 PM , Blogger Erik said...

    odd on your page it works for the most part on my pages it didn't work in ie and killed the functionality of the navigation images :(

     

  • At May 18, 2009 4:05 PM , Blogger Wobin said...

    This was totally awesome! Works like a charm!

    Thanks alot for the script and good luck with your studies!

     

  • At May 18, 2009 6:46 PM , Blogger Open door to everyone... said...

    You may find this greybox useful for your future development: http://orangoo.com/labs/GreyBox

     

  • At May 20, 2009 3:05 AM , Blogger मनोज said...

    have u seen the error in this??? click on the picture and dont make second click, just scroll it up, then u will see the flaw.

     

  • At May 24, 2009 7:42 AM , Blogger Aishwar said...

    Hi Open door to everyone,

    Thanks for the graybox link. I just saw it and it looks really cool!

    Also, I took your comment about border around the image and implemented it in this new version. Thanks for the comments :)

    Cheers,
    aishwar

     

  • At May 24, 2009 7:46 AM , Blogger Aishwar said...

    Hi मनोज,

    AiBloggerBox just moved to a new version (2.0). I clicked the image and scrolled to the top of the page. I don't see an error. I think this version does not have the error you are talking about.

    Feel free to try it out :)

    Cheers,
    aishwar

     

  • At May 25, 2009 2:08 AM , Blogger Open door to everyone... said...

    Glad this is coming to even a nicer greybox! Hope you will inform us here as most of us are following this post, so comment will be delivered to our mailbox.

     

  • At May 27, 2009 10:15 PM , Blogger Stephanie said...

    Hi, how do I get the close button to show up?

     

  • At May 28, 2009 4:42 PM , Blogger Aishwar said...

    Hi Stephanie,

    The close button is on by default. In the javascript file there is a variable that controls it. Look for the line:

    var AiBloggerBox_showCloseButton = [1/0];

    Set it to 1 to make it show (default), and 0 to turn it off.

    Also, the close button is the green text that says close on the top right corner...in case you were looking for something else :)

    Feel free to give any feedback on AiBloggerBox

    Cheers,
    aishwar

     

  • At May 28, 2009 5:54 PM , Blogger Aishwar said...

    Hey Guys,

    AiBloggerBox has now been renamed to BrightBox..Just so that it sounds more professional :)

    Future releases will go by this name. I'll post renamed files for the current release as well.

    Cheers,
    aishwar

     

  • At October 19, 2009 6:04 AM , Blogger ZoOL said...

    Hi, I need your help in creating the script to remove "-h" from blogger image link. I'm trying to use it with my highslide. Can you teach me how to do it. I already look up inside your script, i found the part that remove "-h" but i have no idea to integrate it with my script.

     

  • At October 19, 2009 6:29 PM , Blogger Aishwar said...

    Hey ZoOL,

    To remove "-h" from a string, this is what you do.

    Assuming the variable url contains the url,

    url.replace("-h","")

    What this means is that find "-h" in url and replace it with an empty string.

    Cheers,
    Aishwar

     

  • At October 30, 2009 11:07 PM , Blogger ot said...

    Thanks for this script. Works very well and it is very useful. Is there any way to pass to next photo without closing the opened one and then click the next one for zoom in? Kind Regards, ot

     

  • At October 31, 2009 9:49 PM , Blogger Aishwar said...

    Hi ot,

    The current version unfortunately does not. The next version probably would (when I get some time to do it). Sorry.

     

Post a Comment

<< Home