Fehlerhafte Weiterblätter-Bildreihe lässt sich nicht weiterblättern 2

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.

Der hier verwendete Code

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>jQuery-Galerie</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /> <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/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="https://www.wolfgang-titze.de/images_jquery/heivolkach.jpg"><img src="https://www.wolfgang-titze.de/images_jquery/heivolkach.jpg" title="Bild 1" alt="bild"></a> <a class="lightpopup" href="https://www.wolfgang-titze.de/images_jquery/flugshow.jpg"><img src="https://www.wolfgang-titze.de/images_jquery/flugshow.jpg" title="Bild 2" alt="bild"></a> <a class="lightpopup" href="https://www.wolfgang-titze.de/images_jquery/klassiwoerl.jpg"><img src="https://www.wolfgang-titze.de/images_jquery/klassiwoerl.jpg" title="Bild 3" alt="bild"></a> <a class="lightpopup" href="https://www.wolfgang-titze.de/images_jquery/schnauferl.jpg"><img src="https://www.wolfgang-titze.de/images_jquery/schnauferl.jpg" title="Bild 4" alt="bild"></a> <a class="lightpopup" href="https://www.wolfgang-titze.de/content/allesstuhl150.jpg"> <img src="https://www.wolfgang-titze.de/content/allesstuhl150.jpg" title="Stühle als Kunstwerk" alt="bild"></a> <a class="lightpopup" href="https://www.wolfgang-titze.de/content/alphornbl150.jpg"> <img src="https://www.wolfgang-titze.de/content/alphornbl150.jpg" title="Alphornblasen und Peitschenknallen" alt="bild"></a> <a class="lightpopup" href="https://www.wolfgang-titze.de/content/erdingju52_150.jpg"><img src="https://www.wolfgang-titze.de/content/erdingju52_150.jpg" title="JU52 am Erdinger Moos" alt="bild"></a> <a class="lightpopup" href="https://www.wolfgang-titze.de/images_jquery/schnauferl.jpg"> <img src="https://www.wolfgang-titze.de/content/flugzeug150.jpg" title="Flugschau" alt="bild"></a> <a class="lightpopup" href="https://www.wolfgang-titze.de/content/rickyrickmer150.jpg"> <img src="https://www.wolfgang-titze.de/content/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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!