Line | |
---|
1 | /* |
---|
2 | |
---|
3 | Docs: |
---|
4 | $("img").sqrop() // square crop with side length equal to shorter side of image |
---|
5 | $("img").sqrop(200) // square crop with 200px side length, image scaled accordingly |
---|
6 | |
---|
7 | Ensure your your images are loaded when calling #sqrop(). Use something like this: |
---|
8 | |
---|
9 | $(document).ready(function () { |
---|
10 | $("img").load(function () { $(this).sqrop(123) }) // image load event |
---|
11 | }) |
---|
12 | |
---|
13 | Inspiration: http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html |
---|
14 | |
---|
15 | Homepage: http://github.com/ncr/sqrop |
---|
16 | Author: Jacek Becela |
---|
17 | License: MIT |
---|
18 | |
---|
19 | */ |
---|
20 | |
---|
21 | (function ($) { |
---|
22 | $.fn.sqrop = function (l) { |
---|
23 | return this.each(function () { |
---|
24 | var e = $(this), |
---|
25 | |
---|
26 | width = e.width(), |
---|
27 | height = e.height(), |
---|
28 | |
---|
29 | min = Math.min(width, height), |
---|
30 | |
---|
31 | length = l || min, |
---|
32 | ratio = length / min, |
---|
33 | |
---|
34 | newWidth = Math.round(width * ratio), |
---|
35 | newHeight = Math.round(height * ratio), |
---|
36 | |
---|
37 | deltaX = Math.round((newWidth - length) / 2), |
---|
38 | deltaY = Math.round((newHeight - length) / 2), |
---|
39 | |
---|
40 | outer = $("<span />").css({ |
---|
41 | position: "relative", |
---|
42 | display: "inline-block", |
---|
43 | width: length, |
---|
44 | height: length, |
---|
45 | float: "left" |
---|
46 | }), |
---|
47 | |
---|
48 | inner = $("<span />").css({ |
---|
49 | position: "absolute", |
---|
50 | clip: "rect(" + deltaY + "px " + (length + deltaX) + "px " + (length + deltaY) + "px " + deltaX + "px)", |
---|
51 | top: -deltaY, |
---|
52 | left: -deltaX |
---|
53 | }); |
---|
54 | |
---|
55 | e.css({ width: newWidth, height: newHeight }).wrap(outer).wrap(inner); |
---|
56 | }); |
---|
57 | }; |
---|
58 | })(jQuery); |
---|
Note: See
TracBrowser
for help on using the repository browser.