JS - Bild eine URL vergeben

[yuro]

Hallo,

und zwar hab ich folgendes Problem.
Ich hab eine kleine Gallery erstellt, wo sich bei Klick auf "Weiter" oder "Zurück" die Bilder ändern. Die haben aber noch keine eigene URL. dies wollte ich mit window.location.hash machen.

D.h. also wenn ich in der Adresszeile example.de/index.html#3 eingebe dann soll das dritte Bild in der Gallery angezeigt werden.

ich hab zwar mit window.location.hash = count; die Zahl oben in der Adresszeile stehen (z.B. example.de/index.html#2) .. nur wenn ich die Zahl änder bleibt er immernoch beim selben Bild.

 

[dbarthel]

Sei doch bitte so gut und stelle uns deinen Code zur Ansicht, oder einen Link, wo man sich das mal live ansehen kann, zur Verfügung.

 

[yuro]

<img id="IMG" src="bild-1.jpg" width="500" height="300" alt="Bild" />
<a target="_self" class="nav" href="javascript:void(0)" onclick="next(+1);"> Weiter </a>
<a target="_self" class="nav" href="javascript:void(0)" onclick="next(-1);"> Zurück </a>
<a target="_self" class="nav" href="javascript:void(0)" onclick="next(0);"> 1.Seite </a>

var count = 1;

		function next(add) {
			var x = document.getElementById("IMG"),
				message = document.getElementById("message"),
				min = 1,
				max = 3;
if(add == +1) {
				if(count < max) {
					message.innerHTML = "";
					count += 1;
					x.setAttribute("src", "bild-" + count + ".jpg");
				} else {
					message.innerHTML = "Maximale Anzahl erreicht.";
				}
			} else if(add == -1) {
				if(count > min) {
					message.innerHTML = "";
					count -= 1;
					x.setAttribute("src", "bild-" + count + ".jpg");
				} else {
					message.innerHTML = "Minimale Anzahl erreicht.";
				}
			} else {
				message.innerHTML = "";
				count = 1;
				x.setAttribute("src", "bild-" + count + ".jpg");
			}

 

[miniA4kuser]

Was willst du mit href="javascript:void(0)" bewirken? Das ist Unsinn. Wenn es kein Link ist, dann lass das href-Attribut weg und benutze CSS um das a-Element zu stylen.


Statt x.setAttribute("src", "bild-" + count + ".jpg"); solltest du lieber x.src = "bild-" + count + ".jpg"; verwenden. x als Variablenname finde ich ungünstig, bild oder imgTag oder node wäre aussagekräftiger.


onclick="next(+1);": Positive Zahlen haben kein Plus-Zeichen, daher ist if(add == +1) etwas fragwürdig.
Auch sind deine if-Abfragen suboptimal. Wenn du count sofort mit add verrechnest, sparst du dir einiges an Abfragen, da du sowieso nur auf min und max begrenzen möchtest.

.. nur wenn ich die Zahl änder bleibt er immernoch beim selben Bild.

Dein gezeigter Code zeigt ja nicht, wie du den übergebenen Hash auswertest! Also kann dir hier niemand darauf antworten und aufzeigen, was an deinem Code falsch ist.

 

[j-l-n]

...und auch noch die globalen Variablen "min" und "max"...

 

[yuro]

Das Problem ist ja das ich nicht weiss, wie ich das umsetzen kann, deswegen habe ich hier ja auch nachgefragt ob mir jemand sagen könnte wie man so etwas umsetzt

Bin kein Profi, darum entschuldige ich mich für den Anfängercode ;-)

 

[miniA4kuser]

...und auch noch die globalen Variablen "min" und "max"...

Wieso? Die sind doch mit var Kommasepariert innerhalb der Funkrion next initialisiert?

- - - Aktualisiert - - -

Das Problem ist ja das ich nicht weiss, wie ich das umsetzen kann,...

Wie du was umsetzen kannst? Du musst deine Fragen schon etwas genauer stellen und ggf. auf Teilgebiete (in deinem Code oder Vorhaben) aufteilen...

Bin kein Profi, darum entschuldige ich mich für den Anfängercode ;-)

