Lightbox Ultra

An ultra-modern take on the popular image presentation technique

이용 기술 자바스크립트, CSS3

  • 조회수 1713회
  • 댓글수 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.에 의한 댓글

    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.

About this Demo

소스 다운로드 891.28 KB · ZIP 파일

Browse the Source

현재 데모는 MPL/GPL/LGPL 라이센스 하에 공개되고 있습니다.