‫Htm - אחלה טיפים לבניית אתרים » JavaScript‬

‫שימוש בפקודת OnBeforeUnload לוידוא יציאה של המשתמש‬

‫אורן רוט‬ — Tue, 17 Nov 2009 23:14:58 +0000

יצירת ממשק נוח שמתחשב במשתמש, צריך לכוון את המשתמש לבצע את הפעולות הנכונות, אך בד בבד לנסות למנוע ממנו לעשות טעויות. משתמש יכול להיות מאוד מתוסכל כאשר התוכנה עשתה פעולה שהוא לא התכוון לה וכעת אין באפשרותו לעשות דבר.
היום אני אתן לכם קוד של אחת הטכניקות המוכרות לנו, היא השאלה שצצה כאשר משתמש מנסה לצאת מדף האינטרנט והדפדפן שואל "האם אתה בטוח?".

<דוגמא>

בימים אלה אני עובד על בניית מערכת ניהול תוכן בעזרת ה-framework של Zend. כחלק ממערכת ניהול תוכן, בניתי כמובן גם חלק באתר בו עורכים עמודי תוכן. הדף בנוי מתיבות טקסט שונות ועיקרו הוא תיבת הטקסט עם עורך הטקסט, שם נכתב התוכן העיקרי.
אתם בוודאי מכירים את הסיטואציה, הזנתם תכנים רבים בעמוד עריכה כלשהו באינטרנט, לחצתם על כפתור כלשהו שהעביר אתכם לעמוד אחר, וכל המידע שהקלדתם נעלם ולא יחזור.

אני החלטתי שבמערכת שלי אני רוצה לעזור למשתמש ולשאול אותו, האם הוא בטוח שהוא רוצה לצאת מהדף, חיפשתי קצת באינטרנט ומצאתי את פקודת ה-Javascript החביבה: OnBeforeUnload.

השם הארוך הזה, הוא למעשה Event, שמבצע קריאה לפונקציה כאשר המשתמש מנסה לצאת מהדף (לא משנה אם לחץ על כפתור Back, על לינק בדף או אפילו לחץ על סגירת הדפדפן), הפונקציה שמתלווה ל-Event יכולה להחזיר מחרוזות או ערך בוליאני (true או false).

הוסיפו את הקוד הבא לדף HTML, וכך הדפדפן יציג שאלה למשתמש לפני סגירת הדף:

1
2
3

שימו לב שהטקסט בעברית ("כל המידע שלא נשמר יאבד!"), הוא טקסט שיתווסף להודעה הקבועה של הדפדפן במבנה הבא:

עזרו למשתמש שלכם למנוע טעות

בבדיקתי אם הדפדפנים השונים, chrome ו-Safari לא תמכו בהודעות בעברית.
שימו לב שאופרה מאז ומתמיד לא תמכה ב-OnBeforeUnload, כך שהקוד הנ"ל לא יעבוד בדפדפן אופרה כלל.

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

אשמח לשמוע, איפה אתם מצאתם שימוש לקוד הזה?

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

‫היפוך של אנגלית לעברית באמצעות AJAX‬

‫אורן רוט‬ — Wed, 30 Sep 2009 08:35:40 +0000

אתם בטוח מכירים את זה שאתם רוצים לכתוב טקסט בעברית ואז במקום "לא נראה לי" אתם מקבלים על המסך "kt brtv kh", אבל לא לפני שהחבר לידכם מספיק להוציא צעקת יאוש של "אווו אוו אוו, אתה כותב באנגלית". אם הזדהתם עם הראשון אז אתם בטוח מכירים את זה שיש שדות טקסט מסויימים שמוכנים לקבל רק עברית, אז עד שימציאו שדות יעודיים לשפה אחת (אולי HTML5?) אני מגיש לכם כאן פתרון פשוט למימוש, שיגרום להחלפה מידית של טקסט שמוזן באנגלית בשדה מסויים לעברית.

<דוגמא><קוד>

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

בואו נעבור כעת לקוד, אנחנו נתחיל עם ה-HTML:

1
2
3
4
5
6
7
8
9
10
11

<html>
...
<body>

<form>
<p><label for="textHeb">הכנס כאן את הטקסט (כדאי לנסות אנגלית): </label></p>
<textarea type="text" name="textHeb" id="textHeb" onkeyup="ajaxFunction();"></textarea>
</form>
....
</body>
</html>

