How can I pass the current image width to a variable?

Question

JavaScript

page view with pictures by category and container for popup window

<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>

script that displays an image in a popup window

$('#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);
  });
  
}

the image_width variable does not get what I expect. theoretically, there should be the width of the image that opens when clicked. practically it turns out that the width of the picture that was opened earlier gets into the variable. if nothing was opened, then some incomprehensible value 20. as far as I understand, first a piece of code is executed where the width is determined, and only then the picture is shown and its parameters are redefined. how can this be fixed?

Answer 1

And if you intercept the onload event for the picture and get the size of the picture in it and perform all subsequent actions?