CSS playBOX - The Ultimate CSS Lightbox

31st May 2010

CSS ONLY for Firefox, Safari, Chrome, Opera, SeaMonkey and Flock

With just a small javascript routine for IE

Using images

Using text links

Using inline links

This article is about the castle in Windsor and is taken from Wikipedia, the free encyclopedia.

photos copyright © stu nicholls - CSS play

Information

I have been a little unhappy with the CSS 'lightbox' examples that can be found on the web, including those so far published on CSS play. The main problem is ease of use and having a satisfactory method of closing an open 'lightbox'.

So I have been trying to produce yet another 'lightbox' that addresses these problems and have come up with this ultimate version - 'CSS playBOX'.

This version works in all non-IE browsers using just CSS without the need for javascript, and, with just a small playbox.js javascript routine, will work in all versions of IE. Hopefully IE9 will include support for the :target pseudo-class and will allow this to work in future versions of IE without resorting to javascript.

The working of this is so simple and allows you to use any method of linking to the pop-up panel, including, images, lists and inline links. The pop-up panel can be styled in any way you like using the stylesheet and you also have the option of having the pop-up panel with a fixed position so that the page scrolls under it or absolute positioned so that it scroll with the page.

The example above uses photgraphs that I recently took at Windsor Castle and Gloucester Cathedral and shows linking using thumbnail images and an unordered list of links. I have also included an inline link which will pop-up an information panel which can also contain links to other pages.

So clicking any of these links will show the 'playBOX' in the ususal lighbox fashion with a closing 'X' positioned at the bottom right corner of the panel. Again this can be styled anyway you like using the stylesheet.

All it takes is for the links to have a classname 'playbox' and the href as a 4 character code (in my examples I have used href="#p001" etc.). The pop-up information is then placed at the bottom of your page with the <body> element as the parent and having the classname 'lightbox' and the same id as the href code. For example <div class="lightbox" id="p001">.

1st June 2010 - See the next demo for an enhanced version playBOX v2.


Copyright

Because of all the time and effort spent in producing this demonstration
I would ask that you respect my copyright.

  1. If you are using this on a personal web site then please add a link back to CSSplay and retain any copyright comment in the stylesheet.
    A donation to the 'Support CSSplay' fund would be appreciated.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and in this case a donation to the 'Support CSSplay' fund is required.
  3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page