‫Htm - אחלה טיפים לבניית אתרים » Lightwindow‬ http://www.htm.co.il ‫מדריכים ומאמרים בנושא בניית אתרים. כל יום משהו חדש ללמוד, וליישם.‬ Wed, 18 Jan 2012 09:32:13 +0000 http://wordpress.org/?v=2.9.2 il hourly 1 ‫Lightwindow – הוראות שימוש (המדריך המלא)‬ http://www.htm.co.il/2009/03/19/lightbox-%d7%94%d7%95%d7%a8%d7%90%d7%95%d7%aa-%d7%a9%d7%99%d7%9e%d7%95%d7%a9/ http://www.htm.co.il/2009/03/19/lightbox-%d7%94%d7%95%d7%a8%d7%90%d7%95%d7%aa-%d7%a9%d7%99%d7%9e%d7%95%d7%a9/#comments Thu, 19 Mar 2009 12:29:09 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=210

במאמר הקודם הסברתי לכם על טכנלוגיית 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/2009/03/19/lightbox-%d7%94%d7%95%d7%a8%d7%90%d7%95%d7%aa-%d7%a9%d7%99%d7%9e%d7%95%d7%a9/feed/ 7