8 באוק׳ 2012

גלריית תמונות ב CSS בלבד! ע"י שימוש בפסאודו קלאס target

CSS Image Gallery - no JS - by using pseudo class target
כבר די הרבה זמן אני נתקל באפשריות שימוש בפסאודו קלאס מסוג target. הפסאודו הזה מסמן תגית שפונים אליה מתגית A אחרת. ניתן לפנות לכל תגית שיש לה ID. כביכול נראה דבר מאוד פשוט, אך לפסאודו קלאס הזה יש הרבה כח, הוא בעצם מאפשר לך לתת לתגית מסוימת ערך שונה מלאחרים בדף. בחשיבה תכנותית זה כמו משתנה שאני יכול לגשת אליו (מי מסומן), ולהשתמש בו כדי להציג תגית מסוימת אחרת. רק שה"משתנה" פה יהיה ב CSS!
לא מאמינים! אז הנה - דוגמא לגלריית CSS ללא JS

גיריתי אותכם מספיק, אז בואו נתחיל!


מי שלא מכיר מהם פסאודו קלאס/אלמנט מוזמן לקרוא את הפוסט-"הכל על פסאודו Pseudo Class\Element ב CSS"

לצורך הדוגמא ניצור רשימת לינקים, כל לינק יפנה ל ID אחר, בנוסף ניצור רשימה נוספת שהיא תהיה רשימה של האייטמים עם התוכן המלא, לכל אחד מהם ניתן ID בהתאם להפניית הלינק.
בנוסף, בתכנים הוספתי עוד אייטם שהוא ישמש אותנו כברירת מחדל.
HTML - syntax
<ul class="menu">
  <li><a href="#part1">הצג תוכן1</a></li>
  <li><a href="#part2">הצג תוכן2</a></li>
  <li><a href="#part3">הצג תוכן3</a></li>
  <li><a href="#part4">הצג תוכן4</a></li>
  <li><a href="#part5">הצג תוכן5</a></li>
</ul>
<ul class="content">
  <li id="part1">זה טקסט של תוכן1</li>
  <li id="part2">זה טקסט של תוכן2</li>
  <li id="part3">זה טקסט של תוכן3</li>
  <li id="part4">זה טקסט של תוכן4</li>
  <li id="part5">זה טקסט של תוכן5</li>
  <li class="default">באייטם הזה נשתמש כברירת מחדל</li>
</ul>
עד פה יצרנו 5 לינקים, ובנוסף 6 containerים של content, אחד לכל אחד, ועוד אחד דיפולטי שישמש אותנו למצב שהמשתמש עוד לא לחץ על אחד מהלינקים.


נכיל עיצוב קל לתפריט של האייטמים, ובנוסף נסתיר את כל האייטמים של content.
CSS - syntax
.menu li{
   float:left;
   margin-right:10px;
}
.content li{ display:none; }

עד פה הכל פשוט. במידה וכתבתם הכל נכון, כפי שרשום בדוגמא, אתם תראו רק רשימה של לינקים.
עכשיו מה שנשאר הוא לקבוע שמה שנלחץ בתפריט יציג לנו תוכן בהתאמה. וזה גם מאוד מאוד פשוט, אנחנו כולה צריכים להוסיף שורת CSS נוספת.
CSS - syntax
.content li:target{display:block;}

מה שהוספתי ב CSS אומר, תציג לי תגית LI שקיבלה הפנייה מלינק של התפריט. המצב הדיפולטי של LI של התכנים(content) הוא מוסתר, מה שאומר שרק תגית LI (של content) שהתפריט שלה נלחץ מוצגת.

ממש פשוט! יצרנו בצורה פשוטה תפריט שמציג ומסתיר תכנים ללא שורת JS אחת!.

מה שנשאר, הוא לטפל במה יוצג במצב default,  וגם זה לא מסובך, נצטרך להוסיף את שני שורות הקוד האלו ל CSS שלנו.
CSS - syntax
.content li.default{display:block;}
.content li:target ~ li.default{display:none;}
הסבר
  • השורה הראשונה בCSS, מציינת שהתיבת תוכן (מה-content) השישית שלנו ב HTML, שהכנו כבר בהתחלה למצב default, ולא השתמשנו בא עד עכשיו, תופיע גם ששום דבר לא נלחץ.
  • השורה השנייה ב CSS, מציינת שבמידה ואחד האחים הקודמים של אלמנט default (מה-content) , נמצא במצב target, אז יש להסתיר את אלמנט default.
אז הנה מה שאנחנו מקבלים מכל הקוד שכתבנו - דוגמא תפריטים שפותחים את התוכן הרלונטי


טוב הבטחתי גלריית תמונות, אז בגדול תחשבו שמה שנשאר לכם, זה להחליף את תוכן הלינקים בתפריטים בתמונות קטנות, את התכנים בתמונות גדולות(את התוכן הדיפולטי בתמונה הראשונה) ויש לכם גלריה, וזהוא!

רוצים לראות דוגמא מוכנה של גלריה בצורה הזו! אז הנה בבקשה, דוגמא לגלריית תמונות בCSS בלבד שאני הכנתי.

* דוגמא נוספת של אותה גלריה רק עם fades בין תמונות (ע"י שימוש ב transition)

חשוב לציין! - פסאודו קלאסס target, הוא פיצר CSS3, ונתמך רק בדפדפנים חדשים, כלומר מאקספלורר 9 ,ושאר הדפדפנים.

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

תודה,
אלעד שכטר

מאמרים נוספים שקשורים ל פוסט הזה