Question

当我点击缩略图上的完整尺寸视图时，我的问题是将图库的图像占位符居中。基本上发生了什么 - 它居中，但第二次点击相同的缩略图以获得全尺寸视图。第一次单击缩略图以查看完整大小视图时占位符不居中，第二次单击同一缩略图时占位符居中。占位符绝对位于左侧50％的宽度，我用jquery计算下一个图像的大小，以便给它左边的负边距并使其居中。似乎第一次单击缩略图时，脚本没有占用即将到来的图像的大小，但是第二次单击相同的缩略图时，它会完成作业并使占位符居中。

$('.view-full-size').on('click', function (e) {
    e.preventDefault();
    var currentImage = $(this).attr('href').replace('img/fullsize-', '')
        .replace('.jpg', '');
    var newPlaceholder = $('.full-size-img figure > img').attr('src', 'img/fullsize-' + currentImage + '.jpg');
    $('.full-size-img').each(function () {
        var imageWidth = $(this).outerWidth();
        var newWidth = -(imageWidth / 2);
        $(this).css('margin-left', newWidth + 'px');
    });
});

// SLIDER IMAGES
$('#next').on('click', function () {
    var currentImage = parseInt($('.full-size-img figure > img').attr('src').replace('img/fullsize-', '')
        .replace('.jpg', ''));
    currentImage = currentImage + 1;
    var nextSrc = $('.full-size-img figure > img').attr('src', 'img/fullsize-' + currentImage + '.jpg').fadeIn();
});

$('#previous').on('click', function () {
    var currentImage = parseInt($('.full-size-img figure > img').attr('src').replace('img/fullsize-', '')
        .replace('.jpg', ''));
    currentImage = currentImage - 1;
    var nextSrc = $('.full-size-img figure > img').attr('src', 'img/fullsize-' + currentImage + '.jpg');
});

.full-size-img {
    position: absolute;
    z-index: 200;
    top: 5%;
    bottom: 0;
    display: none;
    left: 50%;
}

.full-size-img figure {
    position: relative;
    margin: 0 auto;
    text-align: center;
}

.full-size-img figure img {
    vertical-align: middle;
    height: 90vh;
    box-shadow: 0 10px 20px #000;
}

<div id="gallery" class="gallery-section section-tab">
  <div class="thumbnails cf">
    <figure>
      <a class="view-full-size" href="img/fullsize-26.jpg">
        <img src="img/sample-image-thumb26.jpg" alt="">
      </a>
      <figcaption><a class="view-full-size" href="img/fullsize-26">full size</a>
      </figcaption>
    </figure>

    <figure>
      <a class="view-full-size" href="img/fullsize-27.jpg">
        <img src="img/sample-image-thumb27.jpg" alt=""><a/>
        <figcaption><a class="view-full-size" href="img/fullsize-27">full size</a>
        </figcaption>
    </figure>

    <figure>
      <a class="view-full-size" href="img/fullsize-28.jpg">
        <img src="img/sample-image-thumb28.jpg" alt=""><a/>
        <figcaption><a class="view-full-size" href="img/fullsize-28">full size</a>
        </figcaption>
    </figure>

    <figure>
      <a class="view-full-size" href="img/fullsize-29.jpg">
        <img src="img/sample-image-thumb29.jpg" alt="">
      </a>
      <figcaption><a class="view-full-size" href="img/fullsize-29">full size</a>
      </figcaption>
    </figure>
  </div>
  <!-- end thumbnails -->

</div>
<!-- end gallery-section -->


<!-- SINGLE IMAGE -->
<div class="full-size-img">
  <figure>
    <img src="img/fullsize-1.jpg" alt="" />
    <!-- <figcaption>
    					<span class="full-img-close"><img src="img/close-gallery-btn.png" alt="close button"/></span>
    				</figcaption> -->
    <span id="previous">previous</span>
    <span id="next">next</span>
  </figure>
</div>
<!-- end full size image -->

Answer 1

您的问题在于 display：none; 。

$('.full-size-img').each(function(){
            var imageWidth = $(this).outerWidth();
            var newWidth = -(imageWidth / 2);
            $(this).css('margin-left',newWidth + 'px');
        });

首次点击时，您会填充新图片， .full-size-img 无法访问 var imageWidth = $（this）.outerWidth（）; 直到 fadeIn（）被调用并且其display属性设置为block。

只有在第二次单击时，您才能访问框属性，因为第一次单击使元素在视口中采用物理形式。

不应使用 display：none; ，而应尝试使用** visibility＆amp;不透明度

列表项

**：

.full-size-img {
    position:absolute;
    z-index:200;
    top:5%;
    bottom:0;
    left:50%;
    /*display:none;*/
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
    filter: alpha(opacity=50); /* IE 5-7 */
    -moz-opacity: 0.5; /* Netscape */
    -khtml-opacity: 0.5; /* Safari 1.x */
    opacity: 0.5; /* Good browsers */
}

虽然，在我的头顶，可见度可能会导致淡入淡出功能的另一个问题，但我会留给你来讨论。也许设置可见性：点击可见并让淡入淡出处理不透明度...

中心图片库占位符

1 个答案: