JQuery覆盖图像onclick而不预加载

Question

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

＆＃13;

＆＃13;

// 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);

＆＃13;

#slider {
  display: none;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

JSFiddle

我不想直接打开全尺寸图像，而是打开自动居中（水平和垂直）的叠加层内的图像，并将自身调整到正确的大小。我认为我需要向DOM添加新的img标记，以便不会预加载完整尺寸的图像，然后在关闭叠加层时删除img标记。我不想使用任何额外的插件。

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

Answer 1

修改您的小提琴以包含缩略图和叠加层上的点击。目前，叠加层会在点击叠加层内的任何位置时关闭并移除img标记。

＆＃13;

＆＃13;

// 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();
})

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;