Lightbox Effect in HTML

Question

I'm trying to edit my javascript code to enable lightbox when clicked on an image. Presently, it opens the image in another tab. I've searched around online but could not seem to find an answer..

<script language="JavaScript">
$(function() {
  /* Lets the user click on the images to view them in full resolution. */
  $("img").wrap(function() {
    var link = $('<a/>');
    link.attr('href', $(this).attr('src'));
    link.attr('title', $(this).attr('alt'));
    link.attr('target', '_blank');
    return link;
  });
});
</script>

<img src="img/4_email_a.png" style="border: #A9A9A9 1px solid; width:70%">

Could someone point me in the right direction? Thank you!

Answer 1

You have to use a lightbox script like fancybox ( https://fancyapps.com/fancybox/3/ ), you would just need to add data-fancybox attributes for your links, example:

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>

It is also possible to make it work without links - https://codepen.io/anon/pen/rRVeJW