javascript - JQuery overlay image onclick without preloading -
i have basic image gallery shows thumbnails prev / next links, , when thumbnail clicked opens full size image:
// slider 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>instead of opening full-sized image directly, i'd open image inside of overlay automatically centered (horizontally & vertically) , adjusts correct size. i'm thinking need append new img tag dom full-size images aren't preloaded, remove img tag when overlay closed. don't want use additional plugins.
can please show me how or started adding overlay?
modified fiddle include click on thumbnail , overlay. overlay closes , removes img tag on clicking anywhere inside overlay.
// slider 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 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>
Comments
Post a Comment