post-162 Lightbox 2 - מצגת תמונות

אהלן חבר'ה,
היום נדבר על אפליקצייה המאפשרת לנו להציג תמונות באתר בגודל מלא בצורה יפה ומקצועית.
שם האפליקציה הוא Lightbox, אשר פותח ע"י לוקאש ד'קאר.

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

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

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

אז איך משתמשים?

  1. מורידים את הקבצים מפה. [ Lightbox (73) ]
  2. חלצו את הקבצים מהקובץ ZIP ע"י שימוש בתוכנה WinZip או כל תוכנה אחרת העוסקת בכיווץ קבצים.
  3. העתיקו את התיקיות לתיקייה הראשית של האתר שלכם.
  4. העתיקו את השורות הבאות לדף הראשי של האתר: ( בין התגיות <head> … </head> )

    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

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

    rel='lightbox'

    במידה ואתם מעוניינים במצגת של תמונות הוסיפו את הקוד הבא:

    6. rel='lightbox[SLIDE]'

וזהו, יש לכם את Lightbox 2 מותקן אצלכם באתר!

במידה ואתם מעוניינים להוסיף את Lightbox 2 לבלוג המבוסס על Wordpress, הורידו את התוסף מפה.

יום רביעי, אוגוסט 6th, 2008 בשעה 0:29
קטגוריות: בניית אתרים, כללי, מדריכים, שירותים חינמיים

15 תגובות ל-“Lightbox 2 - מצגת תמונות”

השאר תגובה