1
/*!
2
*	@name: jquery-izoomify
3
*   @version: 1.0
4
*	@author: Carl Lomer Abia
5
*/
6

7
(function ($) {
8
    var defaults = {
9
        callback: false,
10
        target: false,
11
        duration: 120,
12
        magnify: 1.2,
13
        touch: true,
14
        url: false
15
    };
16

17
    var _izoomify = function (target, duration, magnify, url) {
18
        var xPos,
19
            yPos,
20
            $elTarget = $(target),
21
            $imgTarget = $elTarget.find('img:first'),
22
            imgOrigSrc = $imgTarget.attr('src'),
23
            imgSwapSrc,
24
            defaultOrigin = 'center top ' + 0 + 'px',
25
            resultOrigin,
26
            dUrl = 'data-izoomify-url',
27
            dMagnify = 'data-izoomify-magnify',
28
            dDuration = 'data-izoomify-duration',
29
            eClass = 'izoomify-in',
30
            eMagnify,
31
            eDuration;
32

33
        function imageSource(imgSource) {
34
            var _img = new Image();
35
            _img.src = imgSource;
36
            return _img.src;
37
        }
38

39
        function getImageAttribute($img, dataAttribute, defaultAttribute) {
40
            if ($img.attr(dataAttribute)) {
41
                return $img.attr(dataAttribute);
42
            }
43

44
            return defaultAttribute;
45
        }
46

47
        function getImageSource($img, dataImageSource, defaultImageSource) {
48
            if ($img.attr(dataImageSource)) {
49
                return imageSource($img.attr(dataImageSource));
50
            }
51

52
            return defaultImageSource ? imageSource(defaultImageSource) : false;
53
        }
54

55
        function getTouches(e) {
56
            return e.touches || e.originalEvent.touches;
57
        }
58

59
        imgSwapSrc = getImageSource($imgTarget, dUrl, url);
60

61
        eMagnify = getImageAttribute($imgTarget, dMagnify, magnify);
62

63
        eDuration = getImageAttribute($imgTarget, dDuration, duration);
64

65
        $elTarget
66
            .addClass(eClass)
67
            .css({
68
                'position': 'relative',
69
                'overflow': 'hidden'
70
            });
71

72
        $imgTarget.css({
73
            '-webkit-transition-property': '-webkit-transform',
74
            'transition-property': '-webkit-transform',
75
            '-o-transition-property': 'transform',
76
            'transition-property': 'transform',
77
            'transition-property': 'transform, -webkit-transform',
78
            '-webkit-transition-timing-function': 'ease',
79
            '-o-transition-timing-function': 'ease',
80
            'transition-timing-function': 'ease',
81
            '-webkit-transition-duration': eDuration + 'ms',
82
            '-o-transition-duration': eDuration + 'ms',
83
            'transition-duration': eDuration + 'ms',
84
            '-webkit-transform': 'scale(1)',
85
            '-ms-transform': 'scale(1)',
86
            'transform': 'scale(1)',
87
            '-webkit-transform-origin': defaultOrigin,
88
            '-ms-transform-origin': defaultOrigin,
89
            'transform-origin': defaultOrigin
90
        });
91

92
        return {
93
            moveStart: function (e, hasTouch) {
94
                var o = $(target).offset();
95

96
                if (hasTouch) {
97
                    e.preventDefault();
98
                    xPos = getTouches(e)[0].clientX - o.left;
99
                    yPos = getTouches(e)[0].clientY - o.top;
100
                } else {
101
                    xPos = e.pageX - o.left;
102
                    yPos = e.pageY - o.top;
103
                }
104

105
                resultOrigin = xPos + 'px ' + yPos + 'px ' + 0 + 'px';
106

107
                $imgTarget
108
                    .css({
109
                        '-webkit-transform': 'scale(' + eMagnify + ')',
110
                        '-ms-transform': 'scale(' + eMagnify + ')',
111
                        'transform': 'scale(' + eMagnify + ')',
112
                        '-webkit-transform-origin': resultOrigin,
113
                        '-ms-transform-origin': resultOrigin,
114
                        'transform-origin': resultOrigin
115
                    })
116
                    .attr('src', imgSwapSrc || imgOrigSrc);
117
            },
118
            moveEnd: function () {
119
                this.reset();
120
            },
121
            reset: function () {
122
                resultOrigin = defaultOrigin;
123

124
                $imgTarget
125
                    .css({
126
                        '-webkit-transform': 'scale(1)',
127
                        '-ms-transform': 'scale(1)',
128
                        'transform': 'scale(1)',
129
                        '-webkit-transform-origin': resultOrigin,
130
                        '-ms-transform-origin': resultOrigin,
131
                        'transform-origin': resultOrigin
132
                    })
133
                    .attr('src', imgOrigSrc);
134
            }
135
        }
136
    };
137

138
    $.fn.izoomify = function (options) {
139
        return this.each(function () {
140
            var settings = $.extend({}, defaults, options || {}),
141
                $target = settings.target && $(settings.target)[0] || this,
142
                src = this,
143
                $src = $(src),
144
                mouseStartEvents = 'mouseover.izoomify mousemove.izoomify',
145
                mouseEndEvents = 'mouseleave.izoomify mouseout.izoomify',
146
                touchStartEvents = 'touchstart.izoomify touchmove.izoomify',
147
                touchEndEvents = 'touchend.izoomify';
148

149
            var izoomify = _izoomify($target, settings.duration, settings.magnify, settings.url);
150

151
            function startEvent(e, hasTouch) {
152
                izoomify.moveStart(e, hasTouch);
153
            }
154

155
            function endEvent($src) {
156
                izoomify.moveEnd();
157

158
                if ($src) {
159
                    $src
160
                        .off(touchStartEvents)
161
                        .off(touchEndEvents);
162
                }
163
            }
164

165
            function resetImage() {
166
                izoomify.reset();
167
            }
168

169
            $src.one('izoomify.destroy', function () {
170

171
                $src.removeClass('izoomify-in');
172

173
                resetImage();
174

175
                $src
176
                    .off(mouseStartEvents)
177
                    .off(mouseEndEvents);
178

179
                if (settings.touch) {
180
                    $src
181
                        .off(touchStartEvents)
182
                        .off(touchStartEvents);
183
                }
184

185
                $target.style.position = '';
186
                $target.style.overflow = '';
187

188
            }.bind(this));
189

190
            $src
191
                .on(mouseStartEvents, function (e) {
192
                    startEvent(e);
193
                })
194
                .on(mouseEndEvents, function () {
195
                    endEvent();
196
                });
197

198
            if (settings.touch) {
199
                $src
200
                    .on(touchStartEvents, function (e) {
201
                        e.preventDefault();
202
                        startEvent(e, true);
203
                    })
204
                    .on(touchEndEvents, function () {
205
                        endEvent();
206
                    });
207
            }
208

209
            if ($.isFunction(settings.callback)) {
210
                settings.callback.call($src);
211
            }
212
        });
213
    };
214

215
    $.fn.izoomify.defaults = defaults;
216
}(window.jQuery));