מצאתי קוד באינטרנט ונסיתי להוסיף לו כפתורי next ו-back
http://www.nwo.co.il/webmaster/ligh...ow_gallery.html

קוד המקור שלקחתי עשה את הדבר הבא:
http://tutsvalley.com/demos/modal/

יש לי שתי בעיות עיקריות:
1)כפתור back עובד לי אבל הכפתור next לא...
2)כאשר מחליפים תמונות אז לפני שהתמונה נעלמת רואים כבר את התמונה החדשה והיא זאת שבעצם נעלמת ואז מופיעה שוב
איך מטפלים בזה?

בעיקרון הגדרתי attr לכל תמונה בשם num
אותה אני שולף ואז בתמונה של ה-DIV שאני פותח אני גם משנה שם את ה-num
ואז בכפתורי הבא ואחורה אני מוסיף או מחסר 1 לפי הצורך ואז מכניס את ה-src החדש של התמונה.
את ה-src-ים הגדרתי במערך וכך בעצם לפי המספר אני שולף את מקור התמונה המתאים לפי ה-num שהוספתי או החסרתי.

שורות הפקודות של כפתור next

קוד:

$('#next').click(function(){
				var num =0;
				var next_num=0;
				// take the next image src
				var num = $('#img_window img').attr('num');
				if (num==8)
			  {
				next_num = 0;
			  }
			  else
			  {
				var next_num = num + 1;
			  }
				
				var new_img = images[next_num];
			  //var next_img_src = $('#img_window img').next(".activate_modal").attr('src');
			  $('#img_window img').attr('num',next_num);
				

			  $('.modal_window').fadeOut(500);
			  $('#img_window img').attr('src',new_img);
			  $('#img_window').fadeIn(500);

			return false;
		});

שורות הפקודות של כפתור back

קוד:

$('#back').click(function(){
				var num =0;
				var prev_num=0;

				// take the previos image src
			  var num = $('#img_window img').attr('num');
			  if (num==0)
			  {
				prev_num = 8;
			  }
			  else
			  {
				var prev_num = num - 1;
			  }
			  var new_img = images[prev_num];
			  
			  //var prev_img_src = $('#img_window img').prev(".activate_modal").attr('src');
			  $('#img_window img').attr('num',prev_num);
				
				
			  $('.modal_window').fadeOut(500);
			  $('#img_window img').attr('src',new_img);
			  $('#img_window').fadeIn(500);

		return false;
		});

לא שמתי לב למשהו בעייתי בלוגיקה של הקוד.
אבל שמתי לב ש:

1. אתה מגדיר את אותו שם המשתנה מחדש באותו scope, לדוגמא הקוד הבא לא נחוץ ולא כדאי לכתוב אותו:

קוד:

var num = 0;
if (foo)
{
    var num = num + 1;
}

אלא מספיק לעשות:

קוד:

var num = 0;
if (foo)
{
    num = num + 1;
}

2. הגדרת מאפיין בשם num בתג img. לפי התקן - לא אמור להיות קיים מאפיין num בתג img, לכן אולי זה גורם לבעיות בדפדפנים מסוימים (לא בדקתי). בכל מקרה כדאי לדבוק עם התקן. (ועם ה-DTD שהצהרת במסמך)

מצאתי איפה היו הבעיות שלי
בשורות הקוד

קוד:

var num = $('#img_window img').attr('num');

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

קוד:

var num = parseInt($('#img_window img').attr('num'))

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

אה נכון, המרה ל-int, לא שמתי לב

ציטוט:

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

בדקת את זה בכל הדפדפנים הפופולריים? אני זוכר שהייתה לי בעיה בקביעת מאפיין לא חוקי לתג - ככה שהמאפיין הזה לא היה קיים. אולי זכרוני מטעה אותי...

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

תלוי מה הייתה הבעיה שלך ולשם מה הוספת תגית לא קיימת.. מה היה השימוש שרצית לעשות?

אתה יכול לשמור ב .data בשביל לשמור מידע על אלמנטים באלמנטים עצמם

קוד:

$('#img_window img').data('num', 3);
var num = $('#img_window img').data('num');

!!אזהרה!!

ההודעה עלולה להכיל שברי אגוזים ו/או איברי דגים כלשהם

!!אזהרה!!

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

קוד:

<div id="img_wrapper">
<img src="a.jpg" />
<img src="b.jpg" />
<img src="c.jpg" />
</div>

ובהתחלה תריץ את זה:

קוד:

$(function () { 
  $('#img_wrapper img').not(':first-child').hide(0);
}

את הפונקציות next ו prev:

קוד:

$('#next').bind('click', function () {
  var t = $(this);
  var current = $('#img_wrapper img:visible');
  if (current.length == 1) {
	var next = current.next('img');
	if (next.length == 0) {
	  next = $('#img_wrapper img:first-child');
}
  current.fadeOut();
  next.fadeIn();
});

את prev אתה מוזמן לכתוב להשלים

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

!!אזהרה!!

ההודעה עלולה להכיל שברי אגוזים ו/או איברי דגים כלשהם

!!אזהרה!!

אני די חדש בjquary אז אשמח אם תסביר לי קצת לעומק על מה שעשית,
לגבי הטעינה המוקדמת עשיתי זאת באמצעות java script עם var new image