כל מה שיצרנו זה טופס ובתוכו textarea עם ID ושם-"textHeb". בנוסף הוספנו לו קריאה לפונקציה ajaxFunction (שאותה ניצור בהמשך) כאשר לוחצים על תו – כלומר, כאשר מקלידים בתוך הטופס, לאחר כל הקלדה קוראים לפונ' ajaxFunction.

כעת נעבור לכתיבת קוד ה-AJAX. למי שלא יודע AJAX היא לא שפה, אלא למעשה טכניקה לשילוב של JS עם גישה לשרת (דרך פרוטוקול XMLHttpRequest). ישנם כמה דרכים למימוש הטכניקה הזו, אני בחרתי לדעתי בפשוטה מכולם והיא מימוש AJAX בשילוב עם ספריית ה-JS השימושית, jQuery.
היתרון הגלום בשילוב הזה הוא כמו בכל קוד jQuery, המימוש הרבה יותר פשוט וקצר. אז בואו נעיף מבט בקוד שמתווסף לנו בין תגיות ה-Head:

1
2
3
4
5
6
7
8
9
10
11

אם זה נראה קצת מסובך אז עוד מעט הכל יראה מאוד פשוט. נתחיל, בשורה הראשונה אנחנו מוסיפים קישור לספריית ה-jQuery. עוד לא הסברתי את זה באף מאמר כאן אבל הסיבה שאני מקשר לספריה שנמצאת בגוגל ולא מקשר לספריה שנמצאת בשרת שלי היא מכיוון ו-jQuery היא ספרייה מאוד שימושית ויש הרבה מאוד סיכוי שהגולש שנכנס לאתר שלי כבר היה באתר אחר בו השתמשו ב-jQuery (דרך גוגל) והספרייה שמורה לו במטמון. כך אני יכול לחסוך את זמן הטעינה של הספרייה.
בשורה השלישית אנחנו יוצרים את הפונקציה ajaxFunction, הפונקציה שקוראים לה לאחר כל הקלדה בתיבת הטקסט שלנו.
כעת אנחנו פונים למימוש של ajax ב-jQuery (שורה 4). בפנייה לאג'קס נפתחים לפנינו הרבה אופציות. אני השתמשתי כאן בארבעה משתנים:

url
type
timeout
success

המשתנה הראשון מכיל את כתובת אליה וממנה האג'קס שולח ומקבל נתונים, אנחנו נחזור אליו. המשתנה השני קובע באיזה צורה אנחנו שולחים את הנתונים (get או post). המשתנה השלישי דיי מובן משמו, משך הזמן ל-timeout (במילי שניות, 1000 = שניה אחת). במשתנה הרביעי אנחנו כותבים את הפעולות שאנחנו רוצים לבצע ברגע שהפעולה בוצעה בהצלחה.

בואו נחזור שנייה לתאוריה, מה שאנחנו רוצים שיקרה הוא שכאשר משתמש כותב בתיבת הטקסט שלנו, הטקסט ישלח לאחר כל הקלדה של אות לקובץ חיצוני (במקרה שלנו heb.php). קובץ זה יעבור על הטקסט שנשלח אליו, ויחליף כל תו באנגלית לתו המקביל לו (במקלדת) בעברית, ולבסוף ידפיס את המחרוזת בעברית.

בואו נביט שוב במשתנה ה-url (שורה 5). אנחנו בעצם פונים לקובץ ה-PHP שלנו ומעבירים לו משתנה GET בשם, textHeb. המתשנה מכיל את הערך של תיבת הטקסט שלנו. אני לא אעבור איתכם על קובץ ה-PHP (אתם מוזמנים להוריד את הקובץ ולהביט בעצמכם דרך הכפתור "קוד" בתחילת המדריך), אבל אני אדגיש שתי שורות חשובות מתוך הקובץ.

1 2	header("Cache-Control: no-cache"); header('Content-Type: text/html; charset=utf-8');

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

זה הכל לקובץ ה-PHP, כמו שאמרנו הקובץ מקבל מחרוזת מלאה בתווים (גם עברית גם אנגלית), כל תו אנגלי נהפך לתו המקביל-מקלדת בעברית שלו ולבסוף מוחזרת המחרוזת בעברית בלבד. כעת אנחנו צריכים לעדכן את תיבת הטקסט, הפעולה הזו מתרחשת תחת המתשנה success.

