Lightbox Ultra

An ultra-modern take on the popular image presentation technique

Built using JavaScript, CSS3


More About This Demo From The Author

A version of the popular image presentation technique that utilizes modal dialogs for display. As the name suggests, this package as an ultra-modern reworking that utilises the latest server-side technology.

The style sheet heavily uses CSS3. Properties, functions and pseudo-elements used include calc(), 3d animation, gradients, box-shadows, border-radius, content() and the :focus pseudo-class.

A layer of JavaScript has been added on top. This allows the CSS3 animation to repeat itself. The script also uses the full-screen API as introduced in Firefox 10 so as to give the user a more richer experience.

Also note that the HTML is semantically correct and validates 100%.

4 comments so far

Log in to add your own.

  1. dngrwill said,

    This is the worst lightbox demo I've ever seen. Lightbox is supposed to let you stay on the same page, blackout the background and do an image zoom.

    This demo completely takes over your browser, turns you into full screen mode, removes all evidence of which page you're on. Is this how this lightbox is supposed to work?
  2. said,

    I have to agree - it's clumsy and the animation really detracts from the image. I also think the image should stay on the same page - this should be easy to do with JavaScript.

    Using CSS and JavaScript for these functions is surely preferable to extra plug-ins! I'm sure this type of coding will only improve (I'll be checking the code out myself too!)
  3. Raad said,

    I totally concur.
    The use of an automatic full-screen mode is definitely a step backwards.

    It takes a key press and a (tricky!) click to get back; plus (IIRC) the original Lightbox provided greater accessibility, as it allowed navigation through the images using the cursor keys.
    Something which this demo does not seem to do...
  4. plavalle said,

    I agree with the others. Lightboxes take on several different definitions, but I believe what we all were expecting was a modal window version, not a take over of the users screen. While your attempt has its place, as was well intended, your description is extremely misleading. As as far as checking the source files, there are absolutely no server-side code usages - everything is client-side.

About this Demo

Download the Source 891.28 KB · ZIP File

Browse the Source

This demo is released under the MPL/GPL/LGPL license.