source: extensions/piwigo_mobile/ios/www/js/jquery.sqrop.js @ 12411

Last change on this file since 12411 was 12411, checked in by patdenice, 12 years ago

Add piwigo mobile for iOS

File size: 1.6 KB
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.