‫Htm - אחלה טיפים לבניית אתרים » lightbox‬ http://www.htm.co.il ‫מדריכים ומאמרים בנושא בניית אתרים. כל יום משהו חדש ללמוד, וליישם.‬ Wed, 18 Jan 2012 09:32:13 +0000 http://wordpress.org/?v=2.9.2 il hourly 1 ‫גלריית פלאש על בסיס XML מתנה!‬ http://www.htm.co.il/2010/01/17/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%a2%d7%9c-%d7%91%d7%a1%d7%99%d7%a1-xml-%d7%9e%d7%aa%d7%a0%d7%94/ http://www.htm.co.il/2010/01/17/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%a2%d7%9c-%d7%91%d7%a1%d7%99%d7%a1-xml-%d7%9e%d7%aa%d7%a0%d7%94/#comments Sun, 17 Jan 2010 11:23:21 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=988

בחודשים האחרונים כמעט ולא היה לי זמן לכתוב שום פוסט וזאת מכוון ועבדתי על האתר של חברת בניית האתרים שלי – דקור. עכשיו לאחר שהאתר על הרגליים התפניתי לעשות מה שהרבה זמן רציתי כבר לעשות – לפרסם כאן פוסט. אז כמובן גם הפעם אני מצ'פר אתכם במתנה, והפעם גלריית פלאש מקורית (לא, לא כמו כל הגלריות שאפשר לבנות עם jQuery), שטוענת תמונות מתוך XML ומייצרת מסך מלא תמונות וכאשר לוחצים על תמונה היא נפתחת באמצעות lightbox. קרדיט גדול לאיתי גורן שאיתו בניתי את הגלריה. תהנו.

picWin - גלריית פלאש עם טעינה מתוך XML

picWin - גלריית פלאש עם טעינה מתוך XML

אפשרויות:

1. הוספת תמונות מתוך XML –
ניתן להוסיף תמונות לתוך קובץ pics.xml. כל תמונה תקבל את המאפיינים הבאים:

1
2
3
4
5
6
<pic>  
       <dir>picDir/normal</dir>
       <big_dir>picDir/big</big_dir>  
       <name>1.jpg</name>  
       <desc>picture title</desc>  
     </pic>

dir - התיקייה בה תמצא התמונה לפלאש (התמונה הקטנה)
big_dir - התיקייה בה התמונה ל-lightbox (התמונה הגדולה)
name - שם קובץ התמונה (בשני התיקיות!)
desc - יופיע כתיאור התמונה בתוך ה-lightbox.

2. תוכלו לשנות את מספר הריבועים בפלאש באמצעות שינוי שורה מספר 6 בקובץ project.fla:

1
var fdata:fData = new fData(5,8,stage.stageWidth,stage.stageHeight,"height");

החליפו את הספרה 5 במס' השורות הרצוי ואת הספרה 8 במס' העמודות הרצוי.

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

]]> http://www.htm.co.il/2010/01/17/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%a2%d7%9c-%d7%91%d7%a1%d7%99%d7%a1-xml-%d7%9e%d7%aa%d7%a0%d7%94/feed/ 51 ‫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 ‫LightBox – הדרך להצגת גלריית תמונות‬ http://www.htm.co.il/2009/02/22/lightbox-%d7%94%d7%93%d7%a8%d7%9a-%d7%9c%d7%94%d7%a6%d7%99%d7%92-%d7%aa%d7%9e%d7%95%d7%a0%d7%95%d7%aa-%d7%95%d7%a2%d7%95%d7%93/ http://www.htm.co.il/2009/02/22/lightbox-%d7%94%d7%93%d7%a8%d7%9a-%d7%9c%d7%94%d7%a6%d7%99%d7%92-%d7%aa%d7%9e%d7%95%d7%a0%d7%95%d7%aa-%d7%95%d7%a2%d7%95%d7%93/#comments Sun, 22 Feb 2009 09:59:55 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=171

בתור בונה אתרים, בניתי גלריות רבות לאתרים שלי וללקוחות שלי. ישנן טכניקות רבות לבניית גלרית תמונות: גלריות משוגעות בפלאש,גלריות שנטענות תוך כדי צפייה עם שילוב של AJAX וגלריות סנטדרטיות בHTML. עד שנתקלתי בטכנולוגית lightbox, תמיד הייתי צריך להתפשר בין קוד תקין ותאימות מלאה לדפדפנים לבין גלריה מעוצבת בצורה היפה ביותר. בניתי גלריות בFLASH, מערכות דינמיות של גלריות תמונות בPHP אבל הטכניקה שמציעה lightbox נותנת את הפתרון הטוב ביותר, תשאלו למה? התשובה במילה אחת – פשטות.

