✔ Galerie

[PrincePitt]

Hallo ich möchte eine Galerie erstellen die sich Bilder aus einem Ordner holt. Diese Bilder sind alle von 1 bis 100 nummeriert und im jpg gespeichert. Soweit so gut zum Plan .
Die Thumbnails bekomme ich unten angezeigt doch jetzt möchte ich das genau das Bild was anklickt wird auch oben im display angezeigt wird. Bis jetzt wird mir meine variable imagesnumber weiter gezählt. Ich hoffe einige erfahrene Javascript experten können mir hier weiter helfen.

Hier der Html code:

<button id="backslide" onclick="backslide()">zurück</button> 
<img id="display"/>
<button id="frontslide" onclick="frontslide()">vor</button>
<div class="clear"></div>

<div id="slide"></div>

und hier die Js :

var imagesnumber = 1;
var i = 7;
var images = document.createElement('img');
    images.src="images/"+imagesnumber+".jpg";
    images.style.height="200px";
    images.style.maxWidth ="200px";
var ilink = document.createElement('a');
    ilink.href="#";

window.onload = slideload;
function slideload () { 
    for (imagesnumber; imagesnumber < i; imagesnumber++){ 
    var ilink = document.createElement('a');
        ilink.href="#";
    var images = document.createElement('img');
        images.src="images/"+imagesnumber+".jpg";
        images.style.height="200px";
        images.style.maxWidth ="200px";
        images.addEventListener("click", displayshow, false);
        ilink.appendChild(images);
        document.getElementById('slide').appendChild(ilink); 
        }
}
function displayshow(urlvar) {
    document.getElementById("display").src="images/"+imagesnumber+".jpg";
    }

 

[Sempervivum]

Eine solche Galerie selbst zu erstellen, ist nur sinnvoll, wenn man es als Übungsaufgabe betrachtet, um Javascript zu lernen. Wenn es dir nur darum geht, eine solche Galerie auf deiner Seite zu haben, benutzt Du besser eines der vielen vorgefertigten Plugins.

 

[PrincePitt]

Genau das möchte ich ja ich möchte JavaScript lernen das ist eine Aufgabe die ich von mein Lehrer bekomme habe aber da jetzt Ferien sind und ich sonst keinen fragen kann bitte ich hier um Hilfe

 

[Sempervivum]

Hier:

function displayshow(urlvar) {
    document.getElementById("display").src="images/"+imagesnumber+".jpg";
    }

sehe ich Probleme: Du verwendest die Variable imagesnumber. Nach dem Durchlauf der Schleife hat diese jedoch den Wert 7 und das ist sicher nicht das, was Du vorhast. Außerdem definierst Du die Funktion mit einem Parameter, rufst sie aber ohne diesen auf. Außerdem verwendet man i i. allg. für eine Variable, die in der Schleife durchlaufen wird. Ich würde es genau anders herum machen:

var imagesnumber = 7;
// und weiter unten
for (var i = 1; i <= imagesnumber; i++) {
    // ...
    images.src="images/"+i+".jpg";

Weiter ist der Variablenname images semantisch unglücklich gewählt, da sich darunter ja nur ein einziges Bild verbirgt.

 

[PrincePitt]

ok ich habe das jetzt alles geändert doch das onclick reagiert nicht entweder die vardiablen werden immer nicht über geben oder es wird immer noch das falsche bild angezeigt.

 

[Sempervivum]

Informiere dich über die Variable "this" im Zusammenhang mit Eventhandlern und versuche es so:

function displayshow() {
    document.getElementById("display").src=this.src;
    }

Wenn es dann immer noch nicht geht, poste noch mal deinen vollständigen Code.

 

[PrincePitt]

Zu aller erst bedanke ich mich recht herzlich für die schnelle Hilfe von Sempervivum. Es funktioniert jetzt das mir das richtige Bild angezeigt wird. Nun habe ich aber das nächste Problem ich denke mal ich muss wieder this benutzen aber ich steige da einfach nicht hinter. Also ich möchte das wenn ich auf den vor und zurück Button drücke mir Jeweils die i variable auf allen +1 rechnet und bei zurück halt -1 so das immer ein neues Bild in die reihe aufgenommen wird und eins weggenommen wird. Nun weiß ich aber nicht wie ich auf die varibale zugreifen kann. ich habe versucht die Funktion in eine variable zu speichern und die dann noch mal auszugeben nach dem ich i geändert habe leider aber ohne erfolg. Hätte da vielleicht noch jemand eine Idee?

hier die Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" language="javascript" src="js/function.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>


<img id="display"/>

<div class="clear"></div>
<button id="backslide" onclick="backslide()">zurück</button> 
<div id="slide"></div>
<button id="frontslide" onclick="frontslide()">vor</button>
</body>
</html>

und hier die Js:

// JavaScript Document

var imagesnumber = 6;
var i = 1;
var imagesplay = "images/"+i+".jpg";
window.onload =slideload;
        function slideload (){
        imagesslide ();
        }

var imagesslide = function () {
    for (i; i <= imagesnumber; ++i ){
    var imagesplay = "images/"+i+".jpg";
    var name = document.createAttribute("name");
        name.value="bild"+i;   
    var image = document.createElement('img');
        image.src=imagesplay;
        image.style.height="200px";
        image.style.maxWidth ="200px";
        image.onclick='displayshow(imagesplay)';
        image.addEventListener("click", displayshow, false);
        image.setAttributeNode(name);
        document.getElementById('slide').appendChild(image);   
        }
}
function displayshow() {
    document.getElementById("display").src=this.src;
    }

function frontslide(){
    var i = i++;
document.getElementsByName('bild').src =imagesplay;
alert ("hallo");
        }

 

[Sempervivum]

Du initialisierst die Variable i nicht:

for (i; i <= imagesnumber; ++i ){

Wenn es so funktioniert, ist es reine Glückssache. So ist es richtig:

for (var i = 0; i <= imagesnumber; ++i ){

Um die Vor- und Zurück-Buttons zu programmieren, ist es günstiger, wenn Du statt mit this mit der Variablen i arbeitest. Damit Du in den Funktionen für Vor und Zurück darauf zugreifen kannst, muss Du diese in die Funktion imagesslide übernehmen. Es ist nicht nötig, diese Funktion als Variable anzulegen.

function imagesslide() {
    var currentidx;
    function displayshow(idx) {
        currentidx = idx;
        document.getElementById("display").src="images/"+idx+".jpg;
        }
    function frontslide(){
       currentidx += 1;
       document.getElementsByName('bild').src ="images/"+idx+".jpg;
    }
   for (var i = 0; i <= imagesnumber; i++){
        var imagesplay = "images/"+i+".jpg";
        var name = document.createAttribute("name");
        name.value="bild"+i;
        var image = document.createElement('img');
        image.src=imagesplay;
        image.style.height="200px";
        image.style.maxWidth ="200px";
        image.addEventListener("click", function(idx) {return function() {displayshow(idx)};}(i), false);
        document.getElementById('slide').appendChild(image);
       }
}

Jetzt musst Du noch dafür sorgen, dass in der Funktion frontslide() ein Übergang nach 0 stattfindet, wenn die maximale Bildnummer überschritten wird.

 

[PrincePitt]

ok ich habe das jetzt abgeschrieben weil ich es verstehen wollte was da vor sich geht und mir wurde angezeigt das frontslide keine Funktion ist dann habe ich dein ganzen Code Kopiert und die vergessenen Gänsefüßchen gesetzt und trotzdem wird mir angezeigt wenn ich auf den Button klicke das Frontslide keine Funktion ist irgendwie stehe ich echt gerade auf den schlauch. Vielleicht könntest du mir auch noch dazu mal diese Zeile erklären was da jetzt genau passiert ich möchte nicht nur Copy Pasten sondern auch verstehen .

image.addEventListener("click", function(idx) {return function() {displayshow(idx)};}(i), false);

 

[Sempervivum]

das Frontslide keine Funktion ist

Tut mir Leid, da ist mir ein Fehler unterlaufen: frontslide() ist jetzt in der Funktion imagesslide() definiert und von außen nicht sichtbar. Um das zu beheben, empfehle ich, diesen Handler ebenfalls mit addEventListener zu registrieren, und zwar innerhalb der Funktion imagesslide und außerhalb der Schleife:

function imagesslide() {
    var currentidx;
    function displayshow(idx) {
        currentidx = idx;
        document.getElementById("display").src="images/"+idx+".jpg;
    }
    function frontslide(){
       currentidx += 1;
       document.getElementsByName('bild').src ="images/"+idx+".jpg;
    }
   document.getElementById("frontslide").addEventListener("click", frontslide, false);
   for (var i = 0; i <= imagesnumber; i++){

Dieses:

image.addEventListener("click", function(idx) {return function() {displayshow(idx)};}(i), false);

ist schon etwas fortgeschrittenes Javascript. Ich erkläre es morgen, ist schon spät jetzt.