Verlinkung Galerie korrigiert

src/components/Embla.vue

@@ -38,13 +38,17 @@ defineProps({
     type: Array,
     required: true,
   },
+  links: {
+    type: Array,
+    required: true,
+  },
 });
 </script>
 
 <template>
   <div class="embla" ref="emblaRef">
     <div class="embla__container">
-      <EmblaItem v-for="el in src" :src="el" />
+      <EmblaItem v-for="el, i in src" :src="el" :link="links[i]" />
     </div>
     <button class="embla__button embla__button--prev" @click="prev">
       <span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>

src/components/EmblaItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 export default {
-  props: ["src"],
+  props: ["src", "link"],
 };
 </script>
 <template>
@@ -11,13 +11,13 @@ export default {
     <div class="slide-content">
       <div class="item-img">
         <div class="item-wrapper">
-          <a href="galerie.php#erntefest">
+          <RouterLink :to="link">
             <img
               :src="
                 src
               "
             />
-          </a>
+          </RouterLink>
         </div>
       </div>
     </div>

src/views/Bildvorschau.vue

@@ -66,9 +66,9 @@ export default {
       {{ bilder.length }} Bilder
       <table>
         <tbody>
-          <tr v-for="row in bildersplitted">
+          <tr v-for="row, i in bildersplitted">
-            <td v-for="column in row">
+            <td v-for="column, j in row">
-              <RouterLink to=""
+              <RouterLink :to="jahr+'/'+(i*5+j).toString()"
                 ><img :src="RitzenbergenLib.get_img(column)" alt="Vorschaubild"
               /></RouterLink>
             </td>

src/views/Galerie.vue

@@ -9,7 +9,7 @@ export default {
   components: {
     Navbar,
     Embla,
-    Footer
+    Footer,
   },
   computed: {
     events() {
@@ -17,39 +17,83 @@ export default {
       let osterfeuer = this.get_jahre("osterfeuer");
       let doppelkopf = this.get_jahre("doppelkopf");
       let fussball = this.get_jahre("fussball");
-      return [
+      let result = [
         {
-          src: erntefeste.map(erntefest => RitzenbergenLib.api("randomimage.php?path=/erntefest/" + erntefest + "&recursive=1&tn=1&text=" + erntefest + "&color=white")),
+          src: erntefeste.map((erntefest) =>
-          title: "Erntefeste"
+            RitzenbergenLib.api(
+              "randomimage.php?path=/erntefest/" +
+                erntefest +
+                "&recursive=1&tn=1&text=" +
+                erntefest +
+                "&color=white"
+            )
+          ),
+          title: "Erntefeste",
+          ev: "erntefest",
         },
         {
-          src: osterfeuer.map(osterfeuer => RitzenbergenLib.api("randomimage.php?path=/osterfeuer/" + osterfeuer + "&recursive=1&tn=1&text=" + osterfeuer + "&color=white")),
+          src: osterfeuer.map((osterfeuer) =>
-          title: "Osterfeuer"
+            RitzenbergenLib.api(
+              "randomimage.php?path=/osterfeuer/" +
+                osterfeuer +
+                "&recursive=1&tn=1&text=" +
+                osterfeuer +
+                "&color=white"
+            )
+          ),
+          title: "Osterfeuer",
+          ev: "osterfeuer",
         },
         {
-          src: doppelkopf.map(doppelkopf => RitzenbergenLib.api("randomimage.php?path=/doppelkopf/" + doppelkopf + "&recursive=1&tn=1&text=" + doppelkopf + "&color=white")),
+          src: doppelkopf.map((doppelkopf) =>
-          title: "Doppelkopf"
+            RitzenbergenLib.api(
+              "randomimage.php?path=/doppelkopf/" +
+                doppelkopf +
+                "&recursive=1&tn=1&text=" +
+                doppelkopf +
+                "&color=white"
+            )
+          ),
+          title: "Doppelkopf",
+          ev: "doppelkopf",
         },
         {
-          src: fussball.map(fussball => RitzenbergenLib.api("randomimage.php?path=/fussball/" + fussball + "&recursive=1&tn=1&text=" + fussball + "&color=white")),
+          src: fussball.map((fussball) =>
-          title: "Fußballturniere"
+            RitzenbergenLib.api(
-        }
+              "randomimage.php?path=/fussball/" +
+                fussball +
+                "&recursive=1&tn=1&text=" +
+                fussball +
+                "&color=white"
+            )
+          ),
+          title: "Fußballturniere",
+          ev: "fussball",
+        },
       ];
+
+      return result.map((ev) => {
+        let jahre = this.get_jahre(ev.ev);
+        ev.links = jahre.map((jahr) => {
+          return "/bild/" + ev.ev + "/" + jahr;
+        });
+        return ev;
+      });
     },
   },
   methods: {
-    get_jahre(event){
+    get_jahre(event) {
       let result;
-      $.ajax(RitzenbergenLib.api("/galerie/get_jahre.php"),{
+      $.ajax(RitzenbergenLib.api("/galerie/get_jahre.php"), {
-        success(data){
+        success(data) {
-          result=JSON.parse(data);
+          result = JSON.parse(data);
         },
         async: false,
-        data: {event}
+        data: { event },
       });
       return result;
-    }
+    },
-  }
+  },
 };
 </script>
 <template>
@@ -69,9 +113,9 @@ export default {
             <strong>Willkommen in der Galerie</strong>
           </h3>
           <p class="mbr-text mbr-fonts-style display-7">
-            In unserem Fotoalbum findest du chronisch geordnete
+            In unserem Fotoalbum findest du chronisch geordnete Bilder
-            Bilder verschiedener Veranstaltungen aus den letzten Jahrzehnten.
+            verschiedener Veranstaltungen aus den letzten Jahrzehnten. Einfach
-            Einfach auf ein Bild mit einer Jahreszahl raufklicken.
+            auf ein Bild mit einer Jahreszahl raufklicken.
           </p>
         </div>
       </div>
@@ -79,7 +123,11 @@ export default {
   </section>
 
   <br /><br />
-  <section class="slider4 mbr-embla cid-u6k7q0yLdW" id="erntefest" v-for="event in events">
+  <section
+    class="slider4 mbr-embla cid-u6k7q0yLdW"
+    id="erntefest"
+    v-for="event in events"
+  >
     <div class="container-fluid">
       <div class="row">
         <h4
@@ -88,10 +136,9 @@ export default {
           <strong>{{ event.title }}</strong>
         </h4>
         <div class="col-12">
-          <br>
+          <br />
-          <Embla :src="event.src" />
+          <Embla :src="event.src" :links="event.links" />
         </div>
-        
       </div>
     </div>
     <br /><br /><br />