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

Wolfgang · 4. Juli 2020

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 Quelltext sieht bis jetzt wie folgt aus:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title>jQuery-Galerie</title>
<meta name="description" content="Bildergalerie">
<!--[if lte IE 6]>
<link href="galerie-ie6.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->
<link type="text/css" media="screen" rel="stylesheet"
href="css/colorbox.css" />
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.js"></script>
<script src="js/galleria/galleria-1.2.8.min.js"></script>
<script type='text/javascript'src='plugins/jquery.imagesloaded.js'>
</script>
<script type = "text/javascript">
google.load("jquery", "1");
<script type = "text/javascript"
src = "run.js">
</script>
</script>
<script type="text/javascript" src="listing-5-32-40.js"></script>
<script type="text/javaScript">
$(document).ready(function(){
function changeBGcolor() {
var obj = $("body");
$(obj).animate({ backgroundColor: "#48484C" },15000).animate({ backgroundColor: "#FFFFFF" },15000,function() {
changeBGcolor();
});
}
changeBGcolor();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
$(".gallery").galleria({
width: 600,
height: 600
});
});
</script>
<style> body{ background: #CFFD2F; } </style>
<style>
h1 {
background-color: darkgreen;
color: white;
font-size: 40px;
padding: 5px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(#example').flash({
src: 'example.swf',
width: 360,
height: 215 },
{ version: 11.2.202.251 });
});
</script>
</head>
<body onload = "init()">
<div id = "sprite"
style = "position: absolute;
top: 200px;
left: 100px;">
<img src = "freya/run0.gif"
id = "image"
alt = "running image" />
</div>
<div id="overlay"></div>
<div id="imgContainer">
<div id="imgBox"></div>
<div id="controls">
<a href="#" class="back"><</a>
<a href="#" class="forward">></a>
</div>
</div>
<h1>Neue Galerie</h1>
<h3>Bitte klicken Sie auf die Bilder!!</h3>
<div class="thumbs">
<a class="lightpopup" href="images_jquery/heivolkach.jpg">
<img src="images_jquery/heivolkachthum.jpg" title="Bild 1" />
</a>
<a class="lightpopup" href="images_jquery/flugshow.jpg"><img src="images_jquery/flugshowthumb.jpg" title="Bild 2" /></a>
<a class="lightpopup" href="images_jquery/klassiwoerl.jpg"><img src="images_jquery/klassiwoerlthumb.jpg" title="Bild 3" /></a>
<a class="lightpopup" href="images_jquery/schnauferl.jpg"><img src="images_jquery/schnauferlthumb1.jpg" title="Bild 4" /></a>
<p><a href="index.htm"><img src="zuruestarts.png" /></a></p>
</div>
<div class="gallery">
<img src="content/allesstuhl150.jpg" title="Stühle als Kunstwerk" />
<img src="content/alphornbl150.jpg" title="Alphornblasen und Peitschenknallen" />
<img src="content/erdingju52_150.jpg" title="JU52 am Erdinger Moos" />
<img src="content/flugzeug150.jpg" title="Flugschau" />
<img src="content/rickyrickmer150.jpg" title="Im Hamburger Hafen" />
</div>
</body>
</html>

Alles anzeigen

Hoffentlich könnt Ihr mir helfen.

Gruß

nextuser · 4. Juli 2020

Bei mir funktioniert das weiterblättern.

Stef · 4. Juli 2020

Hey Wolfgang,

bei mir funktioniert das Weiterblättern auch.

Wo hat es denn bei dir nicht funktioniert? Unter welchen Bedingungen?

Schöne Grüße,

Stef

basti1012 · 5. Juli 2020

Erstmal solltest du deine Fehler beseitigen ( siehe Console ).

An besten nimmst du dir etwas zeit und überarbeitest die ganze Seite.

Du benutzt verschiedene doctypen , nur inline Styls und Attributen die man heute nicht mehr benutzt.

Dann könnte man bei deiner Startseite , die Bilder die man anklicken kann mit Fancybox erweitern.

https://codepen.io/fancyapps/pen/jyEGGG ( klick mal auf die Bilder ).

Würde vieleicht besser aussehen anstatt auf den Bildlink zu verlinken.

Deine Seite neu zu machen würde mit Flexbox sehr einfach funktionieren.

https://www.html-seminar.de/css-flexbox.htm

Damit deine Webseite auch auf Handys anschaulich sind nutzt man @mediaqueries

https://www.html-seminar.de/me…ies-responsive-design.htm

Falls du lust dazu hast und nicht weiter kommst wird dir hier auch geholfen.

nextuser · 5. Juli 2020

