JS - Bild eine URL vergeben

Y

yuro

Erfahrenes Mitglied
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.. nur wenn ich die Zahl änder bleibt er immernoch beim selben Bild.

Bin noch nicht drauf gekommen wie ich das noch umstellen könnte. Muss am IMG-Tag ein href hinzugefügt und manipuliert werden??
 
Ja, nur dadurch, dass Du einen Hash hinzufügst, ändern sich die Bilder noch nicht. Das musst Du noch ausprogrammieren. Poste doch mal deinen Code.
 
HTML: 
<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>

Javascript: 
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");
            }

bitteschön :)
 
Ich würde es so machen:
Code: 
window.onload = function () {
    count = parseInt(window.location.hash.replace(/#/, ''));
    var x = document.getElementById("IMG");
    x.setAttribute("src", "bild-" + count + ".jpg");
}
(ungetestet)
 
und wo würdest du ihn ersetzen?? Bin da gerade überfragt, was deine Lösung angeht?!
 
Moin,

also 1. sehe ich dein HTML-Element "message" nicht, dass kann schonmal nen JavaScript Fehler auslösen, der dein Skript stoppt, wenn das Dingen nicht da ist.

2. Du rufst next(var) nur auf, wenn du auf den Link klickst. Soll heißen, wenn du die Zahl in der Adresszeile eintippst. wird vlt. die Variable count gesetzt, aber der Code, der das Bild ändert, wird nicht ausgeführt. (BTW: du hast gesagt du setzt sie, in deinem Code steht es nicht so).

Allgemein:

Ich sehe noch eine konzeptionelle Schwäche. Einerseits änderst du die Bilder dynamisch per JavaScript, andererseits möchtest du es per URL-Aufruf verfügbar machen. Das geht zwar, aber wenn du es sowieso per URL-Aufruf verfügbar machen möchtest, dann kannst du in die Links auch einfach die URLs eintragen (als .. #2, #3). Und das Bild einmal beim Laden der Seite ändern (siehe Sempervivums code).

Das sähe dann halt so aus:

:confused:

1 | 2 | 3
 
Servus,

also das HTML Element "message" ist, wenn du genauer auf meinen Quellcode schaust, oben dargestellt und der löst auch keinen JS Fehler aus :) da hab ich schon nachgeschaut.

Wie schon gesagt möchte ich ja in der Adresszeile nach der Adresse die jeweilige Nummer des Bildes als Link darstellen.. D.h. als beispiel "www.domain.de/index.html#1" ..das steht also für das erste Bild in der Galerie.

Wenn ich jetzt auf "WEITER" klicke kommt #2, #3 usw., genauso ist es wenn ich "ZURÜCK" klicke, dass er wieder runterzählt.
Wenn ich jetzt in die Adresszeile die Adresse eingebe mit eine beliebigen Zahl.. z.b. #4, dann soll er das vierte Bild anzeigen in der Galerie.

Im Allgemeinen soll also jedes Bild ein eigenen Link haben, also die Raute mit der Nummer.

Den Code von Semper hab ich schon versucht, der funktioniert leider nicht für mein Vorhaben.
 
Ich bin eigentlich der Meinung, dass mein Code funktionieren sollte. Poste doch mal die URL deiner Seite, damit man es sich ansehen kann. Natürlich funktioniert das nur, wenn die Seite neu geladen wird, indem Du Enter oder Reload drückst.
 
yuro hat gesagt.:
HTML: 
<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>
Zum Vergrößern anklicken....

Da drin ist das HTML-Element "message" nicht definiert, ich weiß also nicht ob es in deinem HTML-Dokument steht.

Hier mal eine Lösung:

HTML: 
<html>
<head>
<title>JavaScript - Galerie Test</title>
<script type="text/javascript" >
count = parseInt(window.location.hash.replace("#", ""));
min = 1;
max = 5;

function prev() {   
   count -= 1;
   if (count < min) {
     count = max;
   }
   document.getElementById("image").src = "bild-" + count + ".png";
}

function next() {   
   count = count + 1;
   if (count > max) {
     count = min;
   }
   document.getElementById("image").src = "bild-" + count + ".png";
}
</script>
</head>
<body>
<img id='image' src="" /><br />
<a href="javascript:prev();">Vorheriges Bild</a> | <a href="javascript:next()">N&auml;chstes Bild</a>
<script type="text/javascript">
document.getElementById("image").src = "bild-" + count + ".png";
</script>
</body>
</html>

Das was dafür sorgt, dass hier die Bilder beim Aufruf gesetzt werden ist folgendes:

Code: 
<script type="text/javascript">
count = parseInt(window.location.hash.replace("#", "")); //Hash in Zahl umwandeln
...
</script>
...
<script type="text/javascript">
document.getElementById("image").src = "bild-" + count + ".png"; //Bild gemäß Zahl laden
</script>

Ich hoffe, das hilft dir weiter.

In Aktion findest du das ganze hier: http://englich.eu/gallery/#3

Viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück