yBox v13.4.3JavaScript Lightbox & Popup Library

yBox is a free, lightweight JavaScript lightbox and modal popup library for images, galleries, YouTube and Vimeo videos, HTML5 video, iframes, AJAX content and hidden page elements.
It is written in vanilla JavaScript with no dependencies (no jQuery), supports RTL with built-in Hebrew and Arabic, and is MIT licensed for personal and commercial use.

Why yBox? A free Fancybox alternative

yBox covers the common lightbox and popup needs, images, galleries, video, iframes, AJAX and inline content, for free and without jQuery.
Fancybox requires a paid license for every live website, and Lightbox2 requires jQuery.

Feature	yBox	Fancybox	Lightbox2
Price	Free	Paid license for live sites (from €29)	Free
License	MIT	Commercial	MIT (attribution required)
jQuery required	No	No	Yes

Based on the official Fancybox and Lightbox2 websites, October 2026.

Installation & Files

Include the CSS and JS files in your project:

<link rel="stylesheet" href="ybox.min.css" />
<script type="text/javascript" src="ybox.min.js"></script>

yBox detects the language automatically from the page's <html lang> attribute.
To set the language manually, add the lang parameter to the script URL, e.g. ybox.min.js?lang=he.
Supported languages: he, ar (anything else falls back to English).

Helper Classes

Class	Description
`.ybox`	Required on every trigger element. Add it to any element with `href` or `data-href` to open the link in the lightbox. <a href="#popup" class="ybox">Open</a>
`.ybox-iframe`	Opens the `href` / `data-href` link inside an iframe. Not needed for YouTube / Vimeo links, they are detected automatically. Add `data-ybox-sandbox` to restrict what the iframe can do (see Security). <a href="https://example.com" class="ybox ybox-iframe">Open site</a>
`.ybox-video`	Opens the `href` / `data-href` link in a native HTML5 video player. Not needed when the link ends with a video extension (`.mp4`, `.m4v`, `.webm`, `.ogv`, `.ogg`, `.mov`), even with query parameters. Use it only for video links without an extension. <a href="https://example.com/stream/123" class="ybox ybox-video">Play</a>
`.ybox-ajax`	Fetches the content of the `href` / `data-href` link via AJAX and shows it in the popup. Same-origin only by default. To load from another domain, add `data-ybox-allow-cross-origin` (the other server must also allow CORS). The response is inserted as HTML, so load only content you trust. <a href="/ajax/content.html" class="ybox ybox-ajax">Load</a>
`.ybox-share`	Opens a built-in social sharing popup. On phones and tablets it opens the device share menu instead, with all the installed apps (falls back to the popup if the browser does not support it). By default it shares the current page URL. Use `href` or `data-href` to share a different URL. <button type="button" class="ybox ybox-share">Share</button>

JavaScript API Parameters

Options you can pass to yBox({ ... }).

Parameter	Type	Default	Description
`code`	`string`	—	Injects raw HTML into the popup. Never pass unsanitized user input — sanitize it first (for example with DOMPurify). yBox({ code: '<div>Hello</div>' });
`url`	`string`	—	Opens a URL in an iframe. Only `http`, `https`, `mailto`, `tel` and relative URLs are allowed. `javascript:`, `data:` and other protocols are blocked. yBox({ url: 'https://example.com' });
`self`	`HTMLElement \| string`	—	A trigger element (or its selector). The popup is built from its `href` / `data-href` and `data-ybox-*` attributes. <a href="#popup" class="ybox my-link">The link</a> <script> yBox({ self: '.my-link' }); </script>
`yBoxClass`	`string`	`''`	Adds a custom class to the main wrapper `.yBoxOverlay`. yBox({ yBoxClass: 'custom-theme' });
`focus`	`string`	Close button	CSS selector of the element that gets focus after the popup opens. yBox({ focus: '.input-field' });
`id`	`string`	—	Selector of an element in the page (even a hidden one) to show in the popup. yBox({ id: '#my-hidden-div' });
`headline`	`string`	—	Headline above the iframe when using `url`. Shown as plain text. yBox({ url: 'https://example.com', headline: 'Example' });
`sandbox`	`string`	—	Adds a `sandbox` attribute to the iframe opened with `url`. An empty string applies the strictest sandbox. yBox({ url: 'https://example.com', sandbox: 'allow-scripts allow-forms' });

