Вот так, но только надо бы 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;
});
});
