вид страницы с картинками по категориям и контейнер для всплывающего окна
<code lang="html">
<div id="our_team">
<h3>Категория 1</h3>
<div class="item" id="item-1"><img src="http://blabla"></div>
<div class="item" id="item-2"><img src="http://blabla"></div>
<div class="item" id="item-3"><img src="http://blabla"></div>
<h3>Категория 2</h3>
<div class="item" id="item-4"><img src="http://blabla"></div>
<div class="item" id="item-5"><img src="http://blabla"></div>
<h3>Категория 3</h3>
<div class="item" id="item-6"><img src="http://blabla"></div>
<div class="item" id="item-7"><img src="http://blabla"></div>
</div>
</div>
<div id="popup-container">
<div id="popup-image">
<img>
</div>
<a class="navigation close" name="close"><div>Закрыть</div></a>
<a class="navigation next" name="next"></a>
<a class="navigation prev" name="prev"></a>
</div>
</code>
скрипт, который выводит картинку во всплывающее окно
$('#our_team').children('.item').click(function(){
$('#popup-container').addClass('active');
$(this).addClass('active');
show_images();
var image_width = $('#popup-image').find('img').outerWidth(),
window_width = $(window).outerWidth(true),
difference = (window_width-image_width)/2;
$('#popup-container').find('.close').children('div').css({'right': difference});
})
$('#popup-container').children('.navigation').click(function(){
var action = $(this).attr('name');
if(action == 'close'){
$('#popup-container').removeClass('active');
$('#our_team').children('.item').removeClass('active');
} else if(action == 'next'){
$('#our_team').children('.item.active').removeClass('active').nextAll('.item:first').addClass('active');
show_images();
} else if(action == 'prev'){
$('#our_team').children('.active').removeClass('active').prevAll('.item:first').addClass('active');
show_images();
}
})
function show_images(){
var image = $('#our_team').children('.item.active').find('img').clone(),
src = $('#our_team').children('.item.active').attr('href');
$('#popup-image').children('img').animate({'opacity':'0'}, 200, function(){
$('#popup-image').html('<img src="' + src + '"><div></div>');
$('#popup-image').children('img').css({'opacity':'0'}).animate({'opacity':'1'}, 200);
});
}
в переменную image_width попадает не то, что я ожидаю. теоретически, должна быть ширина картинки, которая открывается при клике. практически получается, что в переменную попадает ширина картинки, которая была открыта раньше. если ничего не было открыто, то какое-то непонятное значение 20. насколько я понимаю, сначала выполняется кусок кода, где определяется ширина, а уже потом только показывается картинка и переопределяются ее параметры. как это можно исправить?