Erstaunlich, wie oft mittlerweile in den letzten Wochen Flexboxen erwähnt wurden.

Vielleicht sollte man sowas wie ne Topic-Checkliste erstellen

Wolfgang · 5. Juli 2020

Vielen Dank für Eure Antworten. Ich habe jetzt auch bemerkt, dass das Weiterblättern mit dem Firefox auf diesem Computer nicht funktioniert, aber mit dem Browser Cromium da funktioniert es. Es wird schon so sein, dass diese Websiten-Entwicklung total veraltet ist. Wie ich das modernisieren kann, da sehe ich so schnell keine Möglichkeit.

Nochmals vielen Dank für Eure Anworten.

Gruß

nextuser · 5. Juli 2020

Wolfgang schrieb:

dass das Weiterblättern mit dem Firefox auf diesem Computer nicht funktioniert

Ich nutze auch Firefox...

Wolfgang · 7. Juli 2020

basti1012 schrieb:

Ja. Von diesem Angebot möchte ich Gebrauch machen.

nextuser · 7. Juli 2020

Deine Antwort bitte nicht als Zitat von Basti setzen.

Auch lag die Betonung seines "Angebots" sicherlich bei

basti1012 schrieb:

...und nicht weiter kommst...

Also, wo genau hakt es denn? Oder möchtest du, das es jemand komplett für dich macht? Das ist sicherlich nicht damit gemeint!

Wolfgang · 7. Juli 2020

Ich habe jetzt schon das Anfangstag geändert bzw. modernisiert. Das sieht jetzt so aus:

HTML

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>jQuery-Galerie</title>
<meta name="description" content="Bildergalerie">
<!--[if lte IE 6]>
<link href="galerie-ie6.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->
<link type="text/css" media="screen" rel="stylesheet"
href="css/colorbox.css" />
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.js"></script>
<script src="js/galleria/galleria-1.2.8.min.js"></script>
<script type='text/javascript'src='plugins/jquery.imagesloaded.js'>
</script>
<script type = "text/javascript">
google.load("jquery", "1");
<script type = "text/javascript"
src = "run.js">
</script>
</script>
<script type="text/javascript" src="listing-5-32-40.js"></script>
<script type="text/javaScript">
$(document).ready(function(){
function changeBGcolor() {
var obj = $("body");
$(obj).animate({ backgroundColor: "#48484C" },15000).animate({ backgroundColor: "#FFFFFF" },15000,function() {
changeBGcolor();
});
}
changeBGcolor();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
$(".gallery").galleria({
width: 600,
height: 600
});
});
</script>
<style> body{ background: #CFFD2F; } </style>
<style>
h1 {
background-color: darkgreen;
color: white;
font-size: 40px;
padding: 5px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(#example').flash({
src: 'example.swf',
width: 360,
height: 215 },
{ version: 11.2.202.251 });
});
</script>
</head>
<body onload = "init()">
<div id = "sprite"
style = "position: absolute;
top: 200px;
left: 100px;">
<img src = "freya/run0.gif"
id = "image"
alt = "running image" />
</div>
<div id="overlay"></div>
<div id="imgContainer">
<div id="imgBox"></div>
<div id="controls">
<a href="#" class="back"><</a>
<a href="#" class="forward">></a>
</div>
</div>
<h1>Neue Galerie</h1>
<h3>Bitte klicken Sie auf die Bilder!!</h3>
<div class="thumbs">
<a class="lightpopup" href="images_jquery/heivolkach.jpg">
<img src="images_jquery/heivolkachthum.jpg" title="Bild 1" />
</a>
<a class="lightpopup" href="images_jquery/flugshow.jpg"><img src="images_jquery/flugshowthumb.jpg" title="Bild 2" /></a>
<a class="lightpopup" href="images_jquery/klassiwoerl.jpg"><img src="images_jquery/klassiwoerlthumb.jpg" title="Bild 3" /></a>
<a class="lightpopup" href="images_jquery/schnauferl.jpg"><img src="images_jquery/schnauferlthumb1.jpg" title="Bild 4" /></a>
<p><a href="index.htm"><img src="zuruestarts.png" /></a></p>
</div>
<div class="gallery">
<img src="content/allesstuhl150.jpg" title="Stühle als Kunstwerk" />
<img src="content/alphornbl150.jpg" title="Alphornblasen und Peitschenknallen" />
<img src="content/erdingju52_150.jpg" title="JU52 am Erdinger Moos" />
<img src="content/flugzeug150.jpg" title="Flugschau" />
<img src="content/rickyrickmer150.jpg" title="Im Hamburger Hafen" /></div>
</body>
</html>

