Minimal Single Image Lightbox In jQuery

A lightweight single image lightbox plugin that displays your image in a minimal clean popup box after page load.

How to use it:

1. Include the necessary JavaScript and CSS files on the 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 single image popup.

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

3. Initialize the plugin on document ready and specify the path to the image to be displayed in the lightbox.

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

4. Set the height & width of the image.

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

5. Prevent the image lightbox from opening on page load.

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

---

This awesome jQuery plugin is developed by rajankarmakar. For more Advanced Usages, please check the demo page or visit the official website.