אתר מעוצב

תפעול הגלריה

יש בלי סוף גלריות לשימוש חופשי המבוססות על jquery. יש עקרונית שתי שיטות פופולריות : גלריה המבוססת על slider כמו הגלריה שלנו או גלריה המבוססת על lightbox שבה התמונה מופיע על רקע של טמבניילס מוחשכים.

קבצים להורדה

את הגלריה שלנו הורדתי מכאן http://galleria.io/docs/getting_started/beginners_guide/

לאחר שמורידים את קובץ ה ZIP ופותחים אותו צריך להעביר לספריה שקבעתם את הקובץ galleria-1.3.5.min.js ולהעביר בנוסף לאותה ספריה את כל הקבצים שמופיעים בספריה classic שנמצאת בספריה themes באותו קובץ ZIP.
  • galleria.classic.css
  • galleria.classic.js
  • galleria.classic.min.js
  • classic-map.png
לצורך הפעלת jQuery יש להוריד את את הקובץ העדכני מהדף jquery.com/download/

בדף שתגיעו אליו יש כמה גירסאות של jQuery ומומלץ שתורידו את הגירסה בקישור ששמו (נכון ליוני 2014) "Download the compressed, production jQuery 2.1.1" הקישור פותח בדפדפן קובץ TEXT, תעתיקו אותו לדף חדש ב-notepad++ ותשמרו אותו תחת השם jquery.js

עד כה הכנסתם לספריה שלכם 6 קבצים וזה מסתבר מספיק.

מה בדף

ב- head תוסיפו לינקים לשני קבצי ז'ווסקריפט

<script src="jquery.js"></script>
<script src="galleria-1.3.5.min.js"></script>

ב- body תוסיפו את התמונות בתוך DIV עם id=galleria

<div id=galleria style="width : 740px ; height : 500px ;" >
<img src="hula.jpg" width="600" height="450" alt="חולה">
<img src="galil.jpg" width="600" height="450" alt="מערכת קשת">
<img src="naharia.jpg" width="600" height="450" alt="סוסים בחוף נהריה">
<img src="debi_amir.jpg" width="600" height="402" alt="">
</div>

ולפני ה- </body> תוסיפו את ההנחיה הנדרשת להפעלת הגלריה
<script>
Galleria.loadTheme('galleria.classic.min.js');
Galleria.run('#galleria');
</script>