HTML Attributes

Attributes you can add to a trigger element.

Attribute	Value	Default	Description
`href` `data-href`	URL / selector	—	The URL or selector to open. Both attributes work the same. Use `data-href` when `href` is not valid on the element (for example on a `<div>` or `<button>`). <button type="button" data-href="#my-popup" class="ybox">Open</button>
`data-ybox-class`	`string`	—	Adds a custom class to the popup. Use `no-bg` to remove the default white background. <a href="#popup" class="ybox" data-ybox-class="no-bg">Open</a>
`data-ybox-alt`	`string`	—	Sets the `alt` of the opened image.
`data-ybox-title`	`string`	—	Sets the `title` of the iframe or image.
`data-ybox-headline`	`string`	—	Adds an `<h2>` headline above the content. Shown as plain text — HTML is escaped for security. To style it, use `data-ybox-headline-class` (see Styling Headlines).
`data-ybox-headline-class`	`string`	—	Adds a custom class to the headline (`data-ybox-headline`) so you can style it with CSS. <a href="img.jpg" class="ybox" data-ybox-headline="Sunset" data-ybox-headline-class="my-headline">Open</a>
`data-ybox-group`	`string`	—	Links with the same group name open as a gallery with next / prev buttons. <a href="img1.jpg" class="ybox" data-ybox-group="nature">Image 1</a> <a href="img2.jpg" class="ybox" data-ybox-group="nature">Image 2</a>
`data-ybox-img`	URL	—	Custom thumbnail in a gallery, or poster image for a video.
`data-ybox-details`	selector / text	—	Description panel for the whole gallery group. Set it on one element in the group, all slides share it. Use `#my-id` or `.my-class` to take the content from a hidden element (recommended), or write plain text. Plain text is shown as text (HTML is escaped). For formatted content, use a selector.
`data-ybox-details-title`	`string`	—	Title at the top of the details panel. Set it on the same element as `data-ybox-details`. Shown as plain text (HTML is escaped).
`data-ybox-details-tooltip`	`string`	`'More details'`	Tooltip of the ℹ button. The default follows the yBox language (`פרטים נוספים` in Hebrew).
`data-ybox-sandbox`	sandbox tokens	—	Adds a `sandbox` attribute to the iframe (`.ybox-iframe`), for external sites you do not fully trust. An empty value applies the strictest sandbox. Do not use it on YouTube / Vimeo, players may stop working. Avoid combining `allow-scripts` with `allow-same-origin` for pages on your own domain — it cancels the protection. <a href="https://example.com" class="ybox ybox-iframe" data-ybox-sandbox="allow-scripts allow-forms">Open</a>
`data-ybox-allow-cross-origin`	no value	—	Allows `.ybox-ajax` to load content from another domain. Without it, cross-origin AJAX requests are blocked. <a href="https://api.example.com/box.html" class="ybox ybox-ajax" data-ybox-allow-cross-origin>Load</a>

Targeting Elements (href / data-href)

Use href or data-href on the trigger element to open hidden elements or URLs. Both attributes work the same.

Target	Example	Description
ID	`href="#my-popup"` `data-href="#my-popup"`	Opens the element with this ID. If no such ID exists, yBox looks for the class `.my-popup` instead.
Class	`href=".my-popup"` `data-href=".my-popup"`	Opens an element by its class. Useful in loops such as product cards or posts: yBox first looks for the class inside the clicked element. If not found, it opens the element with the same index as the clicked element.

URL Parameters

Open yBox automatically on page load by adding a parameter to the page URL.

Parameter	Value	Description
`ybox-id`	element ID	Opens the element with this ID when the page loads. The value is used only as an element ID — never as a selector, URL or HTML. If no element has this ID, nothing opens. https://yourdomain.com/page?ybox-id=my-popup <div style="display: none;"> <div id="my-popup"> Content opens automatically! </div> </div>

Security

yBox protects against XSS and unsafe links out of the box:

