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>

ולתוצאה:

שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
יאירNo Gravatar 2 בספטמבר

תודה רבה אחי. עזרת לי מאוד!
שיהיה לך יום טוב :)

[תגובה]

רועיNo Gravatar 8 בספטמבר

שימושי ,כל הכבוד על היוזמה

[תגובה]

אורן רוטNo Gravatar 11 בספטמבר

בבקשה אני שמח שיכולתי לעזור.

[תגובה]

אלדרNo Gravatar 18 בנובמבר

זה לא עובד בעליל

[תגובה]

עמיתNo Gravatar 14 בספטמבר

למה בדוגמא שלך שם התמונה שבקישור שונה משם התמונה שאתה מציג

[תגובה]

יותםNo Gravatar 28 בנובמבר

זה לא עובד זה פותח את התמונות בדף נפרד
מה עושיםםם?

[תגובה]

אורן רוטNo Gravatar 9 בפברואר

יכולות להיות הרבה מאוד בעיות…
כנראה שהפעלת את הקוד לפני שנטען העמוד אבל יכולות להיות עוד הרבה סיבות.

תן לינק ואנסה לעזור.

[תגובה]

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון