##### Milestone 30%

##### Release 60%

- Mailbox
- Calendar
- Contacts
- Media
- Documents
- Project
- Forum
- Dashboard

# Lightbox

Official Website

### Lightbox

#### Single Images 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

In this example lazy-loading of images is enabled for the next image based on move direction.

#### 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.

#### With Css Animation

Animations are added with simple CSS transitions, you can make them look however you wish.

Zoom Newspaper Horizontal move Move from top 3d unfold Zoom-out

#### 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

#### 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).

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

#### Ajax Popup

Animations are added with simple CSS transitions, you can make them look however you wish.

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