Почему выдает разное расстояние?

Question

[zuraavl]

У меня есть код для галереи которая по клику на фото открывает его на весь экран и позволяет скролить влево-вправо.

Мне нужно определить где находится фото на полном экране и доскролить до туда автоматически. В первый клик все срабатывает, на второй клик показывает неправильные расстояния.
Типа правильно 1200 и первый клик 1200, второй клик по тому же изображению 0 или рандомное число и скрол к нему не идет

$(".gallery-item").click(function(){
    // убираем класс у предыдуших фоток
    $(".gallery-item").removeClass("scroll-to-this");
    
    
    // ставим этой фотке скролить до нее
    $(this).addClass("scroll-to-this");

    
    // переключаем стили в режим фото на весь экран
    $('body').toggleClass('thumbnails-on');
    
    // переводим чтобы при скроле вниз окно скролилось по x
    $('html, body, *').mousewheel(function(e, delta) {
      this.scrollLeft -= (delta * 1);
     
      });
    
    
    // для того чтобы большая картинка была по центру
    var wid = $(window).width() / 3;
    
    // ну и вот этот код выдает первый раз правильную цифру, второй раз по клику туда же - неправильную
    $('html, body, *').animate({
        scrollLeft: $(".thumbnails-on .scroll-to-this").offset().left - wid
    }, 1000);
 
 });

Как сделать чтобы всегда правильное число показывало?
Самое ужасное что этот скрипт работал и я не понимаю что поменял, почему перестал(