Search

שימוש ב Lightbox להצגת תמונות ותוכן באמצעות Lity

Lity היא ספריית lightbox קלת משקל, נגישה ורספונסיבית התומכת בתמונות, וידאו, iframes ואף inline content. הספרייה שוקלת כ 3K בלבד כאשר היא דחוסה ובמידה ו gzip מופעל בשרת שלכם.

בפוסט קצר זה נראה כיצד להשתמש בה בכדי להציג תוכן בפופאפ, כלומר ב Lightbox בעזרת הספרייה Lity באתרי וורדפרס.

מה זה Lightbox (בשתי מילים)?

אם אינכם יודעים, אז lightbox זה ספריית Javascript שמציגה תמונות ווידאו במרכז המסך תוך כדי עמעום של השטח מסביב. דוגמה תסביר טוב ממני – לחצו על  הכפתורים מטה וראו על מה אני מדבר:


והנה דוגמה נוספת בה הטמעתי את ה lightbox בפורטפוליו נחמד של תמונות:


כפי שאתם רואים ניתן להציג כל תוכן שתרצו ב lightbox, בין אם זה טפסים, מפות של גוגל (iframes), וידאו וכל תוכן שתמצאו לנכון.

אם אתם תוהים כיצד יצרתי את הפורטפוליו (Masonry) הזה תנו מבט בפוסט המסביר כיצד ליצור פורטפוליו תמונות (Masonry) עם אנימציית טעינה באמצעות masonry.js.

הוספת Lity Lightbox לוורדפרס

השימוש ב Lity פשוט ודורש טעינת שלושה נכסים בלבד כאשר אחד מהם הוא jQuery הקיים בכל אתר וורדפרס. שני הקבצים הנוספים הינם lity.min.css ו lity.min.js אותם נטען בצורה הבאה:

function lity_assets() {

    wp_register_style('lity-css', get_stylesheet_directory_uri() . '/css/lity.min.css');
    wp_enqueue_style('lity-css');
    wp_register_script('lity-js', get_stylesheet_directory_uri() . '/js/lity.min.js', array('jquery'));
    wp_enqueue_script('lity-js');

}

add_action('wp_enqueue_scripts', 'lity_assets');

שימו לב לתלות ב jQuery. על קוד זה להיות בקובץ functions.php של תבנית הבת שלכם.

כיצד להשתמש ב Lity Lightbox להצגת פופאפ?

ניתן להשתמש ב Lity Lightbox בשתי דרכים. האחת דקלרטיבית ברמת ה html והשנייה באמצעות javascript.

א. באופן דקלרטיבי (Declarative)

באופן זה עליכם פשוט להוסיף את התכונה data-lity לאלמנטים מסוג <a> , כאשר לחיצה על קישורים אלו תפתח את ה lightbox בהתאם:

<a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity data-lity-desc="Photo of a flower">Image</a>

<a href="#inline" data-lity>Inline</a>

<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube</a>

<a href="//vimeo.com/1084537" data-lity>iFrame Vimeo</a>

<a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>;

יוצא מן הכלל הוא השימוש ב Inline Content, כלומר הצגת תוכן או אלמנט הקיים בעמוד עצמו לפי ה id שלו. נאמר והוספתי את הקישור הבא ולו התכונה data-lity:

<a href="#inline" data-lity>Inline</a>

מה שנותר לי לעשות הוא להוסיף אלמנט כלשהו בעמוד בעל id בשם inline בכדי להציגו בלחיצה על אותו קישור שהצגנו כרגע. למשל את הטופס הבא:

<div id="inline" class="lity-hide">
    <form>
        <fieldset>
            <ul>
                <li><label for="input">Input</label>
                    <input type="text" required="" name="name" id="input"/></li>
                <li><label for="textarea" style="width: 100%;">Textarea</label>
                    <textarea id="textarea" rows="10" style="width: 100%;"></textarea></li>
                <li><input type="submit"/></li>
            </ul>
        </fieldset>
    </form>
