Fullscreen Photo Viewer Plugin For jQuery - bigic

bigic is an easy-to-use jQuery plugin that displays large pictures in a fullscreen modal popup with support for image zoom in/out functionality.

How to use it:

1. Include jQuery library and the jQuery bigic plugin anywhere on your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquey-bigic.min.js"></script>

2. Call the plugin on the images to enable the photo viewer.

$('img').bigic();

3. Style the fullscreen modal popup in the CSS.

.popup-bigic {
  position: absolute;
  left: 0;
  top: 0;
  background: #eee;
  overflow: hidden;
  z-index: 999;
}

.popup-bigic .loading-bigic {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
}

.popup-bigic .img-bigic { position: absolute; }

.option-bigic {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1;
}

.option-bigic span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 20px;
  text-indent: -999px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 5px;
  background-image: url(icons.png);
  background-repeat: no-repeat;
  background-color: #fff;
  opacity: .5;
}

.option-bigic span:hover { opacity: 1; }

.option-bigic span.change-bigic {
  display: none;
  background-position: -52px 3px;
}

.option-bigic span.max-bigic {
  display: none;
  background-position: -119px 3px;
}

.option-bigic span.close-bigic { background-position: 8px 8px; }

---

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