Bildvorschau fertig gemacht
This commit is contained in:
R40fendt
@@ -1,146 +1,159 @@
|
|||||||
<script lang="ts">
|
<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(){
|
|
||||||
return {
|
export default {
|
||||||
ev: this.$route.params.ev,
|
data() {
|
||||||
jahr: this.$route.params.jahr,
|
return {
|
||||||
RitzenbergenLib
|
ev: this.$route.params.ev,
|
||||||
}
|
jahr: this.$route.params.jahr,
|
||||||
|
RitzenbergenLib,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
bilder() {
|
||||||
|
let result: any[] = [];
|
||||||
|
|
||||||
|
$.ajax(RitzenbergenLib.api("/galerie/get_bilder.php"),{
|
||||||
|
async: false,
|
||||||
|
success(data: string) {
|
||||||
|
result=JSON.parse(data);
|
||||||
},
|
},
|
||||||
computed: {
|
method: "GET",
|
||||||
bilder() {
|
data: {
|
||||||
return [
|
ev: this.ev,
|
||||||
"/erntefest/2011/pic01.jpg",
|
jahr: this.jahr
|
||||||
"/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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<Navbar/>
|
<Navbar />
|
||||||
<section class="galerie-section">
|
<section class="galerie-section">
|
||||||
<div class="galerie-container">
|
<div class="galerie-container">
|
||||||
<h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
|
<h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
|
||||||
Vorschaubilder <br>
|
Vorschaubilder <br />
|
||||||
{{ bilder.length }} Bilder
|
{{ bilder.length }} Bilder
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="row in bildersplitted">
|
<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">
|
||||||
</tr>
|
<RouterLink to=""
|
||||||
|
><img :src="RitzenbergenLib.get_img(column)" alt="Vorschaubild"
|
||||||
</tbody>
|
/></RouterLink>
|
||||||
|
</td>
|
||||||
</table>
|
</tr>
|
||||||
</div>
|
</tbody>
|
||||||
</section>
|
</table>
|
||||||
<div class="platzhalter" v-if="einereihe"></div>
|
</div>
|
||||||
<Footer></Footer>
|
</section>
|
||||||
|
<div class="platzhalter" v-if="einereihe"></div>
|
||||||
|
<Footer></Footer>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.galerie-container {
|
.galerie-container {
|
||||||
width: 80%; /* Breite der Galerie anpassen */
|
width: 80%; /* Breite der Galerie anpassen */
|
||||||
margin: 0 auto; /* Galerie in der Mitte ausrichten */
|
margin: 0 auto; /* Galerie in der Mitte ausrichten */
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%; /* Tabelle über die gesamte Breite des Containers */
|
width: 100%; /* Tabelle über die gesamte Breite des Containers */
|
||||||
border-collapse: collapse; /* Zellränder entfernen */
|
border-collapse: collapse; /* Zellränder entfernen */
|
||||||
}
|
}
|
||||||
|
|
||||||
th, td {
|
th,
|
||||||
padding: 20px; /* Abstand zwischen Bild und Rand der Zelle */
|
td {
|
||||||
text-align: center; /* Text in der Mitte ausrichten */
|
padding: 20px; /* Abstand zwischen Bild und Rand der Zelle */
|
||||||
}
|
text-align: center; /* Text in der Mitte ausrichten */
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 70%; /* Breite der Vorschaufotos */
|
width: 70%; /* Breite der Vorschaufotos */
|
||||||
height: auto; /* Automatisches Seitenverhältnis bewahren */
|
height: auto; /* Automatisches Seitenverhältnis bewahren */
|
||||||
margin: 0 auto; /* Bild in der Mitte der Zelle ausrichten */
|
margin: 0 auto; /* Bild in der Mitte der Zelle ausrichten */
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
/* Smartphones (ca. Portrait-Modus) */
|
/* Smartphones (ca. Portrait-Modus) */
|
||||||
table {
|
table {
|
||||||
width: 100%; /* Galerie über die gesamte Breite */
|
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;
|
tr {
|
||||||
margin-bottom: 150px;
|
display: flex; /* Bilder in einer Reihe anordnen */
|
||||||
|
flex-wrap: wrap; /* Zeilenumbruch aktivieren */
|
||||||
}
|
}
|
||||||
.platzhalter{
|
|
||||||
height: 150px;
|
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>
|
</style>
|
||||||
Reference in New Issue
Block a user