Alles anzeigen

basti1012 · 7. Juli 2020

Einige Sachen kannst du selber testen ob die in Ordnung sind.

Gebe deinen Link da ein https://validator.w3.org/ und versuche die angezeigten Fehler zu beheben, zumindest alle Errors sind wichtig und möglich die anderen auch.

Du benutzt immer noch Inline-style.

Versuche die in einer extra Datei zu packen oder mindestens alles in einem <style> Element.

Wie soll deine Seite eigentlich aussehen?

Du hast unten die Box mit den Bildern und oben nochmal Bilder die im gleichen Fenster geöffnet werden , soll das so bleiben?

Hier mal ein Beispiel wie ich es ungefähr machen würde.

https://basti1012.bplaced.net/…rdner=html-seminar&id=434

Ohne zu wissen, was deine eingebundene Scripte so machen sollen habe ich sie weg gelassen.

Wolfgang · 8. Juli 2020

Zitat

Ohne zu wissen was deine eingebundene Scripte so machen sollen habe ich sie weg gelassen.

Wenn etwas weggelassen werden muss, dann wäre das nicht schlimm. Die Hauptsache wäre, dass auf der Seite alles funktioniert.

Mit diesem Validator.w3.org , da sehe ich nicht was ich da ändern kann oder soll. Z. B. steht hier bei Zeile 19 , Column 31das Error . Die gesamte Zeile sieht so aus: <script type='text/javascript'src='plugins/jquery.imagesloaded.js'> . Da könnte ich schon etwas ändern, aber was? Inzwischen läuft das Flaya-Mädchen auch nicht mehr z. B. unter dem Flugzeug.

Ich wäre schon froh, wenn Ihr mit der Reparatur der Website helfen würdet.

Guß

Sempervivum · 8. Juli 2020

Die Fehlermeldung zu dieser Zeile ist doch sehr aussagefähig:

"No space between attributes."

<script type='text/javascript'src='plugins/jquery.imagesloaded.js'>

Da fehlt ein Leerzeichen vor dem src. Allerdings, wenn Du das type='test/javascript' weg lässt, wie ebenfalls vom Validator empfohlen, erübrigt sich das.

Insgesamt sind das nur wenige Fehler/Warnungen, da haben wir schon wesentlich Schlimmeres gesehen.

Sempervivum · 8. Juli 2020

PS: "Inzwischen läuft das Flaya-Mädchen auch nicht mehr z. B. unter dem Flugzeug." Was bedeutet das? Ich sehe nur den jetzigen Zustand, nicht wie es vorher war.

basti1012 · 9. Juli 2020

Beseitige erstmal den Fehler

Code

<script type = "text/javascript">
google.load("jquery", "1");
<script type = "text/javascript"
src = "run.js">
</script>
</script>

in das

Code

<script>
//google.load("jquery", "1");
</script>
<script src="run.js"></script>

Da der ganz am Anfang des Codes ist, könnte der beim weiteren laden der Seite Probleme machen.

Auf der Seite sehe ich kein Google Scripte, deswegen habe ich das mal auskommentiert. Teste das mal mit // und ohne //

Dann hast du 2-mal jQuery eingebunden.

Auf der Seite reicht das eine

Code

<!--
<script src="https://www.wolfgang-titze.de/js/jquery-1.6.2.js"></script>
-->
<script src="https://www.wolfgang-titze.de/js/jquery-1.8.2.min.js"></script>

Dann das

Code

<script type="text/javascript">
$(document).ready(function(){
$(#example').flash({
src: 'example.swf',
width: 360,
height: 215 },
{ version: 11.2.202.251 });
});
</script>

Da weiß ich nicht genau wie es aussehen muss , aber erstens fehlt' und dann ist .flash() nicht definiert. Zumindest aus der Seite hat es wohl keine Funktion.

Ändere das mal Testweise so

Code

<!--
<script>
$(document).ready(function(){
$('#example').flash({
src: 'example.swf',
width: 360,
height: 215,
version: '11.2.202.251'
});
});
</script>
-->

Alles anzeigen

Jetzt läuft das Mädchen auch wieder.

Ich würde mir da aber was anderes einfallen lassen.

Das lädt jedes Mal die Bilder neu. ( ca. 1000 Request die Minute).

Bei mir werden zwischen durch einige Bilder (von den Mädchen) nicht geladen was als Error in der Konsole steht.

* Link entfernt, weil existiert nicht mehr *

Wie schon mal gesagt würde ich alles neu machen, anstatt das alles wieder lauffähig zu machen (Meine Meinung )

Wolfgang · 10. Juli 2020

Gestern hatte ich wenig Zeit für Computer.

