Проблема с положением изображения в лайтбоксе jQuery

Я написал пользовательскую галерею/лайтбокс с модальным окном, и у меня возникли проблемы с позиционированием изображения. В основном все в порядке, когда вы выбираете изображение и последовательно щелкаете, но если вы выходите из изображения, а затем снова открываете то же изображение, положение смещается вправо. Я понятия не имею, в чем может быть проблема. У меня есть абсолютное позиционирование ‹ img > и относительный контейнер. Я установил CSS для изображения слева: 50%; и сверху: 50%; а затем используйте JS для вычисления отрицательного левого и верхнего поля. Кто-нибудь знает, почему позиция изменится при повторном открытии изображения? Jsfiddle связан ниже. Заранее спасибо!!

CSS:

#photoViewer {
   display: inline-block;
   position: relative;
   margin: 0 auto;
}
#photoViewer img {
   position: absolute;
   top: 50%;
   left: 50%;
   max-height: 70vh; 
}

JS для маржи:

$img.css({
    marginLeft: -$img.width() / 2,
    marginTop: -$img.height() / 2
})

и для размера контейнера div:

function adjustSize() {
var $width = $current.width();
var $height = $current.height();
$frame.css({
    width: $width,
    height: $height
});

}

(Я получил много этого кода из книги Джона Дакетта "Javascript & jQuery", но изменил его и объединил несколько разных элементов/идей).

Ссылка на jsFiddle: https://jsfiddle.net/jessereitz1/6nxg21a3/1/


javascript image-gallery jquery css gallery
person Jesse Reitz    schedule 28.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У вас есть проблема с вашей функцией ниже -

function adjustSize() {
  var $width = $current.width();
  var $height = $current.height();
  console.log($width,$height);  /*Debug in console*/
  $frame.css({
    width: $width,
    height: $height
  });
}

При первом щелчке выше функция возвращает width:200 и height:133

При втором щелчке выше функция возвращает width:0 и height:0

Это причина такого рода проблем.

Еще одна проблема с $cache = {}, это cache[src].$img объект, не получающий свойства width и height для изображения кеша.

function changeImg(index) {
  var $img;
  var src = $thumbnails[activeIndex].href;
  request = src;

  /*if(cache.hasOwnProperty(src)){
    if(cache[src].isLoading === false) {
        $frame.append(cache[src].$img);
        crossfade(cache[src].$img);
    }
  }else*/{
    $img = $('<img/>');
    cache[src] = {
        $img: $img,
        isLoading: true
    };

    $img.on('load', function() {
        $img.hide();
        $frame.removeClass('isLoading').append($img);
        cache[src].isLoading = false;
        if (request === src) {
            crossfade($img);
        }
    });

    $frame.addClass('isLoading');

    $img.attr({
        'src': src,
        'alt': $thumbnails[activeIndex].title || ''
    });
  }
}

Без проверки кеша он обеспечивает правильный результат.

person Sumon Sarker    schedule 28.03.2017
comment
Я тоже это заметил, но не могу понять, почему это происходит. Я поместил вызов функции в функцию crossFade(), поэтому ее следует вызывать каждый раз, когда показывается новое изображение. У вас есть идеи, почему это может быть? Я пытался перемещаться по вызову функции, но, похоже, ничто не заставляет его снова изменять размер... - person Jesse Reitz; 28.03.2017
comment
Ладно, проверяю... @JesseReitz - person Sumon Sarker; 28.03.2017
comment
Это отлично работает! Большое спасибо @SumonSarker!! - person Jesse Reitz; 28.03.2017