Bildvorschau hinzugefügt

src/router/index.ts

@@ -4,7 +4,8 @@ import Galerie from "../views/Galerie.vue";
 
 const routes = [
   { path: '/', component: () => import('../views/Main.vue') },
-  { path: '/galerie', component: Galerie }
+  { path: '/galerie', component: Galerie },
+  { path: '/bild/:ev/:jahr', component: () => import('../views/Bildvorschau.vue') },
 ]
 
 export default createRouter({

src/views/Bildvorschau.vue

@@ -0,0 +1,146 @@
+<script lang="ts">
+import { RouterLink } from 'vue-router';
+import Navbar from '../components/Navbar.vue';
+import RitzenbergenLib from '../ritzenbergenlib';
+import Footer from '../components/Footer.vue';
+    export default {
+        data(){
+            return {
+                ev: this.$route.params.ev,
+                jahr: this.$route.params.jahr,
+                RitzenbergenLib
+            }
+        },
+        computed: {
+            bilder() {
+                return [
+                    "/erntefest/2011/pic01.jpg",
+                    "/erntefest/2011/pic02.jpg",
+                    "/erntefest/2011/pic03.jpg",
+                    "/erntefest/2011/pic04.jpg",
+                    "/erntefest/2011/pic05.jpg",
+                ];
+            },
+            bildersplitted(){
+                let result: any[]=[];
+                this.bilder.forEach((element,i) => {
+                    if(i%5==0){
+                        result.push([]);
+                    }
+                    result[result.length-1].push(element);
+                });
+                return result;
+            },
+            einereihe(){
+                return this.bilder.length<=5;
+            }
+        },
+        components: {
+            RouterLink,
+            Navbar,
+            Footer
+        },
+        methods:{
+            capitalizeFirstLetter(str: string) {
+                return str.charAt(0).toUpperCase() + str.slice(1);
+            }
+        }
+    }
+</script>
+<template>
+    <Navbar/>
+    <section class="galerie-section">
+    <div class="galerie-container">
+        <h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
+        Vorschaubilder <br>
+        {{ bilder.length }} Bilder
+        <table>
+            <tbody>
+                <tr v-for="row in bildersplitted">
+                    <td v-for="column in row"><RouterLink to=""><img :src="RitzenbergenLib.get_img(column)" alt="Vorschaubild"></RouterLink></td>
+                </tr>
+
+            </tbody>
+                   
+          </table>
+      </div>
+      </section>
+      <div class="platzhalter" v-if="einereihe"></div>
+      <Footer></Footer>
+</template>
+<style scoped>
+.galerie-container {
+            width: 80%; /* Breite der Galerie anpassen */
+            margin: 0 auto; /* Galerie in der Mitte ausrichten */
+        }
+
+        table {
+        width: 100%; /* Tabelle über die gesamte Breite des Containers */
+        border-collapse: collapse; /* Zellränder entfernen */
+        }
+
+        th, td {
+        padding: 20px; /* Abstand zwischen Bild und Rand der Zelle */
+        text-align: center; /* Text in der Mitte ausrichten */
+        }
+
+        img {
+        width: 70%; /* Breite der Vorschaufotos */
+        height: auto; /* Automatisches Seitenverhältnis bewahren */
+        margin: 0 auto; /* Bild in der Mitte der Zelle ausrichten */
+        border-radius: 15px;
+        }
+
+        @media (max-width: 768px) { 
+  /* Smartphones (ca. Portrait-Modus) */
+        table {
+          width: 100%; /* Galerie über die gesamte Breite */
+        }
+
+        tr {
+          display: flex; /* Bilder in einer Reihe anordnen */
+          flex-wrap: wrap; /* Zeilenumbruch aktivieren */
+        }
+
+        td {
+          flex: 1 0 50%; /* Zellenbreite gleichmäßig aufteilen */
+          padding: 10px; /* Randabstand verringern */
+        }
+
+        img {
+          width: 100%; /* Bilder über die gesamte Zellenbreite */
+          height: auto; /* Seitenverhältnis bewahren */
+          margin: 0; /* Bildränder entfernen */
+        }
+      }
+
+    @media (min-width: 769px) and (max-width: 1024px) {
+      /* Tablets (ca. Portrait-Modus) */
+      table {
+        width: 80%; /* Galerie etwas schmaler */
+      }
+
+      tr {
+        display: flex; /* Bilder in 3 Reihen anordnen */
+        flex-wrap: wrap;
+      }
+
+      td {
+        flex: 1 0 33%; /* Zellenbreite gleichmäßig aufteilen */
+        padding: 15px; /* Randabstand etwas erhöhen */
+      }
+
+      img {
+        width: 100%; /* Bilder über die gesamte Zellenbreite */
+        height: auto; /* Seitenverhältnis bewahren */
+        margin: 0; /* Bildränder entfernen */
+      }
+  }
+  .galerie-section{
+    margin-top: 150px;
+    margin-bottom: 150px;
+  }
+  .platzhalter{
+    height: 150px;
+  }
+</style>