PHP и jquery
 

Есть модальное окно, и есть php функция для просмотра картинок. Проблема в том , что я не могу их никак соединить ...
Мне нужно, чтобы в модальном окне выводилась фотка на которую кликнули. А при клики на фотку в модальном окне выводилась следующая картинка и т.д. Это аналогично Вконтакте.
http://vk.com/id64969895?z=photo64969895_283837685%2Falbum649698 95_0%2Frev
------------------------------------------------------------------
//php функция переключает фотки

$photo_id = $_GET['photo'];
	echo'<div class="album">';
	for($i=1; $i<25; $i++){
		 echo'<a href="photos.php?photo='.$i.'" name="window"><img src="photos/mini/'.$i.'.jpg" /></a>';		 
 	}
	echo'</div>';
	echo $photo_id;
	function photo_gallery($id, $max){
		$next = $id+1;
		$window_skillet = '
			<div class="window">'.
				'<div class="conteiner_content">'.
					'<div class="conteiner_info">'.
							'<a href="photos.php" class="close"></a>'.
					'</div>'.
					'<div class="content">'.
						'<div><a href="photos.php?photo='.$next.'"><img src="photos/'.$id.'.jpg" /></a></div>'.
					'</div>'.
				'</div>'.
			'</div>		
		';
		if($id>$max-1){echo'<div class="window"><a href="photos.php?photo=1">Начать заново</a></div>';}
		elseif($id==0){echo'<div class="window" style="display:none;"></div>';}
		else{echo $window_skillet;}
	}
	photo_gallery($photo_id, $i);

//javascript модальное окно

$(document).ready(function(){
	$('a[name=window]').click(function(){
		var id = $(this).attr('href');
		var content = $(id).html();
		var get_window = function(){
			var structure_window = 
							'<div class="window">'+
								'<div class="conteiner_content">'+
									'<div class="conteiner_info">'+
											'<a href="" class="close"></a>'+
											'Изображение '+id+
									'</div>'+
									'<div class="content" style="display:block;">'+
										'<div>'+content+'</div>'+
									'</div>'+
								'</div>'+
							'</div>';
			return structure_window;
		}
		$('body').prepend(get_window());
		$('.window').fadeIn();
		if($('.conteiner_content').height()+60>=$(window).height()){
			$('body').css({'overflow':'hidden','padding-right':'17px'});
		} else{
			$('body').css({'overflow':'auto'});
		}
		return false;	
	});
	$('.close').live('click', function(){		
		$('.window').remove();
		$('body').css({'overflow':'auto','padding':'0'});
		return false;
	});
});

Вот так, но только надо бы photo.php подправить, флаг например добавить, чтобы если был клик по миниатюре - передавалось одно значение флага и соответсвенно выполнялась функция возвращающая ту самую структуру

$window_skillet = '
			<div class="window">'.
				'<div class="conteiner_content">'.
					'<div class="conteiner_info">'.
							'<a href="photos.php" class="close"></a>'.
					'</div>'.
					'<div class="content">'.
						'<div><a href="photos.php?photo='.$next.'"><img src="photos/'.$id.'.jpg" [B]class="big"[/B]/></a></div>'.
					'</div>'.
				'</div>'.
			'</div>		
		';

И аяксом подтянуть необходимое изображение вместе со структурой:

$.post("photos.php", { photo: $(this).attr('id')}    
function(data) {
     var structure_window = data;
   });

В итоге получим нечто подобное:

$(document).ready(function(){
	$('a[name=window]').click(function(){
		var id = $(this).attr('href');
		var content = $(id).html();
		var get_window = function(){
                $.post("photos.php", { photo: $(this).attr('id')}    
                function(data) {
                  var structure_window = data;
                });
		$('body').prepend(get_window());
		$('.window').fadeIn();
		if($('.conteiner_content').height()+60>=$(window).height()){
			$('body').css({'overflow':'hidden','padding-right':'17px'});
		} else{
			$('body').css({'overflow':'auto'});
		}
		return false;	
	});

        $('.big').click(function(){
           $.post("photos.php", { photo: $(this).attr('id')}    
             function(data) {
                $('div.window').html = data;
              });
        });

	$('.close').live('click', function(){		
		$('.window').remove();
		$('body').css({'overflow':'auto','padding':'0'});
		return false;
	});


});

zlodeeev, я просто не пойму, как мне GET из php поместить в модальное окно на jquery. Просто страница перезагружается и jquery начинает работу заново. Если можно то принцип объясните.

jeysmook,
Функция $.post() - передает параметры php файлу и ждет ответа переданного от него обратно. По сути,е сли пофантазировать, то можно представить, что не пользователь открывает страничку photo.php, а сам браузер незаметно от пользователя.

Вот мы и делаем

$.post("photos.php", { 
    photo: $(this).attr('id')}   // открываем photo.php?photo=*id фотографии, по которой был клик*
    function(data) { // после передачи запускаем функцию, в качестве ответа от photo.php будет переменная data
        $('div.window').html = data; // запихиваем, по сути всю страничку photo.php?photo=*id* в блок div.window
    }
);

Т.е. мы вставляем страницу photo.php в ту часть кода, где это нам необходимо, осталось только сделать photo.php таким образом, чтобы он выводил только структуру попапа вместе с самой картинкой и ссылкой на следующую, что у вас уже сделано.

zlodeeev,
Спасибо большое , буду разбираться, по мере разбора буду задавать вопрос в этой теме )