Как передать в переменную текущую ширину изображения?

Question

[nanny_ogg]

вид страницы с картинками по категориям и контейнер для всплывающего окна

<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. насколько я понимаю, сначала выполняется кусок кода, где определяется ширина, а уже потом только показывается картинка и переопределяются ее параметры. как это можно исправить?

Answer 1

[SagePtr]

А если перехватывать для картинки событие onload и в нём получать уже размеры картинки и выполнять все последующие действия ?