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