Bildvorschau fertig gemacht

src/views/Bildvorschau.vue

@@ -1,67 +1,79 @@
 <script lang="ts">
-import { RouterLink } from 'vue-router';
+import { RouterLink } from "vue-router";
-import Navbar from '../components/Navbar.vue';
+import Navbar from "../components/Navbar.vue";
-import RitzenbergenLib from '../ritzenbergenlib';
+import RitzenbergenLib from "../ritzenbergenlib";
-import Footer from '../components/Footer.vue';
+import Footer from "../components/Footer.vue";
-    export default {
+import $ from "jquery";
-        data(){
+
+export default {
+  data() {
     return {
       ev: this.$route.params.ev,
       jahr: this.$route.params.jahr,
-                RitzenbergenLib
+      RitzenbergenLib,
-            }
+    };
   },
   computed: {
     bilder() {
-                return [
+      let result: any[] = [];
-                    "/erntefest/2011/pic01.jpg",
+
-                    "/erntefest/2011/pic02.jpg",
+      $.ajax(RitzenbergenLib.api("/galerie/get_bilder.php"),{
-                    "/erntefest/2011/pic03.jpg",
+        async: false,
-                    "/erntefest/2011/pic04.jpg",
+        success(data: string) {
-                    "/erntefest/2011/pic05.jpg",
+          result=JSON.parse(data);
-                ];
         },
-            bildersplitted(){
+        method: "GET",
-                let result: any[]=[];
+        data: {
-                this.bilder.forEach((element,i) => {
+          ev: this.ev,
-                    if(i%5==0){
+          jahr: this.jahr
+        }
+      });
+
+      return result;
+    },
+    bildersplitted() {
+      let result: any[] = [];
+      this.bilder.forEach((element, i) => {
+        if (i % 5 == 0) {
           result.push([]);
         }
-                    result[result.length-1].push(element);
+        result[result.length - 1].push(element);
       });
       return result;
     },
-            einereihe(){
+    einereihe() {
-                return this.bilder.length<=5;
+      return this.bilder.length <= 5;
-            }
+    },
   },
   components: {
     RouterLink,
     Navbar,
-            Footer
+    Footer,
   },
-        methods:{
+  methods: {
     capitalizeFirstLetter(str: string) {
       return str.charAt(0).toUpperCase() + str.slice(1);
-            }
+    },
-        }
+  },
-    }
+};
 </script>
 <template>
-    <Navbar/>
+  <Navbar />
   <section class="galerie-section">
     <div class="galerie-container">
       <h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
-        Vorschaubilder <br>
+      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>
+            <td v-for="column in row">
+              <RouterLink to=""
+                ><img :src="RitzenbergenLib.get_img(column)" alt="Vorschaubild"
+              /></RouterLink>
+            </td>
           </tr>
-
         </tbody>
-                   
       </table>
     </div>
   </section>
@@ -72,26 +84,27 @@ import Footer from '../components/Footer.vue';
 .galerie-container {
   width: 80%; /* Breite der Galerie anpassen */
   margin: 0 auto; /* Galerie in der Mitte ausrichten */
-        }
+}
 
-        table {
+table {
   width: 100%; /* Tabelle über die gesamte Breite des Containers */
   border-collapse: collapse; /* Zellränder entfernen */
-        }
+}
 
-        th, td {
+th,
+td {
   padding: 20px; /* Abstand zwischen Bild und Rand der Zelle */
   text-align: center; /* Text in der Mitte ausrichten */
-        }
+}
 
-        img {
+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) { 
+@media (max-width: 768px) {
   /* Smartphones (ca. Portrait-Modus) */
   table {
     width: 100%; /* Galerie über die gesamte Breite */
@@ -112,9 +125,9 @@ import Footer from '../components/Footer.vue';
     height: auto; /* Seitenverhältnis bewahren */
     margin: 0; /* Bildränder entfernen */
   }
-      }
+}
 
-    @media (min-width: 769px) and (max-width: 1024px) {
+@media (min-width: 769px) and (max-width: 1024px) {
   /* Tablets (ca. Portrait-Modus) */
   table {
     width: 80%; /* Galerie etwas schmaler */
@@ -135,12 +148,12 @@ import Footer from '../components/Footer.vue';
     height: auto; /* Seitenverhältnis bewahren */
     margin: 0; /* Bildränder entfernen */
   }
-  }
+}
-  .galerie-section{
+.galerie-section {
   margin-top: 150px;
   margin-bottom: 150px;
-  }
+}
-  .platzhalter{
+.platzhalter {
   height: 150px;
-  }
+}
 </style>