Improved examples

arthow4n · Jan 15, 2017 · 35c6ce5 · 35c6ce5
1 parent b2fe8be
commit 35c6ce5
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 81 deletions.
diff --git a/examples/a-range-of-aspect-ratio.html b/examples/a-range-of-aspect-ratio.html
@@ -8,16 +8,11 @@
   <link rel="stylesheet" href="../dist/cropper.css">
   <style>
     .container {
-      max-width: 960px;
+      max-width: 640px;
       margin: 20px auto;
     }
 
-    .img-container {
-      width: 100%;
-      margin-top: 10px;
-    }
-
-    .img-container img {
+    img {
       max-width: 100%;
     }
   </style>
@@ -26,15 +21,15 @@
 
   <div class="container">
     <h1>Cropper with a range of aspect ratio</h1>
-    <div class="img-container">
-      <img src="../docs/images/picture.jpg" alt="Picture">
+    <div>
+      <img id="image" src="../docs/images/picture.jpg" alt="Picture">
     </div>
   </div>
 
   <script src="../dist/cropper.js"></script>
   <script>
     window.addEventListener('DOMContentLoaded', function () {
-      var image = document.querySelector('.img-container > img');
+      var image = document.querySelector('#image');
       var minAspectRatio = 0.5;
       var maxAspectRatio = 1.5;
       var cropper = new Cropper(image, {

diff --git a/examples/crop-on-canvas.html b/examples/crop-on-canvas.html
@@ -8,15 +8,11 @@
   <link rel="stylesheet" href="../dist/cropper.css">
   <style>
     .container {
-      max-width: 960px;
+      max-width: 640px;
       margin: 20px auto;
     }
 
-    .img-container {
-      width: 100%;
-    }
-
-    .img-container img {
+    img {
       max-width: 100%;
     }
   </style>

diff --git a/examples/cropper-in-modal.html b/examples/cropper-in-modal.html
@@ -5,7 +5,7 @@
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>Cropper.js</title>
-  <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
   <link rel="stylesheet" href="../dist/cropper.css">
   <style>
     .img-container img {
@@ -16,7 +16,7 @@
 <body>
 
   <div class="container">
-    <h1 class="page-header">Cropper in a Bootstraop modal</h1>
+    <h1>Cropper in a Bootstraop modal</h1>
 
     <!-- Button trigger modal -->
     <button type="button" class="btn btn-primary" data-target="#modal" data-toggle="modal">
@@ -28,8 +28,8 @@ <h1 class="page-header">Cropper in a Bootstraop modal</h1>
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
+            <h5 class="modal-title" id="modalLabel">Cropper</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-            <h4 class="modal-title" id="modalLabel">Cropper</h4>
           </div>
           <div class="modal-body">
             <div class="img-container">
@@ -44,8 +44,8 @@ <h4 class="modal-title" id="modalLabel">Cropper</h4>
     </div>
   </div>
 
-  <script src="../assets/js/jquery.min.js"></script>
-  <script src="../assets/js/bootstrap.min.js"></script>
+  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
   <script src="../dist/cropper.js"></script>
   <script>
     window.addEventListener('DOMContentLoaded', function () {

diff --git a/examples/customize-preview.html b/examples/customize-preview.html
@@ -12,16 +12,12 @@
       margin: 20px auto;
     }
 
-    .img-container {
-      width: 100%;
-      max-height: 450px;
-    }
-
-    .img-container img {
+    img {
       max-width: 100%;
     }
 
-    .img-preview {
+    .row,
+    .preview {
       overflow: hidden;
     }
 
@@ -50,14 +46,19 @@
 
   <div class="container">
     <h1>Customize preview for Cropper</h1>
-    <h3>Cropper</h3>
     <div class="row">
-      <div class="col col-6 img-container">
+      <div class="col col-6">
         <img id="image" src="../docs/images/picture.jpg" alt="Picture">
       </div>
-      <div class="col col-3 img-preview"></div>
-      <div class="col col-2 img-preview"></div>
-      <div class="col col-1 img-preview"></div>
+      <div class="col col-3">
+        <div class="preview"></div>
+      </div>
+      <div class="col col-2">
+        <div class="preview"></div>
+      </div>
+      <div class="col col-1">
+        <div class="preview"></div>
+      </div>
     </div>
   </div>
 
@@ -75,19 +76,20 @@ <h3>Cropper</h3>
     }
 
     window.addEventListener('DOMContentLoaded', function () {
-      var image = document.querySelector('.img-container > img');
-      var previews = document.querySelectorAll('.img-preview');
+      var image = document.querySelector('#image');
+      var previews = document.querySelectorAll('.preview');
       var cropper = new Cropper(image, {
           ready: function () {
             var clone = this.cloneNode();
 
+            clone.className = ''
             clone.style.cssText = (
               'display: block;' +
               'width: 100%;' +
-              'minWidth: 0;' +
-              'minHeight: 0;' +
-              'maxWidth: none;' +
-              'maxHeight: none;'
+              'min-width: 0;' +
+              'min-height: 0;' +
+              'max-width: none;' +
+              'max-height: none;'
             );
 
             each(previews, function (elem) {

diff --git a/examples/fixed-crop-box.html b/examples/fixed-crop-box.html
@@ -8,33 +8,28 @@
   <link rel="stylesheet" href="../dist/cropper.css">
   <style>
     .container {
-      max-width: 960px;
+      max-width: 640px;
       margin: 20px auto;
     }
 
-    .img-container {
-      width: 100%;
-      max-height: 450px;
-    }
-
-    .img-container img {
+    img {
       max-width: 100%;
     }
   </style>
 </head>
 <body>
 
   <div class="container">
-    <h1 class="page-header">Cropper with fixed crop box</h1>
-    <div class="img-container">
-      <img src="../docs/images/picture.jpg" alt="Picture">
+    <h1>Cropper with fixed crop box</h1>
+    <div>
+      <img id="image" src="../docs/images/picture.jpg" alt="Picture">
     </div>
   </div>
 
   <script src="../dist/cropper.js"></script>
   <script>
     window.addEventListener('DOMContentLoaded', function () {
-      var image = document.querySelector('.img-container > img');
+      var image = document.querySelector('#image');
       var cropper = new Cropper(image, {
         dragMode: 'move',
         aspectRatio: 16 / 9,

diff --git a/examples/full-crop-box.html b/examples/full-crop-box.html
@@ -8,33 +8,28 @@
   <link rel="stylesheet" href="../dist/cropper.css">
   <style>
     .container {
-      max-width: 960px;
+      max-width: 640px;
       margin: 20px auto;
     }
 
-    .img-container {
-      width: 100%;
-      max-height: 450px;
-    }
-
-    .img-container img {
+    img {
       max-width: 100%;
     }
   </style>
 </head>
 <body>
 
   <div class="container">
-    <h1 class="page-header">Cropper with full crop box</h1>
-    <div class="img-container">
-      <img src="../docs/images/picture.jpg" alt="Picture">
+    <h1>Cropper with full crop box</h1>
+    <div>
+      <img id="image" src="../docs/images/picture.jpg" alt="Picture">
     </div>
   </div>
 
   <script src="../dist/cropper.js"></script>
   <script>
     window.addEventListener('DOMContentLoaded', function () {
-      var image = document.querySelector('.img-container > img');
+      var image = document.querySelector('#image');
       var cropper = new Cropper(image, {
         viewMode: 3,
         dragMode: 'move',

diff --git a/examples/multiple-croppers.html b/examples/multiple-croppers.html
@@ -8,15 +8,11 @@
   <link rel="stylesheet" href="../dist/cropper.css">
   <style>
     .container {
-      max-width: 960px;
+      max-width: 640px;
       margin: 20px auto;
     }
 
-    .img-container {
-      width: 100%;
-    }
-
-    .img-container img {
+    img {
       max-width: 100%;
     }
   </style>
@@ -26,19 +22,19 @@
   <div class="container">
     <h1>Multiple Croppers</h1>
     <h3>Cropper</h3>
-    <div class="img-container">
+    <div>
       <img src="../docs/images/picture.jpg" alt="Picture">
     </div>
     <h3>Another</h3>
-    <div class="img-container">
+    <div>
       <img src="../docs/images/picture.jpg" alt="Picture">
     </div>
   </div>
 
   <script src="../dist/cropper.js"></script>
   <script>
     window.addEventListener('DOMContentLoaded', function () {
-      var images = document.querySelectorAll('.img-container > img');
+      var images = document.querySelectorAll('img');
       var length = images.length;
       var croppers = [];
       var i;

diff --git a/examples/responsive-container.html b/examples/responsive-container.html
@@ -8,16 +8,11 @@
   <link rel="stylesheet" href="../dist/cropper.css">
   <style>
     .container {
-      max-width: 960px;
+      max-width: 640px;
       margin: 20px auto;
     }
 
-    .img-container {
-      width: 100%;
-      margin-top: 10px;
-    }
-
-    .img-container img {
+    img {
       width: 100%;
     }
   </style>
@@ -26,16 +21,18 @@
 
   <div class="container">
     <h1>Cropper with responsive container</h1>
-    <button type="button" id="replace">Replace Image</button>
-    <div class="img-container">
-      <img src="../docs/images/picture.jpg" alt="Picture">
+    <p>
+      <button type="button" id="replace">Replace Image</button>
+    </p>
+    <div>
+      <img id="image" src="../docs/images/picture.jpg" alt="Picture">
     </div>
   </div>
 
   <script src="../dist/cropper.js"></script>
   <script>
     window.addEventListener('DOMContentLoaded', function () {
-      var image = document.querySelector('.img-container > img');
+      var image = document.querySelector('#image');
       var cropper = new Cropper(image, {
         movable: false,
         zoomable: false,