07 Sep

We have seen lots of Javascript Lightbox plugins. It is good to see someone who has created a valid markup Lightbox purely with XHTML and CSS for us.

ThinkVitamin has published a detailed tutorial of How to Create a Valid Non-Javascript Lightbox. Please note that this article assumes you have a basic understanding of (X)HTML and CSS.

Requirements: FF, Safari, Chrome, IE6, IE7 and IE8
Demo: http://www.growldesign.co.uk/projects/lb/
License: License Free

Sponsors

Comments

Rich

Spelling Mistake I think.

How to Creare a Non-Javascript Lightbox with CSS

should be

Create not Creare?

If I’m wrong or you fix it you can just delete my comment!
Lorenzo

@Rich: in italian “Creare” means “to Create”
http://fedmich.com/life fedmich

yep, wrong spelling.
and if you change the permalinks too, you should also redirect that as google might have index this page already.

nice concept on the css though I’ll stick with the javascript because of its interactions like next/back etc.
http://www.crearedesign.co.uk/ rory

RICH it should always be CREARE! thanks a joke as I work for http://www.creare.co.uk check it out ha ha…..anyway

Great article didn’t realise you could do a lightbox with purely CSS and XHTML I’ll give it a go see if its any quicker than an average lightbox plugin. Thanks for sharing
Pingback: Comment créer des « Lightbox » sans javascript ? « Tout simplement…
Bob

When you scroll it messes the light box up.
Pingback: Gözde Berberoğlu » Günün Derlemeleri / 28 Eylül 2009

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

Open Source Resources for Web Application Developers

How to Create a Non-Javascript Lightbox with CSS

Open Source Resources for You

subscribe to our newsletter - weekly free resouces for web developers

follow us on social sites - rss, facebook, google+, Twitter

Open Source Resources for You