Cacher is the code snippet organizer for pro developers

    $('#gallery-grid').on( 'click', 'a', function(e) {
      e.preventDefault();

      currentimgSrc = $(this).data( "img" );

      newimgTag = '<img src="' + currentimgSrc + '">';


      viewbox = $('#gallery-view-box');

      $('html, body').animate({
        scrollTop: parseInt(viewbox.offset().top) - 100
      }, 1000);
      // viewbox.parent().css({'max-height' : viewbox.children("img").height() + 'px'});
      // viewbox.parent().css({'min-height' : viewbox.children("img").height() + 'px'});

      // viewbox.fadeOut('slow', function(){
      //   viewbox.html(newimgTag).fadeIn('slow');
      // });

      viewbox.fadeOut('slow', function(){
        viewbox.html(newimgTag);

        loadingImg = $('#gallery-view-box img');

        if (!loadingImg.complete) {
          // console.log('not cached');
          $('#loading').fadeIn('fast');

          loadingImg.load(function(){
            // console.log('loaded');
            $('#loading').fadeOut('fast', function(){
              viewbox.fadeIn(function(){
                // viewbox.parent().css({'max-height' : viewbox.children("img").height() + 'px'});
                // viewbox.parent().css({'min-height' : viewbox.children("img").height() + 'px'});
              });
              
            });
          });
        } else {
          console.log('cached');
          viewbox.fadeIn();
        }
      

      });

    });

      <div id="gallery" class="row">
        <div class="col-md-7 " id="view-box-container">
          <div id="loading"></div>
          <div id="gallery-view-box">
            <img>
          </div>
        </div>
      </div>