איך לבנות ולהוסיף כרטיס גירוד לאתר אינטרנט עם jQuery

שתף בפייסבוק

טוויטר

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

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

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

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

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

שתף בפייסבוק

טוויטר