Tiny Image Lightbox Plugin Inspired By Medium - cp-lightimg

cp-lightimg is a lightweight and easy image lightbox jQuery plugin that provides a Medium.com inspired, user-friendly Click To Zoom functionality on images within the document.

How to use it:

1. Insert the minified version of the cp-lightimg plugin after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/cp-lightimg.min.js"></script>

2. Attach the plugin to the images and done.

<img src="1.jpg" alt="Image Alt" />
<img src="2.jpg" alt="Image Alt" />
<img src="3.jpg" alt="Image Alt" />
....

$(function () {
  $(document).on("click", "img", function () {
    $(this).cpLightimg();
  });
});

3. Override the default styles of the image lightbox.

img.cp-lightimg {
  position: relative;
  transition: all 300ms;
  z-index: 1001;
  box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px;
}

div.cp-lightoverlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  opacity: 0;
  transition: all 300ms;
}

div.cp-lightoverlay.cp-lightoverlay-in {
  opacity: 1;
}

---

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