new ui member image js fix

2013-09-02 14:10:20 +08:00 · 2013-09-02 14:10:20 +08:00 · 81a89d2d7c
parent 4209356e9d
commit 81a89d2d7c
1 changed files with 124 additions and 0 deletions
--- a/app/assets/javascripts/lib/jquery.lite.image.resize.js
+++ b/app/assets/javascripts/lib/jquery.lite.image.resize.js
@ -0,0 +1,124 @@
+/* ===================================================
+ * jquery-lite-image-resize v.1.0.1
+ * https://github.com/RayChang/jquery-lite-image-resize
+ * ===================================================
+ * How to use ?
+ *
+ * HTML element closest to the image to add class "resizeimg".
+ * 
+ * Example:
+ * <div class="resizeimg">
+ *     <img src="images url" />
+ * </div>
+ *
+ * Or you can use:
+ * $('your class').rsImg();
+ *
+ * Note : HTML structure must be a structure like the example above.
+ * 
+*/
+
+!function ($) {
+
+    "use strict";
+    
+    var ResizeImg = function(element) {
+        this.element = $(element);
+        this.element.data('exists', true);
+    };
+    ResizeImg.prototype.resize = function() {
+        var $img = this.element.children('img').eq(0),
+            elW = this.element.innerWidth(),
+            elH = this.element.innerHeight(),
+            elScale = elW/elH,
+            image = document.createElement("img");
+        image.src = $img.attr('src');
+        this.element.css({
+            'position': 'relative',
+            'overflow': 'hidden',
+        });
+        function imageLoadComplete() {
+            var imgW = image.width,
+                imgH = image.height,
+                imgScale = imgW/imgH,
+                portrait = {
+                    'position': 'absolute',
+                    'height': '100%',
+                    'width': 'auto',
+                    'max-width': 'none',
+                    'left': '50%',
+                    'top': 0,
+                    'margin-left': imgW*(elH/imgH)/-2
+                },
+                landscape = {
+                    'position': 'absolute',
+                    'height': 'auto',
+                    'max-height': 'none',
+                    'width': '100%',
+                    'left': 0,
+                    'top': '50%',
+                    'margin-top': imgH*(elW/imgW)/-2
+                },
+                center = {
+                    'position': 'absolute',
+                    'height': '100%',
+                    'width': '100%',
+                    'top': 0,
+                    'left': 0
+                };
+            if(imgScale < 1) {
+                if(elScale < 1) {
+                    if(elScale > imgScale) {
+                        $img.css(landscape);
+                    } else {
+                        $img.css(portrait);
+                    };
+                } else {
+                   $img.css(landscape); 
+                };
+            };
+
+            if(imgScale > 1) {
+                if(elScale > 1) {
+                    if(elScale > imgScale) {
+                        $img.css(landscape);
+                    } else {
+                        $img.css(portrait);
+                    };
+                } else {
+                    $img.css(portrait);
+                };
+            };
+
+            if(imgScale == 1) {
+                if(elScale < 1) {
+                    $img.css(portrait);
+                } else if(elScale > 1) {
+                    $img.css(landscape);
+                } else {
+                    $img.css(center);
+                };
+            };
+            $img.fadeTo(500, 1);
+
+        }
+        if(/MSIE 8.0/g.test($ua)) {
+            imageLoadComplete();
+        } else {
+            image.onload = imageLoadComplete;
+        }
+    };
+
+    $.fn.rsImg = function () {    
+        this.each(function () {
+            if(!$(this).data('exists')) {
+                $(this).children("img").fadeTo(0,0);
+                new ResizeImg(this).resize();
+            };
+        });
+    };
+
+    $(function() {
+        $('.resizeimg').rsImg();
+    });
+}(window.jQuery);