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>