Escaped attributes — data-ybox-alt, data-ybox-title, data-ybox-headline, data-ybox-details-title, classes and URLs are always inserted as text, never as HTML.
Safe protocols only — href / data-href / url must be http, https, mailto, tel, a relative path, #id or .class. javascript:, vbscript:, data: etc. are blocked (a warning is shown in the console). data:image is allowed only for thumbnails and posters.
URL parameter — ?ybox-id is treated only as an element ID.
AJAX — same-origin only, unless data-ybox-allow-cross-origin is set. Error responses (404, 500) are not inserted.
Share windows — opened without access to window.opener (prevents reverse tabnabbing). The print button does not use a javascript: link, so it works with a strict CSP.
Iframe sandbox (opt-in) — add data-ybox-sandbox to restrict external sites.

Your responsibility

yBox({ code }) inserts raw HTML. Never pass unsanitized user input — sanitize it first (for example with DOMPurify).
Elements opened by #id / .class and data-ybox-details selectors show existing page HTML as-is — make sure that content is safe.
AJAX responses are inserted as HTML — load only content you trust.
Clickjacking protection for your own site (X-Frame-Options / CSP frame-ancestors) is set on the server, not in yBox.

JavaScript Execution Examples

Open on page load

<script>
yBox({
	code: '<div class="p-5">Welcome to yBox!</div>'
});
</script>

Call specific hidden element

yBox({ id: '#popup' });

Event Callbacks

Define these global functions to hook into the popup lifecycle. self is the trigger element.

