wip-image-zoom

Native angularjs image zoom directive with lots of features.

Install

You can download all necessary wip-image-zoom files manually, or install it with bower:

bower install wip-image-zoom

Usage

You need only to include wip-image-zoom.min.js and wip-image-zoom.min.css.

<link rel="stylesheet" href="/dist/wip-image-zoom.min.css">
<script src="/dist/wip-image-zoom.min.js"></script>

Config Provider

You can change directive defaults using the wipImageZoomConfigProvider in your config for example:

var app = angular.module('exampleApp', ['wipImageZoom']);
app.config(config);

function config(wipImageZoomConfigProvider) {
  wipImageZoomConfigProvider.setDefaults({
    style               : 'box' // e.g.
  });
};

Sample usage with single image

<img wip-image-zoom src="http://lorempixel.com/output/nature-q-c-640-480-4.jpg">

Sample usage with options

   <img src="http://lorempixel.com/output/nature-q-c-640-480-4.jpg" 
    wip-image-zoom="vm.options" 
    selected-model="vm.selected"
    selected-index="vm.selectedIndex">

Configuration

Passing a configuration object to wip-image-zoom="vm.options"" changes the defaults.

vm.options = {
                           zoomEnable          : true,
                           defaultIndex        : 0, // Order of the default selected Image
                           /* You should give images in array with object properties
                            [{
                            thumb : 'assets/images/1-thumb.jpg',
                            medium: 'assets/images/1-medium.jpg',
                            large : 'assets/images/1-large.jpg'
                            }] */
                           images              : [],
                           style               : 'inner', // inner or box
                           boxPos              : 'right-top', // e.g., right-top, right-middle, right-bottom, top-center, top-left, top-right ...
                           boxW                : 400, // Box width
                           boxH                : 400, // Box height
                           method              : 'lens', // fallow 'lens' or 'pointer'
                           cursor              : 'crosshair', // 'none', 'default', 'crosshair', 'pointer', 'move'
                           lens                : true, // Lens toggle
                           zoomLevel           : 3, // 0: not scales, uses the original large image size, use 1 and above to adjust.
                           immersiveMode       : '769', // false or 0 for disable, always, max width(px) for trigger
                           immersiveModeOptions: {}, // can extend immersed mode options
                           immersiveModeMessage: 'Click to Zoom', // Immersive mode message
                           prevThumbButton     : '◁', // Prev thumb button (html)
                           nextThumbButton     : '▷', // Next thumb button (html)
                           thumbsPos           : 'bottom', // Thumbs position: 'top', 'bottom'
                           thumbCol            : 3, // Thumb column count
                           thumbColPadding     : 4 // Padding between thumbs
                       };

Demo

withinpixels.github.io/wip-image-zoom