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.
- Register Domain Name
- Website Design
- SEO
- Leading digital agency
Search & social experts to increase traffic - Web Banner Design
Unique designs from $20 - Online PR-Portal Social Media News
Our Press releases you can read on OA News - SEO Services
- Managed Hosting
- Search engine optimisation
Search engine optimisation specialists to companies throughout the UK and the World - website design
- Bath Panels
CSS play Testimonial
"The 
web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth
