yBox 13.0.1

A lightweight, flexible, and modern lightbox library. ספרייה קלה, גמישה ומודרנית ל-lightbox.

Installation & Filesהתקנה וקבצים

Include the CSS and JS files in your project: הוסיפו את קבצי ה-CSS וה-JS בפרויקט: 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yuvalAshkenaz/yBox/dist/css/ybox.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/yuvalAshkenaz/yBox/dist/js/ybox.min.js?lang=he"></script>

You can download the files from Github:

ניתן להוריד את הקבצים מ-Github:

https://github.com/yuvalAshkenaz/yBox

Helper Classesקלאסים עיקריים

.yBox or .ybox
Required on every trigger element to activate the library.
Add this class to any element with a href or data-href to open it in the lightbox. נדרש על כל אלמנט טריגר.
הוסף קלאס זה לכל אלמנט עם href או data-href כדי לפתוח אותו בלייטבוקס.
.yBox_ifarme
Opens the href / data-href link inside an iframe container. פותח את הקישור שב-href / data-href בתוך iframe.
.yBox_ajax
Fetches content via AJAX from the href / data-href attribute. טוען תוכן באמצעות AJAX מה-href / data-href.
.yBox_share
Opens a built-in social media sharing modal.
By default shares the current page URL.
Use href or data-href to share a custom URL instead. פותח מודאל שיתוף ברשתות חברתיות.
כברירת מחדל משתף את כתובת הדף הנוכחי.
השתמש ב-href או data-href לשיתוף כתובת מותאמת.

JavaScript API Parametersפרמטרי JavaScript API

