LightBox – הדרך להצגת גלריית תמונות

 

בתור בונה אתרים, בניתי גלריות רבות לאתרים שלי וללקוחות שלי. ישנן טכניקות רבות לבניית גלרית תמונות: גלריות משוגעות בפלאש,גלריות שנטענות תוך כדי צפייה עם שילוב של 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/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

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

 

דיון פתוח

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

כתיבת תגובה

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

ניסיון