בדרופל קיימים פתרונות מצויינים לטיפול בתמונות גדולות אותן אנו רוצים להקטין בעמוד ורק בלחיצה עליהן תגדל התמונה.
הפתרונות הידועים הם Thickbox, Lightbox ועוד כמה המסתיימים ב-"box", המשתמשים ב-javascript, jquery ומתממשקים היטב בדרופל עם אפקט כניסת תמונה.
לאחרונה נתקלתי באחד מהבלוגים שאני קורא ב-Fancyzoom, פתרון פשוט לטיפול בתמונות - לאתר פשוט (בניגוד למערכת דרופל).
אהבתי את הקונספט של Fancyzoom - התמונה גדלה באפקט באופן מיידי בניגוד לפתרונות האחרים והחלטתי ליישם כמודול לדרופל. למטרה זו יצרתי קשר עם המפתח של פרויקט Fancyzoom אך גיליתי שיש כבר מפתח למודול שיממש את Fancyzoom בדרופל. בהתחלה זה נשמע לי טוב, אבל עד מהרה הבנתי שהבחור מתמהמה עם פיתוח המודול כבר זמן רב ואפילו לא פתח פרויקט ב-drupal.org למודול.
אז מודול יהיה בעתיד, ואין טעם לעבוד על אחד במקביל אז החלטתי ליישם את Fancyzoom בדרופל בדרך פשוטה למדי באמצעות העיצוב.
בפניכם מדריך קצרצר ליישום Fancyzoom באתר הדרופל שלכם - המדריך דורש ידע בסיסי במערכת העיצוב, ולחסרי הידע הבסיסי - אמליץ בחום להשתמש במודולים המפותחים שקיימים היום כמו Thickbox שהזכרתי קודם.
לפני המדריך - דוגמא ל-Fancyzoom שתבינו על מה מדובר:
התרשמתם? אוקיי - לעבודה!
1. הורידו את הפרויקט מהאתר של Fancyzoom
2. העלו את התיקייה (לאחר שפרסתם אותה מהקובץ הדחוס) לתיקייה של העיצוב שלכם.
3. הכניסו את הקוד הבא לקובץ template.php:
drupal_add_js(path_to_theme() .'/fancyzoom/js-global/FancyZoom.js', 'theme');
drupal_add_js(path_to_theme() .'/fancyzoom/js-global/FancyZoomHTML.js', 'theme');
4. ערכו את הקובץ page.tpl.php והוסיפו בסוף תגית ה-body כך: (מה לעשות, חייבים להתחשב ב-IE)
<body onload="setupZoom();">
5. ערכו את הקובץ js-global/FancyZoom.js וקבעו את הנתיב המתאים:
var zoomImagesURI = '/images-global/zoom/'; // Location of the zoom and shadow images
יישמתם בהצלחה את fancyzoom, השימוש בו הוא פשוט - כל קישור לתמונה יפתח את התמונה עם אפקט ה-fancyzoom
אם תרצו לסכם:
יתרונות: יישום קל, בעתיד יהיה מודול, אפקט מגניב וייחודי
חסרונות: אין שום התממשקות עם דרופל, יישום לעיצוב בודד, דורש ידע בסיסי במערכת העיצוב
רק הערה אחרונה חשובה - השימוש ב-fancyzoom הוא חינמי לחלוטין לאתרים לא מסחריים! בעלי אתרים מסחריים נדרשים לרכוש רישיון לשימוש במוצר.
