Examples

Single image lightbox

Three simple popups with different scaling settings.
1 — fits horizontally and vertically,
2 — only horizontally,
3 — no gaps, zoom animation, close icon in top-right corner.

Lightbox gallery

You may put any HTML content in each gallery item and mix content types. In this example lazy-loading of images is enabled for the next image based on move direction. If you wish to add touch-swipe support, check my article on the Smashing Magazine, or new PhotoSwipe script.

Zoom-gallery

If you wish to open the popup only after image is fully loaded, you may preload image via JS. Or use scaled down image instead of thumbnail. Zoom effect works only with images, for now.

Popup with video or map

In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.

Open YouTube video
Open Vimeo video
Open Google Map

Dialog with CSS animation

Animations are added with simple CSS transitions, you can make them look however you wish.
More animation effects on CodePen.

Open with fade-zoom animation
Open with fade-slide animation

Dialog example

This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.

Popup with form

Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.

Open form

Form

Lightbox has an option to automatically focus on the first input. It's strongly recommended to use inline popup type for lightboxes with form instead of ajax (to keep entered data if the user accidentally refreshed the page).

1. Name
2. Email
3. Phone
4. Textarea
   Try to resize me to see how popup CSS-based resizing works.

Ajax popup

You have full control of what is displayed in popup, align it to any side via CSS, enable or disable scroll on right side of window - whatever.

Load content via ajax
Load another content via ajax

Modal popup

A modal popup disables the usual ways to close popups.

Open modal

Modal dialog

You won't be able to dismiss this by usual means (escape or click button), but you can close it programatically based on user choices or actions.

Dismiss

Error handling

This is just basic example of how error messages are displayed. Surely, you can change text or style them.

Broken image
Broken ajax request

Don't forget to check out my new article about this plugin on the Smashing Magazine.

What makes this plugin different?

Browser support

Tested on desktop: Chrome, Safari, FF, Opera, IE8+, partial support of IE7 (works, but some visual layout features, like vertical centering, are missing). Mobile: default browser in Android 2.3+, iOS5+, Blackberry 10+, WP7+, mobile Opera and Chrome on Android. If you noticed any bug, please open an issue on GitHub

License

Script is available under MIT license and will always be kept this way.
But please do me a favor and do not create a public WordPress plugin based on it, because I will make it soon and it will be open souce too. (Want to get notified?).

Bugs & contributing

Please report bugs via GitHub and ask general questions through StackOverflow. Feel free to submit commit, even the tiniest contributions to the script or to the documentation are very welcome.

Special thanks to:

• Lokesh Dhakar for original Lightbox script.
• Chris Coyier for awesome CSS techniques.
• Brad Frost for conditional lightbox technique.

Updates

If you wish to get notified about important plugin updates, you may star and watch the repository on GitHub, follow me on Twitter, or join my tiny Mailchimp email newsletter that I send 3-4 times a year.