jQuery 灯箱图片位置问题

Question

我已经编写了自定义模态 window 图像 gallery/lightbox，但在图像定位方面遇到了一些问题。基本上，当您 select 图像并按顺序单击时，一切都很好，但如果退出图像，然后重新打开同一图像，则位置偏向右侧。我不知道可能是什么问题。我有 < img > 定位绝对和容器相对。我已经将图像的 CSS 设置为 left: 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
});

}

（我从 Jon Duckett 的 "Javascript & jQuery" 书中获得了很多这段代码，但对其进行了调整并组合了几个不同的 elements/ideas）。

Link 到 jsFiddle：https://jsfiddle.net/jessereitz1/6nxg21a3/1/

Answer 1

您的以下功能有问题 -

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

第一次点击上面的函数 return width:200 和 height:133

第二次点击上面的函数 return width:0 和 height:0

This is the reason for that kinds of issue.

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

不检查缓存，它提供正确的结果。

jQuery 灯箱图片位置问题

Issue with jQuery lightbox image position

javascript

css

jquery

gallery

image-gallery