כיצד להתקין תוסף לייטבוקס משופר – Fancybox Jquery

 אני מניח שכולכם ודאי מכירים ומשתמשים ב – Lightbox Effect ברוב הגלריות שאתם יוצרים או בתצוגת תמונות בהגדלה. מדובר  בספריית Javascript מאוד פופולרית שניתנת להורדה והתקנה בחינם. בפוסט הבא נלמד להשתמש בגלריה נוספת על בסיס אותו רעיון אך קצת יותר מושקעת מבחינה ויזואלית שנקראת: Fancybox ובנויה באמצעות Jquery Libraries.

  1. תחילה, יש להוריד את התוסף  מהקישור הבא מכאן.
  2. לאחר ההורדה, חלצו את התיקייה מה – RAR.
  3. בתוך תיקייה jquery.fancybox-1.2.1 נמצאות שתי תיקיות jquery.fancybox ו – example
    יש למחוק את תיקיית example ולהשאיר רק את התיקייה jquery.fancybox שמכילה למעשה את קבצי ה – JS וה – CSS שאנחנו צריכים.
    כך זה צריך להראות:


    folder
  4. בשלב הבא נצטרך ליצור ליד תיקיית jquery.fancybox דף HTML וכמובן תיקיית IMAGES לצורך הדגמה.
    במקרה שלנו נשתמש ב – 3 תמונות מתוך SXC . כך זה צריך להראות:


    folder2
  5. פתחו את דף ה – HTML בתוכנת עריכה כלשהיא, Dreamweaver או Notepad או כל תוכנה אחרת שאתם מכירים והעתיקו את הקוד הבא במלואו בתוך איזור ה – Head של המסמך, בין <head> ל –  </head>:

    <script type="text/javascript" src="jquery.fancybox/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.fancybox/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $("a").fancybox();
    });
    </script>

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

    <<a rel="group" title="כותרת לתמונה ראשונה…" href="images/0011.jpg"><img src="images/0011.jpg" width="120" /></a>
    <a rel="group" title="כותרת לתמונה שניה…" href="images/0021.jpg"><img src="images/0021.jpg" width="120" /></a>
    <a rel="group" title="כותרת לתמונה שלישית…" href="images/0031.jpg"><img src="images/0031.jpg" width="120" /></a>

  7. שימו לב בקוד לאטריביוט group אשר מטרתו לקשר בין תמונות רציפות ובכך ליצור גלריה של תמונות שבאות אחת אחרי השניה. אם אתם רוצים להציג רק תמונה אחת אין צורך באטריביוט הזה. אלמנט נוסף שחשוב פה הוא ה – Title שבו ניתן להציג טקסט מסוים כ – Caption לתמונה.
    exampleדמו | הורדה