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.
- Each week the Creare Group produce video tutorials for SEO and tips and tricks for the web design industry.
- We offer nothing but the highest quality SEO, Social Media Optimisation And PPC services to businesses in London
- Register Domain Name
- web designers company providing number 1 services for website design and SEO
- IT Support Bristol
- Web Design
- Website Designers - Compare quotes from local website designers
- Top Website Design Company CWD.
Get the Perfect Website! - Web Design Birmingham - Expert web design, marketing and support
- UK's white label Web Design specialist
- Affordable Web Design from EU Design Studio
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
