JQuery overlay image onclick without preloading

Question

I have a very basic image gallery that shows thumbnails with prev / next links, and when a thumbnail is clicked it opens the full size image:

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

Instead of opening the full-sized image directly, I'd like to open the image inside of an overlay that is automatically centered (horizontally & vertically) and adjusts itself to the correct size. I'm thinking I need to append a new img tag to the DOM so that the full-size images aren't preloaded, then remove the img tag when the overlay is closed. I don't want to use any additional plugins.

Can someone please show me how or where to get started with adding this overlay?

Answer 1

Modified your fiddle to include the click on the thumbnail and overlay. Currently the overlay closes and removes the img tag on clicking anywhere inside the overlay.

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