שימוש ב 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().