חזרנו לקוד ה-JS שלנו, כעת בואו נראה מה מופיע תחת המשתנה success:

1
2
3
4
5
6
7
8
9
10
11
12

success:
function(text){
textLen = $("textarea[name=textHeb]").val().length;
if(text.length == textLen)
{
$("textarea[name=textHeb]").val(text);
}
else if($("textarea[name=textHeb]").val().charAt(textLen-1) == ' ' && text.length+1 == textLen)
{
$("textarea[name=textHeb]").val(text+' ');
}
}

בתוך המשתנה success יצרנו פונקציה עם משתנה text. המתשנה text הוא למעשה הערך שמוחזר (הודפס) בקובץ ה-PHP.
למעשה יכלנו לקצר את כל הקוד ולכתוב רק:

1
2
3
4

success:
function(text){
$("textarea[name=textHeb]").val(text);
}

הקוד הנ"ל למעשה מכניס את הערך המוחזר מקובץ ה-PHP לתוך תיבת הטקסט שלנו. הבעיה היא שאנחנו נתקלים בשני באגים. הבאג הראשון מופיע כאשר המשתמש מקליד טקסט והשרת מחזיר תגובה בזמן ההקלדה ומוחק לו את סוף המשפט שהוא כתב (פעולת המרת האנגלית בעברית לוקחת זמן ובנתיים המשתמש יכול להכניס עוד תווים). לשם כך העברתי את המחרוזת החוזרת בדיקה לראות אם אורך המחרוזת שווה לאורך תיבת הטקסט שלנו, ורק במקרה כזה יתבצע ההחלפה (שורה 4).
הבאג השני הוא שכאשר התו האחרון שנשלח המחרוזת הוא סימן רווח, התו יעלם מכיוון ולא ניתן לשלוח רווחים בוסף מחרוזות. במקרה כזה אני שוב מוודא שאורך תיבת הטקסט שווה לאורך המחרוזת שחזרה מהשרת (+1) ומעדכן את תיבת הטקסט במחרוזת המוחזרת + סימן רווח.

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

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

‫שימוש בפונטים בלתי רגילים, הפעם: cufon‬

‫אורן רוט‬ — Sun, 20 Sep 2009 18:44:11 +0000

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

<קוד>

האמת שהמאמר הזה היה צריך להיות על טכניקה אחרת, FLIR, גם טכניקה שמחליפה כותרות בתמונות, כמו בדוגמא הזאת:

איזה כיף לכתוב בכל פונט שמתחשק לי.

הסיבה שבחרתי להציג לכם דווקא את cufon ולא את FLIR היא מכיוון ו-cufon לא תלויה בשפת שרת (PHP במקרה של FLIR), והמימוש שלה ממש ממש פשוט. (לא התנסיתי בFLIR אבל אתם מוזמנים לספר לי בתגובות).

עכשיו לפני שניגש לעניין ואני אתחיל להסביר לכם איך מממשים את cufon, אני אציג לכם את היתרונות והחסרונות של טכניקה זו:

יתרונות

מימוש פשוט מאוד (הרבה יותר פשוט מ-sIFR למשל)
טכניקה שלא תלויה בצד שרת (בניגוד לFLIR) או בפלאש (בניגוד ל-sIFR)
פועלת במהירות

חסרונות

תלויה ב-javascript
אי אפשר לסמן טקסט (חסרון משמעותי לפעמים)
אין אפשרות להציג צבע שונה כאשר העכבר נמצא על הטקטס

אני רוצה להוסיף על החסרון הראשון שאם הדפדפן לא מפעיל JS אז לא יוצג הפונט המיוחד, ויוצג הטקסט הרגיל שזה לא כל-כך נורא.

טוב עכשיו אחרי שעברנו על כל היתרונות והחסרונות של cufon, נעבור לאופן המימוש.

הורדת הקבצים

כמו תמיד נתחיל בהורדת הקבצים, ניכנס לאתר cufon ונוריד את קובץ ה-JS שנמצא תחת הכפתור "download" (או ישירות מהלינק הזה)

כעת אנחנו צריכים להמיר את הפונט אותו אנו רוצים להציג בקובץ JS נוסף, את הפעולה הזאת עושים דרך אתר cufon. ההסבר המלא בסרטון הבא:

כעת שסיימנו ויצרנו את קובץ ה-JS לפונט שלנו, כל מה שנותר לנו הוא להגדיר בקובץ הHTML הרצוי להשתמש בפונט המיוחד.

