Initialized files

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Carl Lomer Abia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,70 @@
+# jquery-izoomify
+jquery-izoomify is an image zoom plugin. It creates a flawless zoom effect to your images. Inspired by [jquery-zoom](http://www.jacklmoore.com/zoom) plugin.
+
+``jquery-izoomify v1.0`` requires ``jQuery 1.8+``
+
+# Settings
+- ``target`` - Parent container. Default is false.
+- ``url`` - Url of image to display on hover. Default is false.
+- ``magnify`` - Image zooming or magnification. Default is 1.2.
+- ``touch`` - Interaction with touch events. Default is true.
+- ``duration`` - Speed of image zooming in/out. Default is 120.
+- ``callback`` - Function to be called once loaded. Default false.
+
+# Markup
+##### Default
+---
+```html
+<div class="target">
+    <img src="path/to/image.jpg" />
+</div>
+```
+```js
+<script>
+$(document).ready(function() {
+   $('.target').izoomify(); 
+});
+<script>
+```
+##### Data Attribute
+---
+```html
+<div class="target">
+    <img src="low-res/image.jpg" 
+        data-izoomify-url="hi-res/hover.jpg" 
+        data-izoomify-magnify="1.8" 
+        data-izoomify-duration="300" />
+</div>
+```
+```js
+<script>
+$(document).ready(function() {
+   $('.target').izoomify(); 
+});
+<script>
+```
+##### Javascript
+---
+```html
+<div class="target">
+    <img src="low-res/image.jpg" />
+</div>
+```
+```js
+<script>
+$(document).ready(function() {
+   $('.target').izoomify({
+       url: "hi-res/hover.jpg",
+       magnify: 2.75,
+       duration: 450,
+       callback: function () {
+           // your code here...
+       }
+   }); 
+});
+<script>
+```
+
+## License
+
+jquery-izoomify is released under the MIT Licence.

demo/demo.css

@@ -0,0 +1,69 @@
+/* DEMO_STYLES only */
+* {
+	box-sizing: border-box;
+}
+html, body {
+	font-family: sans-serif;
+	margin: 0;
+	padding: 0 0 50px;
+	position: relative;
+}
+p {
+	margin: 0;
+	padding: 10px 0;
+}
+h1, h2 {
+	margin: 0;
+	padding: 15px 0 0;
+}
+img {
+	display: block;
+	max-width: 100%;
+}
+.plugin-details {
+	text-align: center;
+	margin-bottom: 25px;
+}
+.container {
+	width: 970px;
+	padding-left: 15px;
+	padding-right: 15px;
+	margin: auto;
+	display: table;
+	clear: both;
+}
+.container h2 {
+	margin-bottom: 15px;
+}
+.col-half {
+	width: 50%;
+	float: left;
+	padding: 0 5px;
+}
+.img-fullwidth img {
+	width: 100%;
+	height: auto;
+	margin: auto;
+}
+.example3 .img-wrapper3 {
+	width: 750px;
+	margin: auto;
+}
+.author {
+	position: absolute;
+	left: 50%;
+	bottom: 0;
+	font-size: 10px;
+	-webkit-transform: translate(-50%, 0);
+    -ms-transform: translate(-50%, 0);
+        transform: translate(-50%, 0);
+}
+table {
+	border-collapse: collapse;
+	width: 100%;
+}
+table td {
+	border: 1px solid #ddd;
+	padding: 5px 10px;
+}
+/* end DEMO_STYLES */

dist/jquery.izoomify.js

@@ -0,0 +1,216 @@
+/*!
+*	@name: jquery-izoomify
+*   @version: 1.0
+*	@author: Carl Lomer Abia
+*/
+
+(function ($) {
+    var defaults = {
+        callback: false,
+        target: false,
+        duration: 120,
+        magnify: 1.2,
+        touch: true,
+        url: false
+    };
+
+    var _izoomify = function (target, duration, magnify, url) {
+        var xPos,
+            yPos,
+            $elTarget = $(target),
+            $imgTarget = $elTarget.find('img:first'),
+            imgOrigSrc = $imgTarget.attr('src'),
+            imgSwapSrc,
+            defaultOrigin = 'center top ' + 0 + 'px',
+            resultOrigin,
+            dUrl = 'data-izoomify-url',
+            dMagnify = 'data-izoomify-magnify',
+            dDuration = 'data-izoomify-duration',
+            eClass = 'izoomify-in',
+            eMagnify,
+            eDuration;
+
+        function imageSource(imgSource) {
+            var _img = new Image();
+            _img.src = imgSource;
+            return _img.src;
+        }
+
+        function getImageAttribute($img, dataAttribute, defaultAttribute) {
+            if ($img.attr(dataAttribute)) {
+                return $img.attr(dataAttribute);
+            }
+
+            return defaultAttribute;
+        }
+
+        function getImageSource($img, dataImageSource, defaultImageSource) {
+            if ($img.attr(dataImageSource)) {
+                return imageSource($img.attr(dataImageSource));
+            }
+
+            return defaultImageSource ? imageSource(defaultImageSource) : false;
+        }
+
+        function getTouches(e) {
+            return e.touches || e.originalEvent.touches;
+        }
+
+        imgSwapSrc = getImageSource($imgTarget, dUrl, url);
+
+        eMagnify = getImageAttribute($imgTarget, dMagnify, magnify);
+
+        eDuration = getImageAttribute($imgTarget, dDuration, duration);
+
+        $elTarget
+            .addClass(eClass)
+            .css({
+                'position': 'relative',
+                'overflow': 'hidden'
+            });
+
+        $imgTarget.css({
+            '-webkit-transition-property': '-webkit-transform',
+            'transition-property': '-webkit-transform',
+            '-o-transition-property': 'transform',
+            'transition-property': 'transform',
+            'transition-property': 'transform, -webkit-transform',
+            '-webkit-transition-timing-function': 'ease',
+            '-o-transition-timing-function': 'ease',
+            'transition-timing-function': 'ease',
+            '-webkit-transition-duration': eDuration + 'ms',
+            '-o-transition-duration': eDuration + 'ms',
+            'transition-duration': eDuration + 'ms',
+            '-webkit-transform': 'scale(1)',
+            '-ms-transform': 'scale(1)',
+            'transform': 'scale(1)',
+            '-webkit-transform-origin': defaultOrigin,
+            '-ms-transform-origin': defaultOrigin,
+            'transform-origin': defaultOrigin
+        });
+
+        return {
+            moveStart: function (e, hasTouch) {
+                var o = $(target).offset();
+
+                if (hasTouch) {
+                    e.preventDefault();
+                    xPos = getTouches(e)[0].clientX - o.left;
+                    yPos = getTouches(e)[0].clientY - o.top;
+                } else {
+                    xPos = e.pageX - o.left;
+                    yPos = e.pageY - o.top;
+                }
+
+                resultOrigin = xPos + 'px ' + yPos + 'px ' + 0 + 'px';
+
+                $imgTarget
+                    .css({
+                        '-webkit-transform': 'scale(' + eMagnify + ')',
+                        '-ms-transform': 'scale(' + eMagnify + ')',
+                        'transform': 'scale(' + eMagnify + ')',
+                        '-webkit-transform-origin': resultOrigin,
+                        '-ms-transform-origin': resultOrigin,
+                        'transform-origin': resultOrigin
+                    })
+                    .attr('src', imgSwapSrc || imgOrigSrc);
+            },
+            moveEnd: function () {
+                this.reset();
+            },
+            reset: function () {
+                resultOrigin = defaultOrigin;
+
+                $imgTarget
+                    .css({
+                        '-webkit-transform': 'scale(1)',
+                        '-ms-transform': 'scale(1)',
+                        'transform': 'scale(1)',
+                        '-webkit-transform-origin': resultOrigin,
+                        '-ms-transform-origin': resultOrigin,
+                        'transform-origin': resultOrigin
+                    })
+                    .attr('src', imgOrigSrc);
+            }
+        }
+    };
+
+    $.fn.izoomify = function (options) {
+        return this.each(function () {
+            var settings = $.extend({}, defaults, options || {}),
+                $target = settings.target && $(settings.target)[0] || this,
+                src = this,
+                $src = $(src),
+                mouseStartEvents = 'mouseover.izoomify mousemove.izoomify',
+                mouseEndEvents = 'mouseleave.izoomify mouseout.izoomify',
+                touchStartEvents = 'touchstart.izoomify touchmove.izoomify',
+                touchEndEvents = 'touchend.izoomify';
+
+            var izoomify = _izoomify($target, settings.duration, settings.magnify, settings.url);
+
+            function startEvent(e, hasTouch) {
+                izoomify.moveStart(e, hasTouch);
+            }
+
+            function endEvent($src) {
+                izoomify.moveEnd();
+
+                if ($src) {
+                    $src
+                        .off(touchStartEvents)
+                        .off(touchEndEvents);
+                }
+            }
+
+            function resetImage() {
+                izoomify.reset();
+            }
+
+            $src.one('izoomify.destroy', function () {
+
+                $src.removeClass('izoomify-in');
+
+                resetImage();
+
+                $src
+                    .off(mouseStartEvents)
+                    .off(mouseEndEvents);
+
+                if (settings.touch) {
+                    $src
+                        .off(touchStartEvents)
+                        .off(touchStartEvents);
+                }
+
+                $target.style.position = '';
+                $target.style.overflow = '';
+
+            }.bind(this));
+
+            $src
+                .on(mouseStartEvents, function (e) {
+                    startEvent(e);
+                })
+                .on(mouseEndEvents, function () {
+                    endEvent();
+                });
+
+            if (settings.touch) {
+                $src
+                    .on(touchStartEvents, function (e) {
+                        e.preventDefault();
+                        startEvent(e, true);
+                    })
+                    .on(touchEndEvents, function () {
+                        endEvent();
+                    });
+            }
+
+            if ($.isFunction(settings.callback)) {
+                settings.callback.call($src);
+            }
+        });
+    };
+
+    $.fn.izoomify.defaults = defaults;
+}(window.jQuery));