Hallo, liebe Hilfsbereiten,
diese Seite https://www.wolfgang-titze.de/listing-5-31.htm wird durch einen Klick auf den Button Fotogalerie1 aufgerufen. Unten erscheint eines von 5 Bildern zum Weiterblätten nach Klick auf einen Link(Winkel). Das funktioniert aber leider nicht. Diese Website https://www.wolfgang-titze.de habe ich vor etwa 12 Jahren nach einem Buch aus der "Dummi-Reihe" erstellt. Es ist nur eine Hobby-Website. Damals hat das Weiterblättern funktioniert. Ich möchte es gern reparieren bzw. umstellen , dass das funktioniert. Ich habe schon in den Quelltext folgendes eingesetzt: (google.load, )"1" . Leider war das erfolglos.
Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>jQuery-Galerie</title>
<script src="/js_webseite/jquery.js"></script>
<link rel="stylesheet" href="/css_webseite/jquery.fancybox.min.css" />
<script src="/js_webseite/jquery.fancybox.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #CFFD2F;
min-height: 100vh;
}
header {
height: 100px;
background: darkgreen;
display: flex;
align-items: center;
}
h1 {
color: white;
font-size: 40px;
padding: 5px;
flex: 5;
justify-content: center;
text-align: center;
}
#logo {
flex: 1;
text-align: center;
margin-left: 30px;
background: blue;
border-radius: 10px;
border: 3px solid white;
color: white;
padding: 20px 50px;
}
main {
display: flex;
flex-direction: column;
padding: 10px 50px;
min-height: calc(100vh - 150px);
}
footer {
display: flex;
height: 50px;
}
footer a {
flex: 1;
font-size: 18px;
color: white;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
background: black;
}
#thumbs {
display: flex;
width: 100%;
height: 100%;
flex-wrap: wrap;
}
#thumbs a {
height: 100px;
margin: 10px;
}
#thumbs a img {
height: 100%;
}
</style>
</head>
<body>
<header>
<div id="logo">LOGO</div>
<h1>Meine Webseite</h1>
</header>
<main>
<h1>Neue Galerie</h1>
<h3>Bitte klicken Sie auf die Bilder!!</h3>
<div id="thumbs">
<a class="lightpopup" href="/image/heivolkach.jpg">
<img src="/image/heivolkach.jpg" title="Bild 1" alt="bild"></a>
<a class="lightpopup" href="/image/flugshow.jpg">
<img src="/image/flugshow.jpg" title="Bild 2" alt="bild"></a>
<a class="lightpopup" href="/image/klassiwoerl.jpg">
<img src="/image/klassiwoerl.jpg" title="Bild 3" alt="bild"></a>
<a class="lightpopup" href="/image/schnauferl.jpg">
<img src="/image/schnauferl.jpg" title="Bild 4" alt="bild"></a>
<a class="lightpopup" href="/image/allesstuhl150.jpg">
<img src="/image/allesstuhl150.jpg" title="Stühle als Kunstwerk" alt="bild"></a>
<a class="lightpopup" href="/image/alphornbl150.jpg">
<img src="/image/alphornbl150.jpg" title="Alphornblasen und Peitschenknallen" alt="bild"></a>
<a class="lightpopup" href="/image/erdingju52_150.jpg">
<img src="/image/erdingju52_150.jpg" title="JU52 am Erdinger Moos" alt="bild"></a>
<a class="lightpopup" href="/image/flugshow.jpg">
<img src="/image/flugshow.jpg" title="Flugschau" alt="bild"></a>
<a class="lightpopup" href="/image/rickyrickmer150.jpg">
<img src="/image/rickyrickmer150.jpg" title="Im Hamburger Hafen" alt="bild"></a>
</div>
</main>
<footer>
<a href="#">Abg's</a>
<a href="#">Impressum</a>
<a href="#">Datenschutzt</a>
</footer>
<script>
$('.lightpopup').fancybox({});
</script>
</body>
</html>