web/data/cubicweb.image.js
author Sylvain Thénault <sylvain.thenault@logilab.fr>
Wed, 21 Jul 2010 12:46:21 +0200
branchstable
changeset 6004 d17d3b34bc12
child 6010 9d40ee3d0551
permissions -rw-r--r--
[image] more handy image resizing using javascript
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
6004
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     1
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     2
jQuery.fn.autoResize = function() {
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     3
    // remove enforced with / height (by CSS and/or HTML attributes)
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     4
    this.css("width", "auto").css("height", "auto");
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     5
    this.removeAttr("width").removeAttr("height"); // Remove
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     6
    // compute image size / max allowed size to fit screen
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     7
    var imgHSize = this.width();
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     8
    var maxHSize = $(window).width() - ($(document).width() - imgHSize);
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     9
    var imgVSize = this.height();
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    10
    var maxVSize = $(window).height() - ($(document).height() - imgVSize);
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    11
    if (maxHSize > 0 && maxVSize > 0) {
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    12
	// if image don't fit screen, set width or height so that
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    13
	// browser keep img ratio, ensuring the other dimension will
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    14
	// also fit the screen
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    15
	if (imgHSize > maxHSize && ((maxHSize / maxVSize) * imgVSize) < maxVSize) {
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    16
	    this.css("width", maxHSize);
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    17
	} else if (imgVSize > maxVSize && ((maxVSize / maxHSize) * imgHSize) < maxHSize) {
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    18
	    this.css("height", maxVSize);
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    19
	} // else image already fit in screen, don't scale it up
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    20
    } else {
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    21
	// XXX can't fit image, don't do anything
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    22
    }
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    23
};
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    24
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    25
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    26
$(document).ready(function() {
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    27
	$("img.contentimage").load(function() {$(this).autoResize()});
d17d3b34bc12 [image] more handy image resizing using javascript
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    28
    });