גלריית סרטוני Youtube בעזרת jQuery

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

היעד הסופי

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

מבנה נכון עוזר להעביר את המסר

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

סרטון הדרכה: איך בונים גלריית סרטוני Youtube דינמית

* זכרו לבחור HD

הנה הדגמה של התוצאה הסופית

* בהדגמה זאת אני משתמש בסרטונים שונים אך אותו הקוד

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

לומדים המון בתהליך הבנייה

אני מקווה שהצלחתי להעביר את הרעיון של Selectors כלומר מזהים של אלמנטים. ההבנה כיצד jQuery מתייחסת למזהים של אלמנטים כמו במקרה של המדריך הזה תמונות מוקטנות והiFrame עצמו מאפשרת לנו לנצל את היכולות של jQuery בצורה יעילה יותר ובקלות!

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

  • אהבתם? שתפו!