Name	Arguments	Description
`beforeYboxOpen`	`(self)`	Runs before the popup opens. Return `false` to cancel opening. function beforeYboxOpen(self) { // ... }
`afterYboxOpen`	`(self)`	Runs after the popup opens. function afterYboxOpen(self) { // ... }
`beforeYboxClose`	`(self)`	Runs before the popup closes. Return `false` to keep it open. function beforeYboxClose(self) { // ... }
`afterYboxClose`	`(self)`	Runs after the popup closes. function afterYboxClose(self) { // ... }

Nested yBox (Modal inside Modal)

Media Embeds

yBox detects the media type from the link, no extra class is needed:
YouTube (watch, embed, shorts, youtu.be) and Vimeo links, including unlisted Vimeo videos (vimeo.com/ID/HASH or ?h=HASH).
Video files ending with .mp4, .m4v, .webm, .ogv, .ogg or .mov, even with query parameters.

YouTube / Vimeo (Iframe)

Self-Hosted Video (MP4)

Custom Styling & AJAX

Styling Headlines

Headlines are plain text for security, so style them with CSS instead of HTML:

Custom class — add data-ybox-headline-class and style it in your CSS.
Default classes — .ybox-img-title (images & galleries), #ybox-iframe-headline (iframes), .ybox-inline-headline (hidden elements), .ybox-share-title (share popup), .ybox-details-title (details panel).
CSS variables — --ybox-img-title-color, --ybox-img-title-bg, --ybox-iframe-headline-color, --ybox-share-title-color, --ybox-details-title-color.
Line breaks — write 
 in the attribute and add white-space: pre-line to the headline class.
Rich content (bold words, links, icons) — put the headline inside a hidden element and open it with href="#id", or use data-ybox-details="#id" in galleries.

<a href="photo.jpg" class="ybox"
   data-ybox-headline="Sunset&#10;Tel Aviv beach"
   data-ybox-headline-class="my-headline">Open</a>

<style>
.ybox-img-title.my-headline {
	font-size: 28px;
	font-weight: 700;
	color: #fde68a;
	white-space: pre-line;
}
</style>

Image

Gallery Groups

Add data-ybox-group="groupname" to create a gallery.

Drag or swipe the image to move between slides, like a carousel.
Double click / double tap or pinch to zoom, then drag to move around the image.
Drag the image up or down, or pinch out, to close.
The counter shows the current image number (for example 2 / 10).

Nature Collection (Group 1)

Mixed Media (Group 2)

Gallery Details Panel

Add a single description to an entire gallery group using data-ybox-details on one element in the group. An ℹ button appears below the close button — clicking it slides in a panel with the gallery's title and content. On mobile the panel slides up from the bottom.

/* Set data-ybox-details on ONE element — the whole group shares it */
<a href="1.jpg" class="ybox" data-ybox-group="my-gallery"
   data-ybox-details="#gallery-desc"
   data-ybox-details-title="Gallery Title"
   data-ybox-details-tooltip="About this gallery"><img src="1.jpg" alt=""/></a>
<a href="2.jpg" class="ybox" data-ybox-group="my-gallery"><img src="2.jpg" alt=""/></a>
<a href="3.jpg" class="ybox" data-ybox-group="my-gallery"><img src="3.jpg" alt=""/></a>

<div style="display:none">
  <div id="gallery-desc">
    <p>Any <strong>HTML</strong> content — no encoding needed.</p>
  </div>
</div>

Social Sharing

There are two ways to add sharing buttons to a page:

Via popup — a trigger button opens a yBox modal with all the share icons inside.
Inline buttons — share icons placed directly in the page layout, always visible (e.g. on a product card).

Option 1: Share popup (`.ybox-share`)

A single trigger button opens a modal with all sharing options.
By default shares the current page URL.
Add href or data-href to share a specific URL instead.

<!-- Default — shares the current page URL -->
<button type="button" class="ybox ybox-share">Share</button>

<!-- Share a specific URL with data-href -->
<button type="button" class="ybox ybox-share" data-href="https://example.com/product/123">Share</button>

Option 2: Inline share buttons

Place individual share buttons directly in the page — no popup involved.
Each button needs only the platform class (e.g. ybox-facebook-share-btn).
Add href or data-href on the button itself to share a specific URL, or on the wrapping <ul> to apply the same URL to all buttons inside.

<!-- URL on each button individually -->
<button class="ybox-facebook-share-btn" data-href="https://example.com/product/123" type="button">...</button>
<button class="ybox-whatsapp-share-btn" data-href="https://example.com/product/123" type="button">...</button>

<!-- or set URL once on the wrapping ul — all buttons inherit it -->
<ul class="ybox-socials-list" data-href="https://example.com/product/123">
	<li><button class="ybox-facebook-share-btn" type="button">...</button></li>
	<li><button class="ybox-whatsapp-share-btn" type="button">...</button></li>
</ul>

Class	Action
`ybox-facebook-share-btn`	Facebook
`ybox-whatsapp-share-btn`	WhatsApp
`ybox-twitter-share-btn`	X (Twitter)
`ybox-linkedin-share-btn`	LinkedIn
`ybox-pinterest-share-btn`	Pinterest (uses the page `og:image`)
`ybox-telegram-share-btn`	Telegram
`ybox-email-share-btn`	Email (opens the default mail app)
`ybox-copy-text-btn`	Copies the link. The check icon and the "Link copied" text are added automatically.
`ybox-print`	Prints the page

On phones and tablets the buttons open the platform's app when it is installed, and its website when it is not. On desktop they open a popup window.

yBox v13.4.3JavaScript Lightbox & Popup Library

Why yBox? A free Fancybox alternative

Installation & Files

Helper Classes

JavaScript API Parameters

HTML Attributes

Targeting Elements (href / data-href)

URL Parameters

Security

Your responsibility

JavaScript Execution Examples

Open on page load

Call specific hidden element

Event Callbacks

Nested yBox (Modal inside Modal)

Step 1

Step 2

Media Embeds

YouTube / Vimeo (Iframe)

Self-Hosted Video (MP4)

Custom Styling & AJAX

Custom Style!

Styling Headlines

Image

Gallery Groups

Nature Collection (Group 1)

Mixed Media (Group 2)

Gallery Details Panel

yBox v13.4.3JavaScript Lightbox & Popup Library

Why yBox? A free Fancybox alternative

Installation & Files

Helper Classes

JavaScript API Parameters

HTML Attributes

Targeting Elements (href / data-href)

URL Parameters

Security

Your responsibility

JavaScript Execution Examples

Open on page load

Call specific hidden element

Event Callbacks

Nested yBox (Modal inside Modal)

Step 1

Step 2

Media Embeds

YouTube / Vimeo (Iframe)

Self-Hosted Video (MP4)

Custom Styling & AJAX

Custom Style!

Styling Headlines

Image

Gallery Groups

Nature Collection (Group 1)

Mixed Media (Group 2)

Gallery Details Panel

Social Sharing

Option 1: Share popup (.ybox-share)

Option 2: Inline share buttons

Option 1: Share popup (`.ybox-share`)