code
Inject raw HTML directly.
yBox({ code: '<div>Hello</div>' }); הזרקת HTML ישירות.
yBox({ code: '<div>שלום</div>' });
url
Open a specific URL in an iframe.
yBox({ url: 'https://example.com' }); פתיחת כתובת URL ב-iframe.
yBox({ url: 'https://example.com' });
self
Pass a DOM element (usually the clicked element) to inherit its attributes.
<a href="#popup" class="yBox my-link">The link</a>
<script> yBox({ self: '.my-link' }); </script> העברת אלמנט DOM (בד"כ הכפתור שנלחץ) לירושת התכונות שלו.
<a href="#popup" class="yBox my-link">הקישור</a>
<script> yBox({ self: '.my-link' }); </script>
yBoxClass
Add a custom class to the main wrapper .yBoxOverlay.
yBox({ yBoxClass: 'custom-theme' }); הוספת קלאס מותאם ל-wrapper הראשי .yBoxOverlay.
yBox({ yBoxClass: 'custom-theme' });
focus
CSS selector of an element to focus on after opening.
yBox({ focus: '.input-field' }); selector של אלמנט שיקבל פוקוס לאחר הפתיחה.
yBox({ focus: '.input-field' });
id
Select an element from the DOM (even if hidden) and show it.
yBox({ id: '#my-hidden-div' }); בחירת אלמנט מה-DOM (גם אם מוסתר) והצגתו.
yBox({ id: '#my-hidden-div' });

HTML Attributesתכונות HTML

href or data-href
The target URL or selector to open.
Both work identically — use data-href when href is semantically incorrect (e.g. on a <div> or <button>).
href="#my-popup"  /  data-href="#my-popup" כתובת ה-URL או הסלקטור לפתיחה.
שניהם עובדים זהה — השתמש ב-data-href כשאין משמעות סמנטית ל-href (למשל על <div> או <button>).
href="#my-popup"  /  data-href="#my-popup"
data-ybox-class
Adds a custom class to the popup window.
Use "no-bg" to remove the default white background. מוסיף קלאס מותאם לחלון הפופאפ.
השתמש ב-"no-bg" להסרת הרקע הלבן.
data-ybox-alt
Sets the alt attribute for the opened image. קובע את תכונת ה-alt לתמונה שנפתחת.
data-ybox-title
Sets the title attribute for iframe or image. קובע את תכונת ה-title ל-iframe או תמונה.
data-ybox-headline
Adds an <h2> headline above the content. מוסיף כותרת <h2> מעל התוכן.
data-ybox-group
Groups multiple links into a gallery (next/prev buttons). מקבץ מספר קישורים לגלריה (כפתורי הבא/קודם).
data-ybox-img
Sets a custom thumbnail for galleries or a poster image for videos. קובע תמונת ממוזערת מותאמת לגלריות או תמונת poster לסרטונים.

Targeting Elements (href / data-href)מיקוד אלמנטים (href / data-href)

Use href or data-href on your trigger element to target specific hidden elements or URLs. Both attributes work identically. השתמש ב-href או data-href על אלמנט הטריגר כדי למקד אלמנטים מוסתרים או כתובות URL. שתי התכונות עובדות באופן זהה.

ID Targetמיקוד לפי ID
href="#my-popup"  /  data-href="#my-popup"
Opens the element with the exact ID. If the ID is not found, yBox automatically falls back to searching for a class named .my-popup. פותח את האלמנט עם ה-ID המדויק. אם לא נמצא, yBox עובר אוטומטית לחיפוש קלאס בשם .my-popup.
Class Targetמיקוד לפי קלאס
href=".my-popup"  /  data-href=".my-popup"
Opens an element by its class. Perfect for dynamic content loops (like product cards or blog posts).
  1. First, yBox looks for the class inside the clicked button.
  2. If not found, it opens the element that matches the index of the clicked button.
 פותח אלמנט לפי הקלאס שלו. מושלם ללולאות דינמיות (כגון כרטיסי מוצר או פוסטים).
  1. תחילה yBox מחפש את הקלאס בתוך הכפתור שנלחץ.
  2. אם לא נמצא, פותח את האלמנט שתואם ל-אינדקס של הכפתור.

URL Parametersפרמטרי URL

You can trigger yBox automatically on page load by adding parameters to the URL query string. ניתן להפעיל את yBox אוטומטית בטעינת הדף על ידי הוספת פרמטרים ל-query string של ה-URL.

?ybox-id=element-id
Automatically opens a specific element when the page loads.

URL Example:
https://yourdomain.com/page?ybox-id=my-popup

Required HTML structure: פותח אוטומטית אלמנט ספציפי בטעינת הדף.

דוגמת URL:
https://yourdomain.com/page?ybox-id=my-popup

מבנה HTML נדרש: 
<div style="display:none;">
	<div id="my-popup">
		Content opens automatically!
	</div>
</div>

JavaScript Execution Examplesדוגמאות הרצת JavaScript

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קולבאקים

Hook into the lifecycle of the modal. התחבר למחזור החיים של המודאל.

beforeYboxOpen
function beforeYboxOpen(self){ ... }

afterYboxOpen
function afterYboxOpen(self){ ... }

beforeYboxClose
function beforeYboxClose(self){ ... }

afterYboxClose
function afterYboxClose(self){ ... }

Nested yBox (Modal inside Modal)yBox מקונן (מודאל בתוך מודאל)

Step 1שלב 1

This is the first window.זהו החלון הראשון.

Step 2שלב 2

Hello again! This is the second window.שלום שוב! זהו החלון השני.

Media Embedsהטמעת מדיה

YouTube / Vimeo (Iframe)YouTube / Vimeo (Iframe)

Self-Hosted Video (MP4)סרטון מאוחסן עצמאית (MP4)

Custom Styling & AJAXעיצוב מותאם ו-AJAX

Imageתמונה

Social Sharingשיתוף ברשתות

There are two ways to add sharing buttons to a page: ישנן שתי דרכים להוסיף כפתורי שיתוף לדף:

  1. Via popupפופאפ — a trigger button opens a yBox modal with all the share icons inside.כפתור טריגר פותח מודאל yBox עם כל אייקוני השיתוף.
  2. Inline buttonsכפתורים מוטמעים — share icons placed directly in the page layout, always visible (e.g. on a product card).אייקוני שיתוף מוטמעים ישירות בדף, תמיד גלויים (למשל על כרטיס מוצר).

Option 1: Share popup (.yBox_share)אפשרות 1: פופאפ שיתוף (.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. כפתור טריגר אחד פותח מודאל עם כל אפשרויות השיתוף.
כברירת מחדל משתף את כתובת הדף הנוכחי.
הוסף href או data-href לשיתוף כתובת ספציפית. 

/* Default — shares the current page URL */
<button type="button" class="yBox yBox_share">Share</button>

/* Share a specific URL */
<button type="button" class="yBox yBox_share" href="https://example.com/product/123">Share</button>
/* or with data-href */
<button type="button" class="yBox yBox_share" data-href="https://example.com/product/123">Share</button>

Option 2: Inline share buttonsאפשרות 2: כפתורי שיתוף מוטמעים

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. מקם כפתורי שיתוף ישירות בדף ללא פופאפ.
לכל כפתור נדרש רק קלאס הפלטפורמה (למשל ybox-facebook-share-btn).
הוסף href או data-href על הכפתור עצמו, או על ה-<ul> העוטף כדי שכל הכפתורים בפנים יירשו אותו. 

/* 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>

Available platform classes: קלאסי פלטפורמה זמינים: ybox-facebook-share-btn, ybox-whatsapp-share-btn, ybox-twitter-share-btn, ybox-linkedin-share-btn, ybox-pinterest-share-btn, ybox-telegram-share-btn, ybox-copy-text-btn, ybox-print.