Lightbox Media (LBM) is yet another clone of Lokesh Dhakar’s Lightbox (v2) image add-on. It’s been slightly modified to allow any content (media) apart from images to be shown inside an iframe. This is detected automatically so there’s no need to modify text outside the source files. The overlay effect is applied exactly like before by adding rel=”lightbox” inside the link tag, or rel=”lightbox[some-media-set]“.

The download includes all files needed to set it up on any website, including the Prototype JavaScript Framework and some add-ons provided by Script.aculo.us. It also includes an example page in order to show how you should add the JavaScripts, style etc. Additionally lightbox-media.js and lightbox-media.css holds a few basic instructions on how to alter iframe height and width and set absolute URI’s for the navigation images.

Download Lightbox Media 1.01

Demo’s can be seen at our Area51 / LBM test site, or on our previous post Introducing Lightbox Media. Feel free to comment and/or ask for/provide help related to this add-on.

Update: Based on user input I’m now pleased to announce version 1.2 of Lightbox Media. The update includes a fix for upper-case file names and also the possibility to set the width and hight for the iframed content by adding a short query string to the link. Demo’s are available at our new Area51 / LBM2 test site.

Download Lightbox Media 1.20

This article explains how 10 easy CSS tips can help make your web development life easier when starting out on a new project. First tip (reminder) “Keep it simple” is probably the most important one - which is also referred to as “Less is more” at my office. The following tips are basically an outline of good design (thumb)rules that anyone should try to follow.

Read more | Digg story

Had a go at the Lightbox code earlier today as I want to be able to display more than just images. After a little tweaking I seam to have found a way to include almost anything simply by adding an optional iframe. The JavaScript filters any request that’s not an image and automagically opens the content in an iframe. Implementation doesn’t require any changes on your pages, everything is done by “updating” the lightbox.js and lightbox.css files.

I’ll bug test the code over the weekend, but here’s a few last-minute example:

Another page | A textfile

Please report any bugs or abnormalities, and feel free to suggest whatever you can think of

Have a great weekend!

The following diagram visualizes how the various CSS style elements are connected together, and most importantly what goes where. Handy for both the novice and the more advanced designer (in case your brain’s out for lunch - could happen you know…).

Having seen umpteen diagrams showing beginners how padding, border and margin work together, but not the order in which elements are stacked, I decided to try and fill this hole, and draw a 3D CSS Box Model.

Link to author.

I’ve recently included AnswerTips on this blog, a new feature provided by answers.com.

AnswerTipsTM are small information bubbles that define any word when double-clicked. An AnswerTips-enabled site or blog means visitors get fast facts on 4 million topics provided by Answers.com when they double-click on any word, without opening a new browser or following outbound links. AnswerTips deliver instant definitions, explanations and facts including biographies, tech terms, geography, pop culture and much more.

Feel free to comment whether or not you find this helpful or not. I’ll keep it as long as it doesn’t mess up my code, interfere with Wordpress and my plugins or until you tell me otherwise.