Update index.html

HannahHaensen · Oct 2, 2024 · 222822d · 222822d
1 parent ea97f08
commit 222822d
Showing 1 changed file with 49 additions and 42 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -19,10 +19,58 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
           integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+    <!-- jQuery für Bildwechsel -->
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+    <script type="text/javascript" src="assets/jquery.images-compare.js"></script>
 
+    <script type="text/javascript">
+        $(document).ready(function() {
+        $(function () {
+            var imagesCompareElement = $('.js-img-compare').imagesCompare();
+            var imagesCompare = imagesCompareElement.data('imagesCompare');
+            var events = imagesCompare.events();
+            imagesCompare.on(events.changed, function (event) {
+                console.log(events.changed);
+                console.log(event.ratio);
+                if (event.ratio < 0.4) {
+                    console.log('We see more than half of the back image');
+                }
+                if (event.ratio > 0.6) {
+                    console.log('We see more than half of the front image');
+                }
+                if (event.ratio <= 0) {
+                    console.log('We see completely back image');
+                }
+                if (event.ratio >= 1) {
+                    console.log('We see completely front image');
+                }
+            });
+            $('.js-front-btn').on('click', function (event) {
+                event.preventDefault();
+                imagesCompare.setValue(1, true);
+            });
+            $('.js-back-btn').on('click', function (event) {
+                event.preventDefault();
+                imagesCompare.setValue(0, true);
+            });
+            $('.js-toggle-btn').on('click', function (event) {
+                event.preventDefault();
+                if (imagesCompare.getValue() >= 0 && imagesCompare.getValue() < 1) {
+                    imagesCompare.setValue(1, true);
+                } else {
+                    imagesCompare.setValue(0, true);
+                }
+            });
+        });
+        });
+
+    </script>
 </head>
 
 <body>
+
+
+
 <div class="container">
     <br>
     <br>
@@ -320,48 +368,7 @@ <h3>Citation</h3>
     </div>
 </div>
 
-<!-- jQuery für Bildwechsel -->
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
-<script type="text/javascript" src="https://github.com/HannahHaensen/SCGS/blob/gh-pages/docs/assets/jquery.images-compare.js"></script>
-<script type="text/javascript">
-    $(function () {
-        var imagesCompareElement = $('.js-img-compare').imagesCompare();
-        var imagesCompare = imagesCompareElement.data('imagesCompare');
-        var events = imagesCompare.events();
-        imagesCompare.on(events.changed, function (event) {
-            console.log(events.changed);
-            console.log(event.ratio);
-            if (event.ratio < 0.4) {
-                console.log('We see more than half of the back image');
-            }
-            if (event.ratio > 0.6) {
-                console.log('We see more than half of the front image');
-            }
-            if (event.ratio <= 0) {
-                console.log('We see completely back image');
-            }
-            if (event.ratio >= 1) {
-                console.log('We see completely front image');
-            }
-        });
-        $('.js-front-btn').on('click', function (event) {
-            event.preventDefault();
-            imagesCompare.setValue(1, true);
-        });
-        $('.js-back-btn').on('click', function (event) {
-            event.preventDefault();
-            imagesCompare.setValue(0, true);
-        });
-        $('.js-toggle-btn').on('click', function (event) {
-            event.preventDefault();
-            if (imagesCompare.getValue() >= 0 && imagesCompare.getValue() < 1) {
-                imagesCompare.setValue(1, true);
-            } else {
-                imagesCompare.setValue(0, true);
-            }
-        });
-    });
-</script>
+
 
 </body>
 </html>