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.

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

פיתוח ב-JavaScript

Axios interceptors

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

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

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

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