Mozilla Demo Studio

  • デモを投稿

Lightbox Ultra

An ultra-modern take on the popular image presentation technique

利用技術: JavaScript, CSS3

  • 閲覧数 1006
  • コメント数 4

このデモについての作者の詳細コメント

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 件のコメントがあります。

コメントを投稿するには、サインアップ するか ログインしてください。

  1. dngrwill によるコメント

    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. scott@explainafide.com.au によるコメント

    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 によるコメント

    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 によるコメント

    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.

ソースコードを入手

ソースをダウンロード 891.28 KB · ZIP ファイル

Browse the Source

このデモは MPL/GPL/LGPL ライセンスの下で公開されています。