# Lightbox Widget

> Trigger-element widget that opens Magnific Popup with image / video / iframe / inline content / saved Elementor template on click. Trigger can be button / image / icon.

**Class file:** `includes/Elements/Lightbox.php` (2,348 lines)
**Slug:** `lightbox` (widget id `eael-lightbox`)
**Public docs:** <https://essential-addons.com/elementor/docs/lightbox/>
**Pro-shared:** Pro-only. Vendor: Magnific Popup (from Lite).

## Overview

Generic lightbox / modal launcher. User configures a trigger element (button / image / icon) and modal content type (image, video, iframe URL, inline HTML, saved Elementor template). On click, Magnific Popup opens with the configured content. Heavily styled (2,348 lines mostly trigger + modal styling).

## Pro vs Lite

Pro-only widget. Magnific Popup vendor reused from Lite.

## File Map

| File | Role |
| --- | --- |
| `includes/Elements/Lightbox.php` | Widget class (2,348 lines) |
| `src/css/view/lightbox.scss` → `assets/front-end/css/view/lightbox.min.css` | Styling |
| `src/js/view/lightbox.js` → `assets/front-end/js/view/lightbox.min.js` | Magnific init |
| `EAEL_PLUGIN_PATH/assets/front-end/css/lib-view/magnific-popup/magnific-popup.min.css` | Lite — Magnific CSS |
| `EAEL_PLUGIN_PATH/assets/front-end/js/lib-view/magnific-popup/magnific-popup.min.js` | Lite — Magnific JS |
| `config.php` entry `'lightbox'` | Lite Magnific + Pro CSS + Pro JS |

## Architecture

- **Composes Lite's `Helper`** (line 15).
- **Magnific Popup from Lite** — vendor reuse.
- **Multiple content types** — image, video (YouTube / Vimeo / self-hosted), iframe (arbitrary URL), inline HTML, saved Elementor template. Each branch has its own Magnific config.
- **Trigger styling** is the largest control set — per-trigger-type (button / image / icon) full styling.
- **`is_dynamic_content`** likely returns true when content type = template (verify in code).

## Render Output

```html
<div class="eael-lightbox-wrap">
  <a class="eael-lightbox-trigger"
     href="{content-url-or-#}"
     data-mfp-type="image|inline|iframe|ajax"
     [?] data-mfp-src="{content-source}">
    <!-- Trigger varies -->
    [?] <button>{button-label}</button>
    [?] <img src="{trigger-image}" />
    [?] <i class="{icon-class}"></i>
  </a>
  [?] <div class="eael-lightbox-inline-content" id="eael-lb-{element-id}" style="display:none">
    {inline HTML or rendered template}
  </div>
</div>
```

## Controls Reference

| Control id | Tab → Section | Type | Purpose |
| --- | --- | --- | --- |
| Trigger type | Content → Trigger | CHOOSE | `button` / `image` / `icon` |
| Trigger label / image / icon | Content → Trigger | TEXT / MEDIA / ICONS | Per-type |
| Content type | Content → Content | SELECT | `image` / `video` / `iframe` / `inline` / `template` |
| Image / Video URL / Iframe URL / Inline HTML / Template ID | Content → Content | various | Per-content-type |
| Trigger styling (per type) | Style → Trigger | various | Heavy per-type styling |
| Modal styling | Style → Modal | various | Per-modal styling |

## Conditional Dependencies

```text
trigger_type = 'button' → button styling visible
trigger_type = 'image' → image picker + styling visible
trigger_type = 'icon' → ICONS picker + styling visible
content_type = 'image' → image MEDIA picker
content_type = 'video' → video URL TEXT
content_type = 'iframe' → URL TEXT
content_type = 'inline' → WYSIWYG
content_type = 'template' → Elementor template SELECT
```

## JavaScript Lifecycle

`src/js/view/lightbox.js`:

```js
$trigger.magnificPopup( {
    type: $trigger.data( 'mfp-type' ),
    // ... per-type config
} );
```

## Hooks & Filters

Standard widget render.

## Common Issues

| Symptom | Cause | Fix |
| --- | --- | --- |
| Click does nothing | Magnific not loaded | Verify Lite active |
| Video doesn't autoplay | Magnific YouTube/Vimeo config | Adjust `iframeSrc` parameters |
| Saved template not rendering inside lightbox | Template ID wrong / template trashed | Re-pick valid template |
| Trigger image scaled wrong | No image-size constraint | Use image-size control |

## Known Limitations

- **Magnific Popup from Lite** — coupling
- **Magnific unmaintained upstream** — drift risk
- **No `prefers-reduced-motion`** for modal entrance
- **No `aria-modal` / focus trap** — accessibility gap
- **Inline / template content always renders in DOM** — even if user never clicks
- **2,348 lines** — heavy per-type styling

## Cross-References

- Sibling: [`interactive-promo.md`](interactive-promo.md) (also uses Magnific), [`offcanvas.md`](offcanvas.md) (alternative modal pattern)
- Shared patterns: [`_patterns.md`](_patterns.md)