Interactive Product Image Zoomer For jQuery - Remooz

Remooz is a simple, interactive product zoomer for jQuery that displays the full-size version of your image (or a group of images) in a popup window.

The users are able to pan the enlarged product image by using the mouse move or scroll event in case the image is larger than the screen size.

In the image group mode, the users are able to switch between these images by clicking the navigation arrows.

See It In Action:

How to use it:

1. Embed a single image or a group of images to the Remooz.

<!-- Image Group -->
<div class="prod-pics-sect">
  <div class="main-prod-cont">
    <img class="current" src="thumb-1.jpg">
    <img src="thumb-2.jpg">
    <img src="thumb-3.jpg">
  </div>
</div>

<!-- Single Image -->
<div class="prod-pics-sect">
  <div class="main-prod-cont">
    <img class="current" src="thumb-4.jpg">
  </div>
</div>

2. Place the latest jQuery library and the jQuery Remooz plugin at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/remooz.js"></script>

3. Initialize the zoomer and specify the image path of the large image(s).

$('.prod-pics-sect').remooz({
  zoomPool: '.main-prod-cont', // image container
  srcRegexp: /450x600/, // image to replace
  srcStrReplace: '1500x2000' // src to replace
});

4. The basic styles of the zoomer. Copy and paste the following CSS snippets to your webpage.

.remooz-fullScreenContainer {
  display: none;
  height: 2000px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1500;
  background-color: rgba(255, 255, 255, 0.8);
}
.remooz-fullScreenContainer img {
  position: absolute;
  z-index: 1000;
  cursor: zoom;
  display: block;
}
.remooz-fullScreenContainer .remooz-fullScreenContainer-inner {
  text-align: center;
  z-index: 19;
}

.remooz-fullScreenContainer-controller {
  position: absolute;
  z-index: 200;
  width: 50px;
  height: 50px;
  font-size: 50px;
  line-height: 50px;
  cursor: pointer;
}

.remooz-fullScreenContainer-close {
  top: 20px;
  right: 20px;
}

.remooz-fullScreenContainer-next {
  top: 50%;
  right: 20px;
  margin-top: -25px;
  position: fixed;
}

.remooz-fullScreenContainer-prev {
  top: 50%;
  left: 20px;
  margin-top: -25px;
  position: fixed;
}

5. You can also specify the path to the large image in the data-remooz-zoom-url attribute:

<div class="prod-pics-sect">
  <div class="main-prod-cont">
    <img class="current" src="thumb-5.jpg" 
         data-remooz-zoom-url="large-5.jpg">
  </div>
</div>

6. All default CSS selectors.

$('.prod-pics-sect').remooz({
  zoomCont: '#js-remooz-zoomContainer',
  zoomThumbCont: '#js-remooz-zoomThumbnailContainer',
  zoomPool: '#js-remooz-imagePool',
  zoomThumbPool: '#js-remooz-thumbnailPool',
  zoomMG: '#js-remooz-zoomMagnifyingGlass',
  zoomImg: 'img.current',
  close: '.js-remooz-close',
  prev: '.js-remooz-prev',
  next: '.js-remooz-next',
  preloader: '.js-remooz-preloader',
  skipSlide: 'redils-duplicated'
});

7. More customization options.

$('.prod-pics-sect').remooz({

  // fit x/y or not
  fitX: true,
  fitY: false,
  
  // shows thumbnails
  showThumbs: false,

  // single image mode
  single: false,

  // uses a trigger to toggle the zoomer
  zoomTrigger: false,

  // image offset in pixels
  imgOffset: [0, 0, 0, 0],

  // 'fixed', 'fixed all' or 'none'
  mgBehaviour: 'fixed',

  // zoomer offset in pixels
  mgImgOffset: [0, 0, 0, 0],

  // allows mouse scroll
  useScroll: false,

  // replaces the current browser tab with the enlarged image
  touchOpenReplaceTab: false,

  // debug mode
  debug: false
  
});

---

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