I really like what Lokesh Dhakar has done with lightbox. I wanted to use..and I did! My personal blog is using it for most of photos in any of my posts (maybe I should create a plugin for Dotclear, the blog system I am using on my personal blog…some time I am so lazy!). It looks nice and it is simple to use. But what? I am not writing an article just to say that right?
My concerns when I looked at the javascript behind were:
- the code is not Object -Oriented,
- everything is created within the javascript, I mean, the div tag and all html inside, which make any adaptation for design purpose a little bit tricky,
- As I mentioned in my previous post, I use a lot Prototype, and there are a lot of things that could be simplify in lightbox with Prototype.
Following these comments, I decided to write my very own code to simulate lightbox. Here are my personal objectives:
- it would be a very good learning process for me to go deeper with Prototype,
- I’d like to use script.aculo.us effects to make things smoother,
- I want a more OO code,
- I want a more declarative process, meaning that I can write my own html for the lightbox without any need to generate it dynamically with some javascript code,
- I want something that I can simply integrate in my new application (I mentioned it on my previous post and I promised to talk about it later, I will deliver my promise…later!).
I slowly started to work on it, meanwhile some more productive guys out there released some enhanced and/or inspired versions including lightbox plus, lightbox gone wild and customizing lightbox. Not to mention that a few days ago, “Mr. Lightbox” himself released lightbox v2! Is there any need again for my small contribution? I still believe yes, simply because there are a few different things that I like and because, as I mentioned, I want to do it to learn more, not to mention that the beauty of “open source” is also the multiplicity of choice! Indeed, lightbox v2 (like some others) is based on Prototype and script.aculo.us for the effect side but I believe it is not going far enough for my very personal taste.
What are the differences
- declarative html: the ‘overlay’ and ‘lightbox’ html elements are hardcoded in the page so it is easy to customize by web designer and the javascript will automagically calculate the widht and height to display the lightbox. It also simplify a lot the javascript side.
- I do not use the html attribute rel=”lightbox” but rather a classic class or a css rule (such as ‘div.thumbnail img’).
- I use much more Prototype capabilities (famous $() and $$(), event and event listener,…).
OK, let’s look at the code on my next post…and don’t forget it is a “web 1.5″ code – meaning that it is still alpha release, not yet beta (where it will become “web 2.0″ 
)