Thursday, May 21, 2009

Lightbox and Expand/Collapse function in DHTML

Recently I helped school club to design a website to broadcast Singapore Music Express competition, there are two nice tricks in web design, one is the fascinating lightbox effect, the other is the expand/collapse feature.

As an effect commonly used in web 2.0 site design, lightbox offers nice zooming and transition effects of images overlaying on top of pages, while the rest of page dims. To get this function, there are a lot of scripts you can use online, simply download the JavaScript and css style sheet, and add reference in your html code will work. You do not need to read or understand the javascript which contains up to 2000 lines of code, if you do not want to modify it.

To get the expand/collapse feature, we need to write a javascript function in the page, which will change the style of the spcified elments, either to display the block or hide it. As blogger will filter javascript, I will not post it here.

No comments: