Function retaining old variable values

Question

I'm trying to make an image gallery with a full screen modal popping up when you click view image. I want to check whether the image is greater in width or height to set the modal's size. But my functions is checking the dimensions of the previous image clicked.

JS

$('#photog .fa-eye').click(function() {
        //Getting the src for the img
        var modalBg = 'img/photog/' + $(this).parent().prev('img').attr('data-img');
        //Checking the dimension of the image
        var imgCheck = new Image();
        imgCheck.src = modalBg;
        imgCheck.onload = function() {
          if (this.naturalWidth > this.naturalHeight) {
            isLong = false;
          } else {
            isLong = true;
          }
        };
        //Getting the values for the viewport
        var bgWidth = 0.8*($(window).width());
        var bgHeight = 0.8*($(window).height());
        //Deleting the image object just to be sure
        delete imgCheck;
        //Setting the modal size according to viewport dimensions and image dimensions
        if (window.isLong) {
            $('.img-modal img').attr({src: (modalBg), width: 'auto', height: bgHeight});
        } else {
            $('.img-modal img').attr({src: (modalBg), height: 'auto', width: bgWidth});
        }
        $('.img-modal').fadeIn();
    });

HTML

<section id='photog">
    <div class="photo">
        <img data-img="pic6.jpg" alt="">
         <div class="img-op">
              <span class="fa.fa-eye"></span>
          </div>
    </div>
</section>

<div class="img-modal">
    <span class="fa fa-times"></span>
    <img alt="">
</div>

Answer 1

Move your code inside the onload function. Otherwise, it will run before the image has actually loaded:

 imgCheck.onload = function() {
   var bgWidth = 0.8*($(window).width());
   var bgHeight = 0.8*($(window).height());
   if (this.naturalWidth > this.naturalHeight) {
     $('.img-modal img').attr({src: (modalBg), height: 'auto', width: bgWidth});
   } else {
     $('.img-modal img').attr({src: (modalBg), width: 'auto', height: bgHeight});
   }
   $('.img-modal').fadeIn();
 };

Answer 2

The imgCheck.onload function runs asynchronously, so it doesn't set the islong variable until after this function returns. Since you're checking the variable in this function, you're getting the old value. Anything that depends on the new image has to be done in the onload function.

$('#photog .fa-eye').click(function() {
    //Getting the src for the img
    var modalBg = 'img/photog/' + $(this).parent().prev('img').attr('data-img');
    //Checking the dimension of the image
    var imgCheck = new Image();
    imgCheck.src = modalBg;
    imgCheck.onload = function() {
        var isLong;
        if (this.naturalWidth > this.naturalHeight) {
            isLong = false;
        } else {
            isLong = true;
        }
        //Getting the values for the viewport
        var bgWidth = 0.8*($(window).width());
        var bgHeight = 0.8*($(window).height());
        //Deleting the image object just to be sure
        delete imgCheck;
        //Setting the modal size according to viewport dimensions and image dimensions
        if (isLong) {
            $('.img-modal img').attr({src: (modalBg), width: 'auto', height: bgHeight});
        } else {
            $('.img-modal img').attr({src: (modalBg), height: 'auto', width: bgWidth});
        }
        $('.img-modal').fadeIn();
    };
});