אתחול הגדרות לקובץ

דבר ראשון שנעשה הוא להכניס בין תגיות ה-HEAD קישור לקבצי ה-JS שהורדנו:

1 2	<script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/example-Font_500.font.js"></script>

הקובץ השני צריך להיות לפי השם של הפונט שאתם בחרתם.

כעת נוסיף קוד JS נוסף על מנת להפעיל את cufon:

1
2
3
4
5

במקום h3 רשמו את שם האלמנט בו אתם רוצים להחיל את הפונט המיוחד.

ככה צריך להיראות בסופו של דבר הHTML שלכם:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
...
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/BN_Traktor_400.font.js"></script>
<script type="text/javascript">
$(function(){
Cufon.replace('h3');
});
</script>
...
</head>
<body>
...
<h3>אני פסקה עם פונט מיוחד</h3>
...
</body>
</html>

כל זה טוב ויפה אבל אם תנסו את זה בעצמכם תראו שיש בעיה חמורה, אם כי לא מפתיעה- כל הטקסט בעברית מהופך :/

אל דאגה תרתי ברשת אחר פתרון ובבלוג של האתר ספסל מצאתי פתרון לבעיית העברית (תודות לשירה).

עברית שפה קשה

הפתרון הוא דיי פשוט, מריצים סקריפט (cufonRTL.js) שעובר על המחרוזת בתוך האובייקט הנבחר (בדוגמא שלנו H3), הסקריפט מוסיף למחרוזת תגית והופכת את כיוון (Direction) הטקסט למשמאל-לימין. אח"כ הסקריפט מפריד בין כל התווים במחרוזת הופך את הסדר שלהם ומחבר בחזרה, אתם מוזמנים לצפות בקוד ולהבין.

הסקריפט הזה נתמך ע"י jQuery ולכן צריך גם להוסיף את הספרייה הזו לHTML שלנו. היתרון בהוספת jQuery היא שכעת במקום שכתבנו H3 אנחנו יכולים לכתוב כל אלמנט לפי הסינטקס של jQuery. (לדוגמא: H3.niceFont יבחר את כל אלמנטי ה-H3 בעלי class ששמו 'niceFont').

וכמובן אנחנו צריכים להוסיף קוד שיפעיל את הסקריפט שלנו, בואו נראה איך יראה הHTML שלנו אחרי השינויים להצגת עברית:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/CufonRTL.js"></script>
<script type="text/javascript" src="js/BN_Traktor_400.font.js"></script>
<script type="text/javascript">
$(function(){
Cufon.replace('h3');
CufonRTL.RTL('h3');
});
</script>
...
</head>
<body>
...
<h3>אני פסקה עם פונט מיוחד שעובד גם בעברית.</h3>
...
</body>
</html>

שתי התוספות הראשונה הן קישור לקבצי ה-JS של jQuery והיפוך העברית (שורות 4 ו-6 בהתאמה). התוספת השלישית היא הפעלה של סקריפט ההיפוך (שורה 11) שימו לב שהיא מקבלת כפרמטר את אותה מחרוזת (בדוגמא שלנו H3) ש-cufon מקבל.

זהו זה, זה עובד!

מה חשוב לזכור?

למרות שפתרנו את בעיית העברית, הסקריפט לא יעבוד טוב עם מחרוזת מרובות שורות ולכן אני ממליץ להשתמש בסקריפט רק לכותרות. בנוסף שימוש בסקריפט על טקסטים גדולים יגרום לטעינת הדף להיות איטית יותר, אז תשתמשו בפונטים מיוחדים בכותרות והסקריפט יעבוד כמו שצריך.

דרך אגב, אם שמתם לב או לא כל הכותרות המשניות במאמר הזה הוחלפו באמצעות cufon.

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

‫תפריט עיני דג – jqDock‬

‫אורן רוט‬ — Sun, 13 Sep 2009 11:24:12 +0000

לאחרונה הוספתי לאתר שלי רשימת כפתורי שיתוף בסוף כל פוסט (אתם מוזמנים לראות למטה), כפתורים שאפשר באמצעותם לפרסם מודעות בפייסבוק, טוויטר, להדפיס ולשלוח את הפוסט במייל.
עכשיו למה אני מספר לכם את זה? כי הוספתי גם אפקט ממש מגניב לכפתורים האלה – שעוברים עם העכבר על כל אייקון הוא גדל וכשמורידים את העכבר האייקון קטן חזרה לגודל המקורי.
האפקט הזה מופעל באמצעות ספריית ה-javascript המוכרת jquery וספרייה javascript נוספת בשם: jqDock.

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

