בונה אתר וצריך לבנות גלרייה

[^DaGoN^]

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

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

[Judas Iscariot]

הנה מה שאני עשיתי בפרוייקט בית ספר, אם יש לך שאלות, אל תהסס לשאולן

<script language="javascript">
i = 1
function nextmuvo()
{
 if (i < 8)
 {
 i = i+1
 muvo.src = "IMAGES/muvo/"+i+".jpg"
 }
}

function prevmuvo()
{
 if (i > 1)
 {
 i = i-1
 muvo.src = "IMAGES/muvo/"+i+".jpg"
 }

}

function nextarchos()
{
 if (i < 8)
 {
 i = i+1
 Archos.src = "IMAGES/archos/"+i+".jpg"
 }
}

function prevarchos()
{
 if (i > 1)
 {
 i = i-1
 Archos.src = "IMAGES/archos/"+i+".jpg"
 }

}

function newwindow(page)
{
 window.open(page,'large_pic','status=no');
}

</script>

<td><img name="archos" src="IMAGES/archos/1.jpg" width="250" height="250" onClick="newwindow('IMAGES/archos/'+i+'.jpg')"></td>
<td><img name="muvo" src="IMAGES/muvo/1.jpg" width="250" height="250" onClick="newwindow('IMAGES/muvo/'+i+'.jpg')"></td>
</tr>

<tr>
 <td align="center"><button value="next" onClick="nextarchos()"> <--- הבא </button> <button value="next" onClick="prevarchos()" align=> הקודם ---> </button></td>
<td align="center"><button value="next" onClick="nextmuvo()">  <--- הבא </button>  <button value="next" onClick="prevmuvo()"> הקודם ---> </button></td>

[LazyBoy]

פוטושופ יכולה לבנות לך גלריות כולל עמודי הHTML.

או שאם אתה מוכן להשקיע כסף (20$) יש אחלה פיתרון שבעולם.

[^DaGoN^]

אממ אתה יכול להסביר תקוד? מה זה Archos ומה זה muvo? חח

[Ghosthunter]

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

כדי להציג למטה את התמונות אתה יכול:

1) ליצור DIV עם SCROLLER ופשוט פעם אחת בעזרת JS להדפיס הכל.

2) כל פעם להדפיס 3 תמונות - התמונה הנוכחית, התמונה הבאה והקודמת. כל פעם שאתה עובד תמונה, אתה משנה גם את הSRC של התמונות שלמטה, בנוסף על שינוי התמונה הגדולה.

[Judas Iscariot]

^

מה לא בסדר באיך שאני עשיתי את זה?

[Ghosthunter]

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

[stone cold]

אני בניתי גלריה בHTML אם כל הדברים שאמרתה

אני נעזרתי בגוליב אבל עשיתי את רוב העבודה בקוד פשוט

אם זה לא הרבה תמונות עדיף לך לדעתי לעשות ידנית שתוכל לשנות בקלות במיקרה הצורך

אני עשיתי 30X8 תמונות וזה לקח הרבה זמן ואני צריך לעשות עוד תיקונים אבל לפחות למדתי הרבה על איך ליבנות גלריות נוחות למישתמש

[^DaGoN^]

איש קריות..? עדיין לא הבנתי תקוד.. \=

[Judas Iscariot]

איך שעשיתי ישנן בעצם 2 גלריות ולא אחת.

האחת נקראת muvo והשנייה Archos.

לכן הפונקציה של prevmuvo בעצם מראה את התמונה הקודמת בגלריית muvo והפונקציה nextmuvo מראה את התמונה הבאה בגלריית muvo, אותו דבר לגבי גלריית Archos.

אני אסביר קצת יותר טוב את הקוד, על גלריה אחת אבל(כי זה מה שאתה צריך לפי הבנתי):

לקחתי אובייקט תמונה(<img>) וקראתי לו muvo.

עכשיו, התמונה עצמה שהוא מחפש(src=) הינה המשתנה i שמוגדר בJavaScript כ1(התמונה הראשונה, כלומר מה שיקרה הוא שכאשר העמוד יעלה התמונה הראשונה תהיה זו המוצגת).

עכשיו, מתחת לאובייקט התמונה יש לי שני כפתורים, next וprev שכל אחד מהם בעצם מפעיל את הפונקציה המתאימה לו אשר מציגה את התמונה הבאה/הקודמת בהתאם.

כמו כן ישנה פונקציה שכאשר תלחץ על התמונה יופיע חלון pop up עם התמונה בגדול(newwindow).

הפונקציות:

פונקצית "תמונה הבאה":

הפונקציה פועלת רק אם i קטן מן המספר הכולל של התמונות בגלריה(במקרה שלי, 8) על מנת שלא תוכל לעשות תמונה הבאה אם הגעת לזו האחרונה.. אחרי שהפונקציה בודקת שהתנאי מתקיים היא פשוט מעלה את i באחד וכך גם מוצגת התמונה הבאה, לכן תמונה 1 "תהפוך" לתמונה 2.

פונקצית "התמונה הקודמת":

דומה מאוד בעיקרון לפונקצית התמונה הבאה, רק שהיא מתקיימת רק כאשר i גדול מ1(עוד פעם, הרי אין לך תמונה קודמת מאחד, ואם התנאי לא היה קיים הוא היה מוביל אותך לתמונה 0, מינוס 1 וכן הלאה) ובמקום להוסיף 1 לערך של i היא מורידה 1 מן הערך של i ובכך מציגה את התמונה הקודמת, לכן מתמונה 2 תעבור לתמונה 1..

ברור?

[sdfzxc]

http://thefilebrowser.com/

עם קוד (אני מניח פשוט?) שאולי אפשר ללמוד ממנו כמה דברים.