How to make use of it:

1. Include the mandatory JavaScript and CSS files on the web page.

<link rel="stylesheet" href="/path/to/css/singleimagepopup.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.singleimagepopup.min.js"></script>

2. Create an empty container for the only picture popup.

<div id="singleimagepopup"></div>

3. Initialize the plugin on doc prepared and specify the path to the picture to be displayed within the lightbox.

$(document).ready(function () {
  $("#singleimagepopup").singleImagePopup({
    imageUrl: "/path/to/image.jpg",
  });
});

4. Set the height & width of the picture.

$(document).ready(function () {
  $("#singleimagepopup").singleImagePopup({
    width: "560px",
    height: "400px",
  });
});

5. Prevent the picture lightbox from opening on web page load.

$(document).ready(function () {
  $("#singleimagepopup").singleImagePopup({
    stop: true
  });
});

Minimal Single Image Lightbox, Jquery-Single Image Popup Plugin/Github

See Demo And Download