Lightwindow – הוראות שימוש (המדריך המלא)
במאמר הקודם הסברתי לכם על טכנלוגיית lightbox, על היתרונות שלה ואיך הטכנולוגיה עובדת. במאמר זה אני אגש לעניין ואסביר לכם בשמונה שלבים כיצד אתם מוסיפים גם לאתרכם מערכת גלריה שמבוססת על JavaScript ובכל זאת ידידותית למנועי החיפוש.
כפי שציינתי במאמר הקודם ל-lightbox שכפולים רבים. במאמר זה אציג לכם את טכנולוגיית lightbox באמצעות שכפול שאני אוהב והוא ה-lightwindow. אני אוהב את ה-lightwindow במיוחד מכיוון והוא מהיר, מכיל הרבה פונקציות להצגת גלריה ועוד תכונות נוספות שעליהם אני לא ארחיב במאמר זה (פתיחת חלונות iframe, פלאש,PDF ועוד רבים).
חלק 1 – התקנה
1. הורידו את קבצי ה- lightwindow מכאן.
2. העלו את שלושת התיקיות (css,javascript,images) ל-root של אתרכם.
3. טכנולוגיית lightwindow משתמשת בספריות JavaScript למימוש אפקטי האנימציה(Framework ו-Scriptaculous). יש להוסיף את שלושת קבצי ה-JS הבאים לתוך של האתר שלכם, בין תגיות ה-head (לפי הסדר הבא):
1 2 3 | <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> |
4. יש להוסיף כמו כן את קובץ הCSS המצורף (לאותו מקום):
1 | <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" /> |
חלק 2 – הפעלה
1. הוסיפו תכונת "class="lightwindow לכל קישור על מנת להפעיל את ה-lightwindow.
לדוגמא:
1 | <a href="images1.jpg" class="lightwindow" caption="תמונה מדליקה"><img.../></a> |
2. הוסיפו תכונת caption על מנת להוסיף כותרת לתמונתכם בחלון ה-lightwindow. (אופציונלי)
3. הוסיפו תכונת author על מנת להוסיף זכויות יוצרים לתמונתכם בחלון ה-lightwindow. (אופציונלי)
4. על מנת ליצור קשר בין תמונות וליצור גלריה אחידה (ניתן יהיה להעביר קדימה אחורה בין התמונות), יש להוסיף לכל התמונות ששייכים לאותה גלריה תכונת "[rel="ALBUM[GALLERY.
*במקום המילים ALBUM וGALLERY תתנו שמות זהים לכל התמונות שאתם רוצים שיהיו שייכים לאותה קבוצה. במידה ויש לכם כמה גלריות בעמוד יחיד lightwindow מוסיף כפתור בתוך חלון ה-lightwindow שמקשר בין כל הגלריות בדף – נסו ותראו.
לדוגמא הקוד:
1 2 3 4 | <a href="037.jpg" class="lightwindow" rel="גלריה[תמונות לא קשורות]" caption="כאן אפשר לראות גם גיטרה חשמלית וגם אף של בתאדם!" author="מר. כהן"><img src="037-150x150.jpg" alt="אף וגיטרה חשמלית" /></a> <a href="250.jpg" class="lightwindow" rel="גלריה[תמונות לא קשורות]" caption="צילום שהייתי אצל הרופא שלי בדיוק שסגרו לי פה של דב על היד..." author="צלם מוכשר"><img src=" 250-150x150.jpg" alt="יד שבורה עם סמן עכבר" /></a> <a href="dsc00573.jpg" class="lightwindow" rel="גלריה[תמונות לא קשורות]" ><img title="גבר וגברת" src="dsc00573-150x150.jpg" alt="גבר וגברת" /></a> <a href="dsc01017.jpg" class="lightwindow" rel="גלריה[תמונות לא קשורות]" ><img src=" dsc01017-150x150.jpg" alt="בחור מאוד נחמד" /></a> |
ולתוצאה:
שתפו את הפוסט הזה:
LightBox – הדרך להצגת גלריית תמונות
גלריית פלאש על בסיס XML מתנה!
אריאל במאמר 
אורן רוט במאמר 
עופר במאמר
תודה רבה אחי. עזרת לי מאוד!
שיהיה לך יום טוב
[תגובה]
שימושי ,כל הכבוד על היוזמה
[תגובה]
בבקשה אני שמח שיכולתי לעזור.
[תגובה]
זה לא עובד בעליל
[תגובה]
למה בדוגמא שלך שם התמונה שבקישור שונה משם התמונה שאתה מציג
[תגובה]
זה לא עובד זה פותח את התמונות בדף נפרד
מה עושיםםם?
[תגובה]
יכולות להיות הרבה מאוד בעיות…
כנראה שהפעלת את הקוד לפני שנטען העמוד אבל יכולות להיות עוד הרבה סיבות.
תן לינק ואנסה לעזור.
[תגובה]