אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » jQuery Scripts » ThickBox לתצוגת תמונות וחלונות פופ-אפ

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

רן בר-זיק מרץ 28, 2009 12:10 am אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.


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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ספרית jQuery סקריפטים פתרונות
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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