Great Design

Welcome to Great Design. This website will look at the best designs on the internet. As well as tutorials teaching you how to produce amazing designs and get good looking results.

Cool Website Feature - Lightbox - And Implemented

Jan 15, 2008


I always like cool little features that are present on websites. It makes them uniques or very cool when they are implemented correctly. One of theses such things is a bit of CSS and javascript that is used to create a "lightbox". You may have seen it on your internet travels. lightbox is a bit of code that opens an image on the page in its own little div elements. As well as this the background is blacked out to a certain level. I think it is really cool, so I decided to share it with you. An example of the lightbox is shown in the image below.

If you want to try it out you can go to the lightbox webpage and download the all the code. There is an earlier version that can be used but it doesn't look as cool. I have also added the code on this website and if you click on the image below you should be able to see the test in all its glory. It takes a couple of seconds for the image to load. If you do get impatient just click the loading icon and it should close the image overlay.

I am not going to be able to make every image lightbox compatible as I would have to go through every single page and image and change some of the code. But I will do it on most of the images I post from now on.

Just as a final note I would like to say kudos to GeckoandFly and some page.


przyjemny said...

THANK YOU i've been wondering how to do this for awhile now and didnt know what it would be called so I couldnt google it... I also clicked on an earlier entry of yours and it appeared in the new window and i was wishing i could do that as well and now I can.

PS I did like 3 of your tutorials today alone so thanks for them too :)