פרטי מדריך:
- קטגוריה: jQuery
- רמת קושי: מתחילים
- זמן ביצוע: 5-10 דקות
ברוכים הבאים, היום מדריך קצר והדגמה של jQuery בפעולה בו נלמד איך להכין גלריית סרטוני YouTube דינמית בעזרת jQuery ואיך ליצור תמונות סרטון מוקטנות. המדריך כולו צולם כסרטון הדרכה בו אני כותב את הקוד ביחד אתכם, עושים טסטים ומבינים איך הכל עובד.
היעד הסופי
הרעיון הוא להציע דף מדריכים דינמי חכם וכזה שלא כולל בתוכו הטמעה של עשרות סרטוני וידאו מה שיהפוך אותו למעיק בעין.
מבנה נכון עוזר להעביר את המסר
דף ארוך מידי מסיח את הדעת מהנושא העיקרי של אותו הדף ולכן צריך פתרון אלגנטי יותר שיעזור להציג את המידע בצורה נוחה לעין. ראו דוגמה בדף: מדריכי וורדפרס למתחילים
סרטון הדרכה: איך בונים גלריית סרטוני Youtube דינמית
* זכרו לבחור HD
הנה הדגמה של התוצאה הסופית
* בהדגמה זאת אני משתמש בסרטונים שונים אך אותו הקוד
להלן הדגמה חיה של הסקריפט עליו דיברנו בסרטון. בהדגמה זאת אני משתמש בסרטונים אחרים מאשר אלו בהם השתמשתי בסרטון ההדרכה כיוון שאני רוצה להשוויץ בסרטונים אחרים ומדריכים אחרים שהכנו לאחרונה אבל הרעיון הוא דומה. נסו את ההדגמה על ידי לחיצה על אחת התמונות המוקטנות.
לומדים המון בתהליך הבנייה
אני מקווה שהצלחתי להעביר את הרעיון של Selectors כלומר מזהים של אלמנטים. ההבנה כיצד jQuery מתייחסת למזהים של אלמנטים כמו במקרה של המדריך הזה תמונות מוקטנות והiFrame עצמו מאפשרת לנו לנצל את היכולות של jQuery בצורה יעילה יותר ובקלות!
אני מקווה שאהבתם ושזכינו ללייק מכם, אם יש שאלות נוספות אתם מוזמנים להשתמש בטופס התגובות ונשמח לעזור.
מיקי 15 באוקטובר 2014
אחלה מדריך שגיב.
מאוד אהבתי ולמדתי הרבה מאוד גם מעבר לנושא עצמו.
(הערה קטנה: צריך לצמצם בתנועות עכבר – זה מעצבן ת-עין) 😉
שגיב SEO 15 באוקטובר 2014
איזה תותח אתה מיקי,
בדיוק שסיימתי להכין אותו וצפיתי בו חשבתי אותו הדבר בדיוק.
מאבק פנימי להשתיק את היד שנעה לבד בזמן שאני מדבר 😉
קיבלתי בהחלט.
רוני 15 באוקטובר 2014
מנשמע שגיב?
תודה רבה על המדריך. אני לא מוצא איפה יש קישור להורדת הסקריפט כולו
שגיב SEO 15 באוקטובר 2014
צודק רוני, אני צריך להוסיף.
כמה שעות אני אתפנה ואשים כאן קישור
אלכס פינסקר 15 באוקטובר 2014
נחמד מאוד שגיב.
מדריך רהוט וענייני.
אפשר להוסיף איזשהו אפקט מעבר לשינוי הסרטון? נגיד FADE?
שגיב SEO 15 באוקטובר 2014
תודה אלכס,
בטח… תחליף את השורה הבא בקוד:
$('#target').attr('src', newurl);בקוד:
$('#target').fadeOut();
$('#target').attr('src', newurl);
$('#target').fadeIn();
עוד אלטרנטיבה:
$('#target').slideUp();
$('#target').attr('src', newurl);
$('#target').slideDown();
נחמד נכון?
מקווה שזה עוזר..
נאור 17 ביוני 2017
אחלה של סרטון,
בכלל לא הפריעו לי תזוזות העכבר 🙂