<דוגמא><קוד>

חשוב להבין את דרך הפעולה של jqDock. מה ש-jqDock עושה הוא דבר פשוט, היא מוסיפה אירוע של mouseOver לכל תמונה (בין אם היא קישור או לא קישור) בתוך ה-Div הרלוונטי, וכאשר מעבירים את העכבר על התמונה, מימדי התמונה גדלים וכן התמונה מתחלפת לתמונה גדולה יותר, וזאת בשביל למנוע פיקסול של התמונה. צפו בדוגמא:

כמובן שאנחנו בהמשך נשתמש באותה תמונה רק בגדלים שונים, אך הדוגמא שהוצגה כאן בהחלט מבהירה את פעולה של jqDock.

jqDock כמובן שומרת גם על יישור האלמנטים בתוך הDiv.

איך גורמים לזה לפעול?

ובכן,דבר ראשון יוצרים div עם ID יחודי ובתוכו מכניסים את התמונות שיכילו את תפריט ה-jqDock.

1
2
3
4
5
6
7

שימו לב שאפשר לשלב גם לינקים וגם תמונות פשוטות ללא לינקים כלל.

בואו נביט בקוד, אנחנו רואים שבאלמנט התמונה תחת המאפיין alt ישנו מחרוזת שמצביעה על תמונה, זהו קישור לתמונה הגדולה שתתחלף כאשר נעבור עם העכבר על האייקון. באלמנט התמונה השנייה לא מצויין מאפיין alt ולכן jqDock פשוט יגדיל את התמונה הקיימת.

כעת נעבור להוספת ספריות ה-JS (את הקוד הבא רצוי להוסיף בין תגיות הhead):

1 2	<script type='text/javascript' src='jquery-1.2.3.min.js'></script> <script type='text/javascript' src='jquery.jqDock.js'></script>

הקישור לספריות צריך להיות קישור למיקום האמיתי של הספריות, כלומר, לאן שהעלאתם אותם בשרת שלכם.

ולסיום הקוד שמאתחל את jqDock:

1
2
3

$(document).ready(function(){
$('#menu').jqDock(options);
});

המילה menu# פונה לאלמנט ה-DIV שלנו, וכך הוא מבצע את האפקט על כל התמונות שה-Div מכיל. options הוא אופציונלי והוא בעצם אחראי לברור בין האפשרויות ש-jqDock מציעה, לבנתיים לא נוסיף אותו ונשאיר סוגריים ריקים. זהו התפריט מוכן.

במאמר הבא אני אסביר לכם על האופציות ש-jqDock מציעה.

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

‫העלאת תמונה בלחיצה אחת fancyUpload‬

‫אורן רוט‬ — Wed, 09 Sep 2009 08:39:16 +0000

חלק בלתי נפרד מעולם הטפסים הוא האובייקט input מסוג file. מטרתו של אובייקט זה הוא לעלות קבצים מצד הלקוח לצד השרת.
למי שעדיין לא הבין על מה אני מדבר:

הבעיה באובייקט הזה שהוא מאוד מיושן והיכולות שלו מאוד מוגבלות.
במדריך הבא אני אסביר לכם כיצד להחליף את אובייקט העלאת הקבצים באלמנט חכם יותר שמסוגל לעלות כמה קבצים בו זמנית ולתת אינפורמציה בזמן אמת להתקדמות ההעלאה.

<דוגמא><קוד>

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

עד היום כולנו השתמשנו באובייקט המיושן input->file מתוך הDOM. החסרונות העיקריים של אובייקט זה הם:

אפשרות להעלאה אחת כל פעם
לא נותן אינדיקציה להתקדמות ההעלאה
אין אפשרות לסנן את סוגי הקבצים אותם אנחנו מעוניינים לקבל

הפתרון שמוצע במאמר זה עולה על החסרונות של האובייקט ה-file המיושן ונותן תחליף שמשלב את ספריית הגאווה-סקריפט mootools ואובייקט פלאש.

פתרון אלגנטי

הפתרון נלקח מתוך האתר digitarald.de בעצם מה שעושים הוא לקחת את הטופס הרגיל עם אובייקט הישן ולהחליף אותו בפלאש, עם שילוב של כמה סקריפטים בגאווה-סקריפט – זה עושה את העבודה.

