javascript - JQuery 覆盖图像 onclick 无需预加载

Question

我有一个非常基本的图片库，显示带有上一个/下一个链接的缩略图，当单击缩略图时，它会打开完整尺寸的图像:

// slider for catalog images
var images = $("#slider img");
var prevBtn = $("#prev");
var nextBtn = $("#next");
var total = images.length;
var last = total - 1;
var first = 0;
var current = first;

function showImage(index) {
  index = (index > last) ? last : index;
  index = (index < first) ? first : index;
  images.hide();
  images.eq(index).show();
  if (total == 1) {
    prevBtn.addClass('disabled');
    nextBtn.addClass('disabled');
  } else if (index <= first) {
    prevBtn.addClass('disabled');
    if (index == first && nextBtn.hasClass('disabled')) {
      nextBtn.removeClass('disabled');
    }
  } else if (index >= last) {
    nextBtn.addClass('disabled');
    if (index == last && prevBtn.hasClass('disabled')) {
      prevBtn.removeClass('disabled');
    }
  } else {
    prevBtn.removeClass('disabled');
    nextBtn.removeClass('disabled');
  }
}
prevBtn.click(function(e) {
  e.preventDefault();
  current--;
  showImage(current);
});
nextBtn.click(function(e) {
  e.preventDefault();
  current++;
  showImage(current);
});
$('#slider').toggle();
showImage(first);

#slider {
  display: none;
}

.disabled {
  pointer-events: none;
  opacity: 0.6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
  <div id="slider-nav"><a href="#" id="prev">Prev</a> | <a href="#" id="next">Next</a></div><br />
  <a href="http://i.imgur.com/HcDp3NW.jpg"><img width="90" height="90" style="max-width: 90px; width: 100%; height: auto;" src="http://i.imgur.com/HcDp3NWs.jpg" alt="" /></a>
  <a href="http://i.imgur.com/AxOBaeR.jpg"><img width="90" height="90" style="max-width: 90px; width: 100%; height: auto;" src="http://i.imgur.com/AxOBaeRs.jpg" alt="" /></a>
  <a href="http://i.imgur.com/XWfvUb4.jpg"><img width="90" height="90" style="max-width: 90px; width: 100%; height: auto;" src="http://i.imgur.com/XWfvUb4s.jpg" alt="" /></a>
  <a href="http://i.imgur.com/SkNrHcQ.jpg"><img width="90" height="90" style="max-width: 90px; width: 100%; height: auto;" src="http://i.imgur.com/SkNrHcQs.jpg" alt="" /></a>
  <a href="http://i.imgur.com/LlgstOJ.png"><img width="90" height="90" style="max-width: 90px; width: 100%; height: auto;" src="http://i.imgur.com/LlgstOJs.png" alt="" /></a>
</div>

JSFiddle

我不想直接打开全尺寸图像，而是想在自动居中(水平和垂直)并将自身调整为正确尺寸的叠加层内打开图像。我在想我需要向 DOM 附加一个新的 img 标签，这样就不会预加载全尺寸图像，然后在覆盖时删除 img 标签关闭。我不想使用任何额外的插件。

有人可以告诉我如何或从哪里开始添加这个叠加层吗？

Answer 1

修改了您的 fiddle 以包括对缩略图和覆盖的点击。目前，在叠加层内的任意位置单击时，叠加层会关闭并删除 img 标签。

// slider for catalog images
var images = $("#slider img");
var prevBtn = $("#prev");
var nextBtn = $("#next");
var total = images.length;
var last = total - 1;
var first = 0;
var current = first;

function showImage(index) {
  index = (index > last) ? last : index;
  index = (index < first) ? first : index;
  images.hide();
  images.eq(index).show();
  if (total == 1) {
    prevBtn.addClass('disabled');
    nextBtn.addClass('disabled');
  } else if (index <= first) {
    prevBtn.addClass('disabled');
    if (index == first && nextBtn.hasClass('disabled')) {
      nextBtn.removeClass('disabled');
    }
  } else if (index >= last) {
    nextBtn.addClass('disabled');
    if (index == last && prevBtn.hasClass('disabled')) {
      prevBtn.removeClass('disabled');
    }
  } else {
    prevBtn.removeClass('disabled');
    nextBtn.removeClass('disabled');
  }
}
prevBtn.click(function(e) {
  e.preventDefault();
  current--;
  showImage(current);
});
nextBtn.click(function(e) {
  e.preventDefault();
  current++;
  showImage(current);
});
$('#slider').toggle();
showImage(first);

//Thumbnail click
$('.thumb').click(function(e) {
  e.preventDefault();
  var url = $(this).attr('href');
  var img = "<img src=" + url + "/>";
  $("#overlay").append(img).addClass("visible");
});
//To close the overlay
$("#overlay").click(function() {
  $(this).removeClass('visible');
  $(this).find("img").remove();
})

#slider {
  display: none;
}

.disabled {
  pointer-events: none;
  opacity: 0.6;
}

#overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  visibility: hidden;
}

#overlay.visible {
  visibility: visible;
}

#overlay img {
  max-width: 300px;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay"></div>
<div id="slider">
  <div id="slider-nav"><a href="#" id="prev">Prev</a> | <a href="#" id="next">Next</a></div><br />
  <a href="http://i.imgur.com/HcDp3NW.jpg" class="thumb"><img width="90" height="90" style="max-width: 90px; width: 100%; height: auto;" src="http://i.imgur.com/HcDp3NWs.jpg" alt="" /></a>
  <a href="http://i.imgur.com/AxOBaeR.jpg" class="thumb"><img width="90" height="90" style="max-width: 90px; width: 100%; height: auto;" src="http://i.imgur.com/AxOBaeRs.jpg" alt="" /></a>
  <a href="http://i.imgur.com/XWfvUb4.jpg" class="thumb"><img width="90" height="90" style="max-width: 90px; width: 100%; height: auto;" src="http://i.imgur.com/XWfvUb4s.jpg" alt="" /></a>
  <a href="http://i.imgur.com/SkNrHcQ.jpg" class="thumb"><img width="90" height="90" style="max-width: 90px; width: 100%; height: auto;" src="http://i.imgur.com/SkNrHcQs.jpg" alt="" /></a>
  <a href="http://i.imgur.com/LlgstOJ.png" class="thumb"><img width="90" height="90" style="max-width: 90px; width: 100%; height: auto;" src="http://i.imgur.com/LlgstOJs.png" alt="" /></a>
</div>