Bildvorschau fertig gemacht
This commit is contained in:
R40fendt
@@ -1,146 +1,159 @@
|
||||
<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
|
||||
}
|
||||
import { RouterLink } from "vue-router";
|
||||
import Navbar from "../components/Navbar.vue";
|
||||
import RitzenbergenLib from "../ritzenbergenlib";
|
||||
import Footer from "../components/Footer.vue";
|
||||
import $ from "jquery";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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: {
|
||||
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);
|
||||
}
|
||||
method: "GET",
|
||||
data: {
|
||||
ev: this.ev,
|
||||
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);
|
||||
});
|
||||
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">
|
||||
<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>
|
||||
<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 */
|
||||
}
|
||||
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 */
|
||||
}
|
||||
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 */
|
||||
}
|
||||
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;
|
||||
}
|
||||
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 */
|
||||
}
|
||||
|
||||
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 */
|
||||
}
|
||||
table {
|
||||
width: 100%; /* Galerie über die gesamte Breite */
|
||||
}
|
||||
.galerie-section{
|
||||
margin-top: 150px;
|
||||
margin-bottom: 150px;
|
||||
|
||||
tr {
|
||||
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>
|
||||
Reference in New Issue
Block a user