שימוש ב 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!
לבלוג