Есть модальное окно, и есть 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;
});
});