Added zooming to images

content/anreise.md

@@ -17,7 +17,7 @@ Daubachtal 1\
 
 Sowohl Google Maps als auch sonstige Routenplaner und Navigationssysteme sollten die Adresse schlucken. Falls nicht, findet ihr hier eine kleine Abbildung, die euch vom Ort aus den Weg weist:
 
-<a href="../assets/anfahrt.png" target="_blank"><img src="../assets/anfahrt.png" /></a>
+<img src="../assets/anfahrt.png" class="zoom" />
 <small>(KLICKEN ZUM VERGRÖßERN)</small>
 
 
@@ -41,3 +41,9 @@ Dennoch hier zwei Beispiel-Verbindungen mit dem ÖPNV:
 **Beispiel-Verbindung ab Koblenz**
 <a href="../assets/oeffi_koblenz.png" target="_blank"><img src="../assets/oeffi_koblenz.png" /></a>
 <small>(KLICKEN ZUM VERGRÖßERN)</small>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function(event) { 
+        new Zooming().listen('.zoom');
+    });
+</script> 

content/location.md

@@ -17,9 +17,7 @@ Daubachtal 1\
             Mit Parkplätzen
         </div>
         <div class="card-body text-center">
-            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
+            <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/LWmnVRfX4P.jpg" class="zoom" />
-                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/LWmnVRfX4P.jpg"  />
-            </a>
         </div>
     </article>
     <article class="card">
@@ -28,9 +26,7 @@ Daubachtal 1\
             Kinder bitte wegdenken
         </div>
         <div class="card-body text-center">
-            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
+            <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/gO6sg4fY6I.jpg" class="zoom"  />
-                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/gO6sg4fY6I.jpg"  />
-            </a>
         </div>
     </article>
     <article class="card">
@@ -39,9 +35,7 @@ Daubachtal 1\
             Eingehend geprüfte Flunkyballeignung
         </div>
         <div class="card-body text-center">
-            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
+            <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/ZovtdYV7q3.jpg" class="zoom"  />
-                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/ZovtdYV7q3.jpg"  />
-            </a>
         </div>
     </article>
     <article class="card">
@@ -50,9 +44,7 @@ Daubachtal 1\
             Von innen viel größer. 80qm
         </div>
         <div class="card-body text-center">
-            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
+            <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/ECE1Bdcflr.jpg" class="zoom"  />
-                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/ECE1Bdcflr.jpg"  />
-            </a>
         </div>
     </article>
     <article class="card">
@@ -61,9 +53,7 @@ Daubachtal 1\
             Gulasch? Gulasch!
         </div>
         <div class="card-body text-center">
-            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
+            <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/Stdx7GzUbz.jpg" class="zoom"  />
-                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/Stdx7GzUbz.jpg"  />
-            </a>
         </div>
     </article>
     <article class="card">
@@ -72,13 +62,15 @@ Daubachtal 1\
             Morgens ein paar Bahnen schwimmen
         </div>
         <div class="card-body text-center">
-            <a href="https://www.guelle-muehle.de/galerie.html" target="_blank">
+            <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/G9yH4Oy3eu.jpg" class="zoom"  />
-                <img src="https://www.interatmedia-content.de/z-leistung/galerie/200001971/G9yH4Oy3eu.jpg"  />
-            </a>
         </div>
     </article>
 </section>
 
-
+<script>
+    document.addEventListener("DOMContentLoaded", function(event) { 
+        new Zooming().listen('.zoom');
+    });
+</script> 
 
 

content/merch.md

@@ -89,7 +89,7 @@ date: '2020-02-18'
             <strong>T-Shirt</strong>
         </div>
         <div class="card-body text-center">
-            <img src="../assets/shirt.png" style="max-width: 350px; max-height: 195px;">
+            <img src="../assets/shirt.png" style="max-width: 350px; max-height: 195px;" class="zoom">
             <p>
                 Vorne im klassischen &lt;DD&gt;-Design<br />
                 Die Rückseite mit Event-Motiv<br />
@@ -103,7 +103,7 @@ date: '2020-02-18'
             <strong>Bierkrug</strong>
         </div>
         <div class="card-body text-center">
-            <img src="../assets/bierkrug.png" style="max-width: 350px; max-height: 195px;">
+            <img src="../assets/bierkrug.png" style="max-width: 350px; max-height: 195px;" class="zoom">
             <p>
                 Rundherum bedruckt im coolen &lt;DD&gt;-Design<br />
                 Personalisiert mit Hex-ID<br />
@@ -117,7 +117,7 @@ date: '2020-02-18'
             <strong>Weißbierglas</strong>
         </div>
         <div class="card-body text-center">
-            <img src="../assets/weizen.png" style="max-width: 350px; max-height: 195px;">
+            <img src="../assets/weizen.png" data-original="../assets/weizen.png" style="max-width: 350px; max-height: 195px;" class="zoom">
             <p>
                 Hochwertige Lasergravur<br />
                 im coolen &lt;DD&gt;-Design<br />
@@ -131,7 +131,7 @@ date: '2020-02-18'
             <strong>Emaille Tasse</strong>
         </div>
         <div class="card-body text-center">
-            <img src="../assets/emaille.jpg" style="max-width: 350px; max-height: 195px;">
+            <img src="../assets/emaille.jpg" style="max-width: 350px; max-height: 195px;" class="zoom">
             <p>
                 Rundherum bedruckt im coolen &lt;DD&gt;-Design<br />
                 &nbsp;<br />
@@ -141,3 +141,8 @@ date: '2020-02-18'
         </div>
     </article>
 </section>
+<script>
+    document.addEventListener("DOMContentLoaded", function(event) { 
+        new Zooming().listen('.zoom');
+    });
+</script> 

layouts/partials/footer.html

@@ -24,4 +24,5 @@
   </div>
 </footer>
 
+<script src='{{ "js/zooming.min.js" | absURL }}'></script>
 <script src='{{ "js/script.js" | absURL }}'></script>