Jetzt habe ich das Erste von basti1012 mit verwirklicht. Und siehe da: Das Mädchen läuft wieder. Allerdings das Weiterblättern mit dem Firefox funktioniert auf dem einen Computer nicht. Mit dem Cromium-Webbrowser da funktioniert es. Ich habe noch einen Computer - und da funktioniert beides , also das laufende Mädchen und das Weiterblättern von diesen Bildern. Auch mit dem Firefox.

Auf jeden Fall danke ich für die Hilfe. Ich will nun noch weiter nachsehen, ob die Seite noch weiter modernisiert werden kann.

Wolfgang · 11. Juli 2020

Ich habe noch zu dem https://validator.w3 noch eine Frage: Ich hatte mir das Validator-Ergebnis ausgedruckt. Verstehen kann ich da nichts und ich habe auch nicht ändern können.

Folgendes Beispiel:<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> . Diese Zeile wurde z. B. mit "Warning" angezeigt. Es steht dort_ From line 1, column 17; to line 3 , column 6 . Was ich da nun ändern soll, das sehe ich nicht. (Ich kann aber auch nur schlecht Englisch).

tk1234 · 11. Juli 2020

Wolfgang schrieb:

Diese Zeile wurde z. B. mit "Warning" angezeigt. Es steht dort_ From line 1, column 17; to line 3 , column 6 . Was ich da nun ändern soll, das sehe ich nicht. (Ich kann aber auch nur schlecht Englisch).

Die Fehlermeldungen des Validators sind im Gegensatz zu früher doch sehr verständlich geworden - in der Zeile mit "Warning" steht auch was die Warnung verursacht: "The type attribute is unnecessary for JavaScript resources." Wenn du das aufgrund fehlender Englischkenntnisse nicht (vollständig) verstehst kannst du es auch einfach Google übersetzen lassen, dann wird daraus: "Das type-Attribut ist für JavaScript-Ressourcen nicht erforderlich." - lass das type-Attribut also einfach weg, es ist nicht mehr nötig.

basti1012 · 11. Juli 2020

Du solltest das mit den laufenden Mädchen mal ändern.

Wenn du in der Konsole kuckst, siehst du das jede menge requeste erstellt werden und nicht jeder Request hat Erfolg.

Das siehst du auch an den Mädchen, wenn über ihr das alt Attribute eingeblendet wird( wenn eins da wäre).

Das laufende Mädchen kann man auch ohne Javascript machen und nur mit Css erstellen

https://basti1012.bplaced.net/…rdner=html-seminar&id=433

Das spart nee Menge Datenvolumen und Request und der Arbeitsspeicher sollte auch weniger belastet werden

Wolfgang · 12. Juli 2020

Code

body{
overflow-x:hidden;
}
h1{
margin:0;
padding:0;
font-size:22px;
}
#frame {
width: 128px;
height: 128px;
border: 1px solid transparent;
background: url(http://sebastian1012.bplaced.net/loesungen/maedchen.png) no-repeat left top;
animation: frame-animation 1s steps(7) infinite;
}
@keyframes frame-animation {
0% {
background-position: 0px 0;
}
100% {
background-position: 0 -966px;
}
}
#frame1 {
width: 128px;
height: 128px;
border: 1px solid transparent;
background: url(http://sebastian1012.bplaced.net/loesungen/maedchen.png) no-repeat left top;
animation: frame-animation 1s steps(7) infinite, runleft 10s infinite;
}
@keyframes runleft {
0% {
margin-left:-200px;
}
100% {
margin-left:100vw;
}
}
#frame2 {
width: 128px;
height: 128px;
border: 1px solid transparent;
background: url(http://sebastian1012.bplaced.net/loesungen/maedchen.png) no-repeat left top;
animation: frame-animation 1s steps(7) infinite, runleft1 10s infinite;
}
@keyframes runleft1 {
0% {
margin-left:-200px;
transform:rotateZ(0deg);
}
50% {
margin-left:100vw;
transform:rotateZ(0deg);
}
50.1%{
transform:rotateY(180deg);
}
100%{
margin-left:-200px;
transform:rotateY(180deg);
}
}

Alles anzeigen

Das habe ich von Deiner geposteten Seite kopiert und hier eingefügt. Die beiden Zeilen in meinem Quelltext sind diese beiden Zeilen, die sich auf css beziehen:

<!--[if lte IE 6]>

<![endif]-->

href="css/colorbox.css" />

Bitte schreibe mir, soll ich diese Zeilen löschen bzw. rausschmeißen und dieses von Dir geposteten CSS ersetzen?

Gruß

Tags