</div>

אגב, ניתן אף להציג ב lightbox כתובת אחרת מאשר מוגדרת בתכונה href של הקישור וזאת באמצעות התכונה data-lity-target:

<a href="/image.html" data-lity data-lity-target="/image-preview.jpg">Image</a>

ב. באופן תכנותי (Programmatic)

// Open a URL in a lightbox
var lightbox = lity('//www.youtube.com/watch?v=XSGBVzeBUbk');

// Bind as an event handler
$(document).on('click', '[data-lightbox]', lity);

ניתן להשתמש ב פונקציה הגלובלית lity בכדי לפתוח כתובות URL (או HTML) ב lightbox או לבצע bind ל event כלשהו.

בכדי לסגור את ה lightbox ניתן להשתמש בפונקציה lightbox.close().

רועי יוסף
רועי יוסף

מפתח אתרים ותבניות וורדפרס יעודייות על בסיס עיצוב. אוהב טיפוגרפיה, צבעים ומה שבינהם ומכוון לספק אתרים רספונסיבים עם ביצועים גבוהים, מותאמים למנועי חיפוש ובעלי קוד ולידי, סמנטי ונקי.

12 תגובות...
  • חתול 20 נובמבר 2019, 0:41

    נשמע לי פשוט לכתוב תוסף שישתמש ב־lity.

  • רמי יושובייב 20 נובמבר 2019, 16:12

    ואיך בדיוק אתה מוסיף בוורדפרס את התכונה data-lity לאלמנטים ספציפיים?

    • רועי יוסף 20 נובמבר 2019, 16:14

      עורך את ה HTML, אך כנראה ואיני מבין את השאלה שלך…

  • חתול 20 נובמבר 2019, 23:15

    ניסיתי קצת לשחק איתו והסתבכתי. אי אפשר להגדיר שהוא יעבוד על חלק מהקישורים לפי class או סיומת כמו ב lightbox קלאסי?

    • רועי יוסף 21 נובמבר 2019, 14:34

      היכן הסתבכת? הנה דוגמה של Lity הפותח ב lightbox כל קישור לו קיים הקלאס lity-test.

      • חתול 21 נובמבר 2019, 23:05

        חשבתי שיש פונקציה מובנת דרך lity בלי שימוש ב jQuery. אבל זו דוגמה מצוינת, תודה.

  • חתול 11 דצמבר 2019, 21:28

    אז ישבתי וכתבתי תוסף מתאים.
    לצערי הצוות של אתר התוספים לא נתן לי להשתמש בשום שם שמזכיר lity ולכן קראתי לו ligery.
    https://wordpress.org/plugins/ligery

    • רועי יוסף 11 דצמבר 2019, 21:54

      מגניב חתול! כל הכבוד… אבדוק אותו בהקדם 🙂 אתה מעוניין לקחת לידך גם את עדכון התוסף My Waze (נראה לי דיברנו על זה בעבר).. אם כן עלה מולי בפייסבוק

      • חתול 11 דצמבר 2019, 22:31

        הקוד נמצא בגיטהאב, מוזמן לעבור עליו.
        לא זכור לי שדיברנו על התוסף וגם אין לי ממש פייסבוק. בינתיים מספיק לי לתחזק את התוספים שלי.

        • רועי יוסף 11 דצמבר 2019, 22:39

          מממ, אז כנראה שאני מתבלבל 🙂 כך או כך אחלה יוזמה ורעיון לתוסף… תודה ששיתפת

  • מרים ברנס 16 יוני 2020, 19:56

    האם ניתן לעצב ב-CSS את הלייבוקס?
    אני רוצה לדוג' שהתמונה לא תתפרס על כל העמוד, והשה-X יהיה צמוד לתמונה
    תודה רבה!

    • רועי יוסף 16 יוני 2020, 22:09

      היי מרים. כן, אפשר לעצב את זה עם CSS..

תגובה חדשה

ניווט מהיר

Up!
לבלוג