https://static.vibetag.com/themes/vibetag/javascript/jquery.izoomify.js

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));