website-tests/index.html at master · IsDefinitelyUser/website-tests · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>DarkroomJS</title>
  <link rel="stylesheet" href="./lib/darkroom.min.css">
  <link rel="stylesheet" href="./css/page.css">
</head>
<body>
  <div id="content">
    <div class="container">
      <section class="copy">
        <div class="figure-wrapper">
          <figure class="image-container target">
            <img src="./images/domokun-big.jpg" alt="DomoKun" id="target">

            <figcaption class="image-meta">
              <a target="_blank" href="http://www.flickr.com/photos/bentorode/5176910387/">
                ©
                <strong class="image-meta-title">DomoKun</strong>
                by
                <em class="image-meta-author">Ben Torode</em>
              </a>
            </figcaption>
          </figure>
        </div>
      </section>
    </div>
  </div>

  <script src="./lib/fabric.min.js"></script>
  <script src="./lib/darkroom.min.js"></script>

  <script>
    var dkrm = new Darkroom('#target', {
      // Size options
      minWidth: 100,
      minHeight: 100,
      maxWidth: 600,
      maxHeight: 500,
      ratio: 4/3,
      backgroundColor: '#000',

      // Plugins options
      plugins: {
        //save: false,
        crop: {
          quickCropKey: 67, //key "c"
          //minHeight: 50,
          //minWidth: 50,
          //ratio: 4/3
        }
      },

      // Post initialize script
      initialize: function() {
        var cropPlugin = this.plugins['crop'];
        // cropPlugin.selectZone(170, 25, 300, 300);
        cropPlugin.requireFocus();
      }
    });
  </script>
</body>
</html>