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

כיצד להציג תמונות באמצעות Lightbox באתרי וורדפרס?

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().

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

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

6תגובות...
  • חתול 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. אבל זו דוגמה מצוינת, תודה.

השאירו תגובה

פעימות
Up!