במאמר זה אני אתן רקע על טכניקת lightbox להצגת תמונות, ובמאמר הבא אני אסביר את הצד הטכני שבשימוש ב-lightbox. אז אם אתם כבר יודעים מה זה lightbox עברו למאמר הבא למימוש lightbox להצגת גלריית תמונות. אם לא, המשיכו לקרוא.

מה זה lightbox

lightbox והגרסה החדשה, lightbox2 היא תוכנת JavaScript שמאפשרת להציג תמונות גדולות בלי לטעון את כל הדף מחדש (באותו עמוד) בצורה אלגנטית. עיקר השימוש של הקוד הוא להצגת גלריות תמונות. בעקבות ההצלחה של lightbox אצל מפתחי האתרים, נוצרו שכפולים רבים של הקוד על מנת להציג גם טקסטים, טפסים, סרטונים ובעצם כל מה שאתם מכירים שקיים באינטרנט, במין חלונית מעוצבת בטכנולוגיית JS (אפילו אתר גוגל). אתם בטח ראיתם דוגמאות רבות לשימוש ב-lightbox באתרים שונים גם אם לא הייתם מודעים לכך שמדובר בטכנולוגיה זו. לדוגמא, האתר המופרסם פייסבוק משתמש ב-thickbox לשימושים שונים (בינהם: אישור חבר, הודעה על אי-הרשאה ועוד), ואף במערכת הניהול של האתר הזה (wordpress) יש שילוב של thickbox כאשר מעוניינים להעלות מדיה לאתר.

במאמר הבא אני ארחיב ואספר על שימושים נוספים בטכנולוגיה זו. וכעת חזרה לנושא המאמר, גלריית תמונות. כמו בכל גלריה תמונות סטנדרטית, הגלריה תהיה בנויה מתמונות מוקטנות של כל תמונה מקורית (thumbnails) ולחיצה על תמונה קטנה תציג את אותה תמונה בגודל המקורי. ישנם שתי סיבות לתצורה הזו של הגלריה. אחת, עיצוב גרפי נוח ונכון למשתמש ושנית, חסכון בזמן טעינת העמוד – כך המשתמש יכול לצפות בדוגמית מכל תמונה והדפדפן יטען את התמונות בגודל המקורי רק לפי בקשת המשתמש. טכניקת lightbox עובדת על התצורה הבסיסית הזו של הגלריה ובנוסף היא משלבת אפקטי JavaScript ו-CSS שהופכים את התצורה הפשוטה של הגלריה למדהימה.

אז איך זה עובד?

כאשר ה-lightbox פעיל בעמוד אינטרנט, לחיצה על תמונה מוקטנת בגלריה פותחת את התמונה המקורית בחלון lightbox שגדל באפקט אנימציה מיוחד, לפי גודל התמונה המקורית. כאשר מעוניינים להחיל אפקט lightbox על תמונה צריך להוסיף לאלמנט התמונה תכונת rel. הסקריפט עובר על כל אלמנטי התמונות (<img>) שתחומים באלמנטי קישור (<a>) ומפעיל עליהם את אפקט ה-lightbox. כמו כן ניתן להוסיף כותרת לכל תמונה וכן לקשר בין קבוצת תמונות.

דוגמא לקוד שמתווסף לתמונה:

1
2
3
<a title="כותרת של התמונה" rel="lightbox" href="original_picture.jpg">
<img src="thumb_picture.jpg" />
</a>

זה הכל, עד כדי כך פשוט, נקי ויותר חשוב מהכל – ידידותי למנועי החיפוש.

חסרון

אני אפתח את הפסקה הזו דווקא בעובדה ש-lightbox הינה אחת הטכנולוגיות היפות ביותר שנתקלתי בהן ברשת, הן מבחינת המימוש הנוח, הן בהתאמה המלאה לכל הדפדפנים והן בידידותיות למנועי החיפוש. אך אין לשכוח את החסרון היחידי (שגם עליו קשה להצביע כחסרון של ממש). lightbox מבוסס על טכנולוגיית JavaScript, ובמידה והJS מנוטרל אצל הגולש כל אפקט ה-lightbox יעלם – אך גם כאן לא נתפוס את ה-lightbox עם המכנסיים למטה, מכיוון וכל הקוד בנוי מ-HTML תקין התמונה המקורית תפתח למרות זאת (פשוט בדפדפן כרגיל).

כעת לאחר שסקרתי את הטכנולוגיה להצגת תמונות דלגו למאמר הבא שלי בו אני מסביר כיצד לממש (טכנית) את גלריית התמונות שלכם במאצעות lightbox.

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

]]> http://www.htm.co.il/2009/02/22/lightbox-%d7%94%d7%93%d7%a8%d7%9a-%d7%9c%d7%94%d7%a6%d7%99%d7%92-%d7%aa%d7%9e%d7%95%d7%a0%d7%95%d7%aa-%d7%95%d7%a2%d7%95%d7%93/feed/ 0