Объясните не могу понять почему так происходит

[cha0s]

function getPhotos(set_id, offset) {
		if (!offset) {
		$.getJSON("http://graph.facebook.com/"+set_id+"/photos?limit=25&offset=0", function(graphData){
			
			var length = graphData.data.length;
			var thumbHTML = '';

			for (i=0; i<length; i++) {
				var photoURL = graphData.data[i].source;
				var thumbURL = graphData.data[i].picture;
				
				thumbHTML += '<a rel="fg_thumb" class="fg_thumb '+thumbclass+'" href="'+ photoURL +'" ><div class="fg_thumb_content">';
				thumbHTML += '<img src=' + thumbURL + ' /></div> </a>';
				
				$("#fg_album").empty().append(thumbHTML).fadeIn(300);
				
				
				if(typeof $.fancybox == 'function') {
					$("a.fg_thumb").fancybox(); 
				} else if(typeof $.colorbox == 'function') {
					$("a.fg_thumb").colorbox(); 
				}
				
				//show top bar
				$("#fg_topbar").fadeIn(300);
			}

		});
	} else {
			$.getJSON("http://graph.facebook.com/"+set_id+"/photos?limit=25&offset="+offset+"", function(graphData){
			
			var length = graphData.data.length;
			var thumbHTML = '';

			for (i=0; i<length; i++) {
				var photoURL = graphData.data[i].source;
				var thumbURL = graphData.data[i].picture;
				
				thumbHTML += '<a rel="fg_thumb" class="fg_thumb '+thumbclass+'" href="'+ photoURL +'" ><div class="fg_thumb_content">';
				thumbHTML += '<img src=' + thumbURL + ' /></div> </a>';
				
				$("#fg_album").empty().append(thumbHTML).fadeIn(300);
				
				if(typeof $.fancybox == 'function') {
					$("a.fg_thumb").fancybox(); 
				} else if(typeof $.colorbox == 'function') {
					$("a.fg_thumb").colorbox(); 
				}
				
				//show top bar
				$("#fg_topbar").fadeIn(300);
			}

		});
		}

	}

Имеется функция которая берет из facebook альбома фотки, первый шаг все отлично загружается 25 фоток из альбома, при допустим нажатие на кнопку

<a onclick="getPhotos(xxxxxxxxxxxxxxxx, 25)">MORE</a>

Надо добавить уже к существующем 25-ти фоткам, еще 25 фоток, как-бы все работает, ТОЛЬКО ОН НЕ ДОБАВЛЯЕТ их к существующему уже div, а берет его затирает, убирает 25 старых фоток, и ставит 25 новых фоток поверх их! ПОЧЕМУ ведь написано чтоб делать .APPEND :/

П.С в сам код можно особо не вникать он работает и все загружает, проблема только то что он переписывай div по новой каждый раз! почему?

[BETEPAH]

а берет его затирает, убирает 25 старых фоток, и ставит 25 новых фоток поверх их! ПОЧЕМУ ведь написано чтоб делать .APPEND

а перед.append() что стоит?

[cha0s]

если empty убирает то получается какая-то вообще галиматья, фотки начинают выбранные дублироваться и всякое такое.. тем более там ведь цикл он цикл гонит 25 раз, и еслиб .empty.append было как удаление, то он имхо только из 25 фоток, оставлял 1 самую последнюю когда цикл закончиться, не?))

[LaNat]

thumbHTML += '<a rel="fg_thumb" class="fg_thumb '+thumbclass+'" href="'+ photoURL +'" ><div class="fg_thumb_content">';
thumbHTML += '<img src=' + thumbURL + ' /></div> </a>';

Вы в цикле собираете строку, состоящую из ссылок я так понимаю на ваши 25 файлов, а потом 25 раз очищаете и вставляете в div fg_album.

$("#fg_album").empty().append(thumbHTML).fadeIn(30 0);

Эту строку кода можно вынести из цикла и вы получите тот же результат.

Может стоит попробовать так

for (i=0; i<length; i++)
{
var photoURL = graphData.data[i].source;
var thumbURL = graphData.data[i].picture;

thumbHTML += '<a rel="fg_thumb" class="fg_thumb '+thumbclass+'" href="'+ photoURL +'" ><div class="fg_thumb_content">';
thumbHTML += '<img src=' + thumbURL + ' /></div> </a>';
}

$("#fg_album").append(thumbHTML).fadeIn(300);
if(typeof $.fancybox == 'function')
{
$("a.fg_thumb").fancybox();
} else if(typeof $.colorbox == 'function')
{
$("a.fg_thumb").colorbox();
}
//show top bar
$("#fg_topbar").fadeIn(300);