Ist ja nicht schlimm. Ein paar Kommentare haste ja schon bekommen, die du umsetzen kannst.
Hast du dich schon einmal mit Stift und Papier hingesetzt und mal aufgezeichnet in welchen Schritten dein Code (Programm) ablaufen soll? So etwas nennt sich auch Struktogramm
Also erst einmal eine Struktur in dein Vorhaben bringen und dann Stück für Stück den Code dazu entwickeln.

 

[j-l-n]

Wieso? Die sind doch mit var Kommasepariert innerhalb der Funkrion next initialisiert?

Ei verflucht - ich nehme allles zurück. Sorry, nicht genau hingeschaut...

 

[miniA4kuser]

Ist ja auch schon spät. Aber hey... wusste ich doch das ich das mit dem href="javascript:void(0)" heute schon einmal hatte! Hier hab ichs erwähnt...

 

[yuro]

Hallo nochmal,

Also danke erstmal für deine Antworten
Hier geht es ja nicht um ein riesiges Vorhaben, dass sollte nur ein Beispielprogramm sein, wo eine beispielhafte Galerie dargestellt wird, welche 3 Buttons hat (Weiter, Zurück, Seite 1)
Bei weiter soll die Zahl inkrementiert werden und bei Zurück dementsprechend dekrementiert. Deswegen hatte ich auch zu erst setAttribute genommen der dann die Zahl (count) erhöhen/vermindern soll.
Dann wollte ich die Zahl in der Adresszeile stehen haben, sodass wenn du z.B. example.de/index.html#4 aufrufst, das 4te Bild in der Galerie angezeigt wird. Sozusagen hat jedes Bild seine URL durch die Ziffer.
Das ginge ja auch mit location.search, wo das ? anstelle der # steht ne?

Was ich jetzt noch nebenher wissen wollt zu deiner Lösung ist, warum ist es besser x.src = ... zu nehmen, obwohl es dasselbe Ergebnis bringt wie setAttribute? wo ist der Unterschied?
Was ich noch versuche ist, dass wenn du das Bild wechselst (also auf weiter bzw. zurück drückst) dass das alte Bild ausgeblendet und das neue wieder eingeblendet wird.. das wollte ich versuchen mit opacity und der transition von CSS3.. nur komm ich nicht drauf wie ich das in der Anweisung einbinden kann -.- hab irgendwie ein Denkfehler..

Dank dir nochmal @mini

 

[miniA4kuser]

Das ginge ja auch mit location.search, wo das ? anstelle der # steht ne?

Aber auch mit dem # Hash, wenn du Selfhtml...location.hash und Selfhtml...String.substr(Index Anfang, Anzahl Zeichen) in Kombination benutzt.

Was ich jetzt noch nebenher wissen wollt zu deiner Lösung ist, warum ist es besser x.src = ... zu nehmen, obwohl es dasselbe Ergebnis bringt wie setAttribute? wo ist der Unterschied?

Warum eine Methode aufrufen, wenn du den Wert direkt zuweisen kannst?

Was ich noch versuche ist, dass wenn du das Bild wechselst (also auf weiter bzw. zurück drückst) dass das alte Bild ausgeblendet und das neue wieder eingeblendet wird.. das wollte ich versuchen mit opacity und der transition von CSS3.. nur komm ich nicht drauf wie ich das in der Anweisung einbinden kann -.- hab irgendwie ein Denkfehler..

Daher mein Tipp mit Stift und Papier. Zeichne dir einen Ablaufplan, was mus vor dem laden der nächsten Seite alles passieren und wie wird das Laden der nächsten Seite initiiert bzw. was muss direkt nach dem Laden der neuen Seite alles passieren usw..., und anhand dessen kannst du dann versuchen einen Code zu bauen. Bei Fragen zu deinen Versuchen werden wir dir bestimmt weiterhelfen.

Dank dir nochmal @mini

Gern geschehn

 

[mikdoe]

Habt ihr wieder bis in die Puppen gehext

 

[kkapsner]

Positive Zahlen haben kein Plus-Zeichen

Können sie schon haben. Wird nur extrem selten verwendet.

obwohl es dasselbe Ergebnis bringt wie setAttribute

Bei Standardattributen sollte man sich setAttribute einfach abgewöhnen, da man es sonst leicht auch bei Eventlistenern verwendet, was dann zu Problemen führen kann.

Zum eigentlichen Problem: wenn sich der Hash der Seite verändert kann man über das https://developer.mozilla.org/en-US/docs/Web/API/Window.onhashchange -Event "benachrichtigt" werden.