Lightweight Image Lightbox Plugin - jQuery Image-Gallery

Image-Gallery is a fast, lightweight, responsive jQuery Gallery & Lightbox plugin that displays and enlarges your grouped image as a gallery. Images will be opened in a responsive lightbox popup with the ability to navigate through images with navigation arrows and keyboard arrow keys. Click on the 'x' button or press the Escape key to close the gallery lightbox.

How to use it:

1. Insert your images into the web page and group them using the thumb_gallery class as these:

<img class="thumb_gallery" src="1.jpg" alt="Image Caption">
<img class="thumb_gallery" src="2.jpg" alt="Image Caption">
<img class="thumb_gallery" src="3.jpg" alt="Image Caption">
<img class="thumb_gallery" src="4.jpg" alt="Image Caption">
<img class="thumb_gallery" src="5.jpg" alt="Image Caption">
...

2. Create a background overlay for the lightbox popup.

<div id="background_overlay">
</div>

3. The required CSS/CSS3 styles for the gallery lightbox, background overlay, navigation arrows and zoom animations.

#background_overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, 0.9);
  z-index: 999;
  overflow: auto;
}

.container_img {
  position: relative;
  max-width: 1000px;
  max-height: 600px;
  margin: 2% auto;
  animation-name: zoom_image;
  animation-duration: 0.4s;
}

.con-ac-ar {
  width: 1000px;
  height: 600px;
  position: relative;
}

.closebtn {
  text-align: right;
  font-size: 2.5em;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.activePopUpImg {
  width: 1000px;
  height: 600px;
  padding: 5px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
}

.previousImage, .nextImage {
  color: #fff;
  font-size: 2.5em;
  cursor: pointer;
  opacity: 0;
  width: 80px;
  text-align: center;
}

.previousImage {
  position: absolute;
  line-height: 600px;
  top: 0;
  left: 0;
  bottom: 0;
}

.nextImage {
  position: absolute;
  line-height: 600px;
  top: 0;
  right: 0;
  bottom: 0;
}

.previousImage:hover {
  opacity: 1;
  transition: 0.4s;
}

.nextImage:hover {
  opacity: 1;
  transition: 0.4s;
}

@keyframes 
zoom_image {  from {
transform: scale(0.5)
}

to { transform: scale(1) }
}

@media screen and (min-width: 650px) and (max-width: 1100px) {

.container_img {
  width: 100%;
  height: 500px;
}

.con-ac-ar {
  width: 100%;
  height: 500px;
}

.activePopUpImg {
  width: 100%;
  height: 500px;
}

.previousImage, .nextImage { line-height: 500px; }
}

@media screen and (min-width: 351px) and (max-width: 649px) {

.container_img {
  width: 100%;
  height: 400px;
}

.con-ac-ar {
  width: 100%;
  height: 400px;
}

.activePopUpImg {
  width: 100%;
  height: 400px;
}

.previousImage, .nextImage { line-height: 400px; }
}

@media screen and (max-width: 350px) {

.container_img {
  width: 100%;
  height: 300px;
}

.con-ac-ar {
  width: 100%;
  height: 300px;
}

.activePopUpImg {
  width: 100%;
  height: 300px;
}

.previousImage, .nextImage { line-height: 300px; }
}

4. Load jQuery JavaScript library and the main JavaScript file gallery.js at the end of the document. Done.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="gallery.js"></script>

---

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