אני אתן כאן דוגמא למערכת שמעלה תמונות אבל אתם יכולים לקחת את הקוד ולהתאים אותו לכל מטרה.

על מנת להתחיל לעבוד הורידו את קובץ ה-rar מתוך הכפתור "קוד" שנמצא בראש המאמר (כמובן שאתם יכולים לראות את התוצאה הסופית בכפתור "דוגמא").

חלצו את הקבצים מקובץ ה-rar ותקבלו 4 תיקיות וקובץ html אחד.

התיקיות:

assets - תקיית התמונות
css – מכיל את קובץ style.css
server – מכיל את קוד הPHP וקובץ Log ששומר בתוכו לוג לכל העלאה
source – מכיל את כל קבצי הJS ובנוסף קובץ פלאש שעתיד להחליף את אובייקט ה-file

טוב עכשיו אחרי שעשינו סקירה מהירה על מה יש לנו נעבור לתכלס

מה עושים?

1. מעלים את כל הקבצים לשרת

2. נותנים הרשאת כתיבה (666) לקובץ הלוג (server->script.log)

3. עורכים את קובץ script.php מתיקיית server

טוב שני שלבים הראשונים ברורים ולכן נעבור לשלב השלישי-

פתחתם את קובץ script.php בתוכנת העריכה האהובה עליכם (אני אוהב את ++notepad, קלה ונוחה), מצאתם את השורות האלה (מתחיל בשורה 115):

1 2	if (!$error && !move_uploaded_file($_FILES['Filedata']['tmp_name'],'../images/' .$_FILES['Filedata']['name'])) { $error = 'בעיה בהעלאה לשרת';}

מה שבעצם הקוד הזה עושה הוא, לאחר כל הבדיקות הוא רואה שאין error ואז הוא משתמש בפונקצייה move_uploaded_file של PHP.

הפונקציה של php מקבלת שתי פרמטרים. הראשון, מיקום הקובץ הזמני (לאחר שעושים העלאה לקובץ באופן אוטומטי הוא ממומקם בנתיב זמני), אין טעם לשנות אותו. הפרמטר השני, שאותו אתם צריכים לערוך, הוא לאן הקובץ יועתק בשרת שלכם. אני בחרתי את תיקיית images שנמצאת בתיקייה הראשית שלי. כמובן שאני משרשר לפרמטר השני את שם הקובץ וכך הוא ישמר בתיקייה images עם שם הקובץ המקורי.

שימו לב! המיקום שאתם נותנים בפרמטר השני הוא מיקום יחסי לקובץ הPHP! ולא לקובץ הhtml.

זהו זה, עכשיו מעלה הקבצים המשכולל שלכם עובד. אתם מוזמנים לשחק עוד בקובץ script.php גום בקובץ script.js וכך לשנות את ההגדרות לצרכים שלכם.

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

‫Lightwindow – הוראות שימוש (המדריך המלא)‬

‫אורן רוט‬ — Thu, 19 Mar 2009 12:29:09 +0000

במאמר הקודם הסברתי לכם על טכנלוגיית 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

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="תמונה מדליקה">/></a>

2. הוסיפו תכונת caption על מנת להוסיף כותרת לתמונתכם בחלון ה-lightwindow. (אופציונלי)

3. הוסיפו תכונת author על מנת להוסיף זכויות יוצרים לתמונתכם בחלון ה-lightwindow. (אופציונלי)

4. על מנת ליצור קשר בין תמונות וליצור גלריה אחידה (ניתן יהיה להעביר קדימה אחורה בין התמונות), יש להוסיף לכל התמונות ששייכים לאותה גלריה תכונת "[rel="ALBUM[GALLERY.

*במקום המילים ALBUM וGALLERY תתנו שמות זהים לכל התמונות שאתם רוצים שיהיו שייכים לאותה קבוצה. במידה ויש לכם כמה גלריות בעמוד יחיד lightwindow מוסיף כפתור בתוך חלון ה-lightwindow שמקשר בין כל הגלריות בדף – נסו ותראו.

לדוגמא הקוד:

1
2
3
4

ולתוצאה:

<תוצאה>

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

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

‫אורן רוט‬ — Sun, 22 Feb 2009 09:59:55 +0000

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

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

1
2
3

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

חסרון

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

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