ThickBox לתצוגת תמונות וחלונות פופ-אפ

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


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

לחצו עלי!

ישנן מספר פתרונות ברשת שהידוע ביניהם הוא lightbox שנשען על Prototype ויש לו גם גרסה ל-jQuery. אך פתרון יותר טוב שמצאתי הוא פלאגין נהדר בשם ThickBox שעובד יחד עם jQuery ומסוגל לטפל היטב גם ב-iframe. היישום שלו קל מאד ולא צריך כלל ידע תכנותי כלשהו.

איך זה עובד?

התקנת ThickBox

על מנת 'להתקין' את Thickbox יש ראשית להוריד את jQuery, קובץ ה-js של Thickbox, קובץ ה-css של ThickBox וכן animated gif כלשהו של 'הורדה'. את jQuery ניתן להוריד כאן ואת שלושת הקבצים של ThickBox אפשר להוריד באתר שלהם. ועל מנת לא להכריח אתכם להתחיל לגלוש שם – הנה קישור ל-CSS, קישור ל-ThickBox.js וקישור לתמונה.

יש להעלות את כל הקבצים לתיקיה כלשהי באתר האינטרנט שלכם.

אחרי כן יש לפתוח את ThickBox.js באמצעות עורך כלשהו (עדיף Visual Studio אך אפשר להשתמש בכל עורך חינמי כלשהו). למצוא את השורה:


var tb_pathToImage = "images/loadingAnimation.gif";

ולהחליף את images/loadingAnimation.gif בקישור לתמונה שלכם, כמו למשל :


var tb_pathToImage = "https://internet-israel.com/internet_files/thickbox/loadingAnimation.gif";

בעמוד שבו אתם רוצים להפעיל את ThickBox יש לכלול את שתי התגיות הבאות ב-HEAD:


<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

כאשר ה-path-to-file/ הוא כמובן הקישור לתיקיה שלכם.

זהו, ההתקנה נגמרה! עכשיו צריך לדעת מה לעשות איתה:

הוספת ThickBox לתמונות

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


<a class="thickbox" href="https://internet-israel.com/internet_files/thickbox/image.jpg">לחצו עלי!</a>

הוספת ThickBox ל-iframe

גם כאן זה פשוט, יוצרים קישור כלשהו ומוסיפים class="thickbox אחרי כן יש להוסיף את הקישור ובסוף הקישור יש להוסיף כמה פרמטרים – גובה ורוחב.


?KeepThis=true&TB_iframe=true&height=400&width=600

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

לחצו עלי ליצירת PopUp!

וככה זה נראה בקוד:


לחצו עלי ליצירת PopUp!

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

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

עבודה עם GPT למתכנתים

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

גלילה לראש העמוד