• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

onload event erstellen

Javascript:
Code:
/* Slider */

function Fader(einstellungen) {
            if (!einstellungen.id || !document.getElementById(einstellungen.id)
                || einstellungen.images.length < 2) {

                return new Boolean(false);
            }

            var i, original = document.getElementById(einstellungen.id);

            this.id = einstellungen.id;
            this.images = new Array();
            this.counter = 0;

            this.element = document.createElement("span");
            this.element.className = "fader";
            original.parentNode.replaceChild(this.element, original);

            for (i = 0; i < einstellungen.images.length; i++) {
                this.images[i] = document.createElement("img");
                this.images[i].src = einstellungen.images[i];
                this.images[i].alt = "Bild";

                 if (i == 0) {
                    this.element.appendChild(this.images[i]);
                }
            }

            this.fade = function (step) {
                var fader = this, imgs = this.element.getElementsByTagName("img");

                step = step || 0;

                imgs[1].style.opacity = step/100;
                imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE?

                step = step + 2;

                if (step <= 100) {
                    this.timer = window.setTimeout(function () { fader.fade(step); }, 1);
                } else {
                    imgs[1].className = "";
                    this.element.removeChild(imgs[0]);
                    this.timer = window.setTimeout(function () { fader.next(); }, 4000);
                }
            };

            this.next = function () {
                this.counter = (this.counter < this.images.length -1) ? this.counter +1 : 0;

                this.element.appendChild(this.images[this.counter]);
                this.images[this.counter].className = "next";
                this.fade();
            };
    
/* Slider Navi */ 
    
            this.goto = function (idx) {
                this.counter = idx;

                imgs = this.element.getElementsByTagName("img");
                if (imgs[1]) {
                    imgs[1].className = "";
                    imgs[1].opacity = 1;
                    this.element.removeChild(imgs[0]);
                }
                if (imgs[0].src != this.images[this.counter].src) {
                    this.element.appendChild(this.images[this.counter]);
                    this.images[this.counter].className = "next";
                    window.clearTimeout(this.timer);
                    this.fade();
                }
            };
/* Slider Navi Ende*/   
    
        }

/* Slider Erstellung */

function erstelleFader () {
            var einstellungen = {
                id: "slideshow",
                images: ImageArr
            };

            for (var i = 0; i < einstellungen.images.length; i++) {
                document.getElementById('slider').innerHTML += '<div class="bullet" onclick="window.meine_slideshow.goto(' + i + ');"></div>';
            }
            
            if (!window.meine_slideshow) {
                window.meine_slideshow = new Fader(einstellungen);
            }
            window.meine_slideshow.next();
		}
            window.onload = erstelleFader;

/* Slider Erstellung Ende*/

/* Slider Ende */

In der Konsole habe ich folgende Nachricht gefunden:
Failed to load resource: the server responded with a status of 403 (Forbidden)
 
Zuletzt bearbeitet:
Ja, habe die komplette Ordnerstruktur in den Ordner kopiert. Wenn er das Bild nicht finden würde, müsste ja eine Meldung mit "Couldn´t load image" oder so ähnlich kommen, aber bei mir zeigt er ein Zugriffsrechtsproblem an: Failed to load resource: the server responded with a status of 403 (Forbidden)
 
Das hatte ich auch gefunden, hat aber nicht geholfen, hab es jetzt aber anders lösen können, war kein XAMPP Problem, sondern ein Zugriffsrechtsproblem bei der File selbst.
Jetzt habe ich aber noch eine andere Frage, ich habe beim Slider jetzt noch einiges ausprobiert, wie eine Lightbox beim klick darauf. Dann habe ich eine neue Seite für eine Galerie angelegt, dabei ist mir etwas grundsätzliches aufgefallen. Wie binde ich auf der Seite Tastaturbefehle wie z.B. Pfeil rechts = ein Bild weiter, Pfeil links = ein Bild zurück und ESC = Lightbox beenden. Bisher habe ich dafür Buttons benutzt, möchte aber gerne beides.

HTML:
HTML:
<div id="Galerie">
                    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://forum.jswelt.de/Bilder/Galerie/holzbrett.jpg"
style="cursor:hand; filter:blendTrans(Duration=4, Transition=16)" onclick="Bildwechsel()" alt="Gallerie"></a>
                    
                    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://forum.jswelt.de/Bilder/Galerie/holzbrett1.jpg"
style="cursor:hand; filter:blendTrans(Duration=4, Transition=16)" onclick="Bildwechsel()" alt="Gallerie"></a>
                    
                    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://forum.jswelt.de/Bilder/Galerie/holzbrett2.jpg"
style="cursor:hand; filter:blendTrans(Duration=4, Transition=16)" onclick="Bildwechsel()" alt="Gallerie"></a>
                    
                    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://forum.jswelt.de/Bilder/Galerie/holzbrett3.jpg"
style="cursor:hand; filter:blendTrans(Duration=4, Transition=16)" onclick="Bildwechsel()" alt="Gallerie"></a>
                
                <div id="light" class="white_content"><img src="http://forum.jswelt.de/Bilder/Galerie/holzbrett.jpg" id="imggallery" name="gallery" border="0">
                    <div id="previous"><a href="#" onclick="slideshowBack(); return false;">« Previous</a></div>
                    <div id="next"><a href="#" onclick="slideshowUp(); return false;"> Next »</a></div>
                    <div id="exit"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">X</a></div>
                </div>    
                <div id="fade" class="black_overlay"></div>
                </div>

CSS:
Code:
/* Galerie */

div#Galerie a img {
	position: relative; 
    top: 0; 
    left: 0;
    float: left;
	margin: 50px;
    width: 250px;
    height: 200px;
    border: 2px;
} 

/* Galerie Ende*/

/* Lightbox */

.black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    padding: 0px;
}

.white_content {
    display: none;
    position: fixed;
    top: 25%;
    left: 22%;
    height: 370px;
    z-index:1002;
    overflow: auto;
}

div#light img {
    width: 790px;
    height: 340px;
} 

div#previous a{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: white;
    position: absolute;
    
} 

div#next a{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: white;
    align: right;
    position: absolute;
    right: 20px;
    
} 

div#exit a{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: black;
    align: right;
    position: absolute;
    left: 0px;
    top: 0px;
} 
/* Lightbox Ende*/

java:
Code:
/* Vor/Zurück Gallerie */
var num=0; 

imgArray = [ 
  ["../Bilder/Slider/holzbrett.jpg"], 
  ["../Bilder/Slider/holzbrett1.jpg"], 
  ["../Bilder/Slider/holzbrett2.jpg"] 
] 

function slideshow(slide_num) { 
  document.getElementById('imggallery').src=imgArray[slide_num][0]; 
} 

function slideshowUp() { 
  num++; 
  num = num % imgArray.length; 
  slideshow(num); 
} 

function slideshowBack() { 
  num--; 
  if (num < 0) {num=imgArray.length-1;} 
  num = num % imgArray.length; 
  slideshow(num); 
}

/* Vor/Zurück Gallerie Ende*/
 
Ich habe im Html folgendes eingefügt

HTML:
<div id="light" class="white_content" onkeydown="keydown(event)">

und im script

Code:
function keydown(event) {
    if ( event.keyCode === 27 ) {
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none';
    }
};

Habe ich hierbei etwas vergessen/missachtet? Es funktioniert nämlich nicht.
 
Ich vermute du beziehst dich darauf dass ich die variable Vergessen habe?
Code:
var key = (event.which) ? event.which : event.keyCode;
Habe diese im script ergänzt aber ändert nichts am Resultat.
 
Also bei mir funktioniert's nur, wenn ich das onkeydown beim Body notiere. Bei der Erklärung bin ich mir nicht sicher, aber wahrscheinlich muss das Element, bei dem der Listener registriert ist, den Fokus haben.
 
Was funktioniert denn nicht? Am besten wäre es, wenn Du die Seite hochladen und die URL posten würdest, damit man es sich im Zusammenhang ansehen kann.
 
Ich teste nur lokal, da ich wie gesagt, mich nur gerne näher mit javascript beschäftigen möchte.
Dabei funktioniert eben die Funktion nicht, dass die Funktion des erstellten "x" Buttons auch über den Escape-Button auf der Tastatur ausgeführt wird.

HTML:
HTML:
<body onkeydown="function(e) { keydown(e || event); };">
<div id="Galerie">
                    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://forum.jswelt.de/Bilder/Galerie/holzbrett.jpg"
style="cursor:hand; filter:blendTrans(Duration=4, Transition=16)" onclick="Bildwechsel()" alt="Gallerie"></a>
                    
                    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://forum.jswelt.de/Bilder/Galerie/holzbrett1.jpg"
style="cursor:hand; filter:blendTrans(Duration=4, Transition=16)" onclick="Bildwechsel()" alt="Gallerie"></a>
                    
                    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://forum.jswelt.de/Bilder/Galerie/holzbrett2.jpg"
style="cursor:hand; filter:blendTrans(Duration=4, Transition=16)" onclick="Bildwechsel()" alt="Gallerie"></a>
                    
                    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://forum.jswelt.de/Bilder/Galerie/holzbrett3.jpg"
style="cursor:hand; filter:blendTrans(Duration=4, Transition=16)" onclick="Bildwechsel()" alt="Gallerie"></a>
                
                <div id="light" class="white_content"><img src="http://forum.jswelt.de/Bilder/Galerie/holzbrett.jpg" id="imggallery" name="gallery" border="0">
                    <div id="previous"><a href="#" onclick="slideshowBack(); return false;">« Previous</a></div>
                    <div id="next"><a href="#" onclick="slideshowUp(); return false;"> Next »</a></div>
                    <div id="exit"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">X</a></div>
                </div>    
                <div id="fade" class="black_overlay"></div>
                </div> 
</body>

CSS:
Code:
/* Galerie */

div#Galerie a img {
	position: relative; 
    top: 0; 
    left: 0;
    float: left;
	margin: 50px;
    width: 250px;
    height: 200px;
    border: 2px;
} 

/* Galerie Ende*/

/* Lightbox */

.black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    padding: 0px;
}

.white_content {
    display: none;
    position: fixed;
    top: 25%;
    left: 22%;
    height: 370px;
    z-index:1002;
    overflow: auto;
}

div#light img {
    width: 790px;
    height: 340px;
} 

div#previous a{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: white;
    position: absolute;
    
} 

div#next a{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: white;
    align: right;
    position: absolute;
    right: 20px;
    
} 

div#exit a{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: black;
    align: right;
    position: absolute;
    left: 0px;
    top: 0px;
} 
/* Lightbox Ende*/

java:
Code:
/* Vor/Zurück Gallerie */
var num=0; 

imgArray = [ 
  ["../Bilder/Slider/holzbrett.jpg"], 
  ["../Bilder/Slider/holzbrett1.jpg"], 
  ["../Bilder/Slider/holzbrett2.jpg"] 
] 

function slideshow(slide_num) { 
  document.getElementById('imggallery').src=imgArray[slide_num][0]; 
} 

function slideshowUp() { 
  num++; 
  num = num % imgArray.length; 
  slideshow(num); 
} 

function slideshowBack() { 
  num--; 
  if (num < 0) {num=imgArray.length-1;} 
  num = num % imgArray.length; 
  slideshow(num); 
}

/* Vor/Zurück Gallerie Ende*/

function keydown(event) {
    if ( event.keyCode === 27 ) {
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none';
    }
};
[/QUOTE]
 
Wenn ich dich richtig verstanden habe, möchtest Du, dass sich die Lightbox schließt, wenn man Escape drückt. Funktioniert bei mir einwandfrei. Allerdings nicht mit dem Code von micdoe sondern mit onkeydown="keydown(event);" Der Grund ist wahrscheinlich, dass man bei der Inline-Definition ein Anweisung wie einen Funktionsaufruf notieren muss, während es bei dem Code von micdoe eine Funktionsdefinition ist. Diese braucht man, wenn man innerhalb von JS einen Handler registriert.

Wenn Du dich intensiver mit Javascript beschäftigen willst, würde ich dir empfehlen, mit jQuery einzusteigen, dort brauchst Du diese Klimmzüge mit den Verzweigungen beim Eventhandling nicht.
 
Zuletzt bearbeitet:
Vielen Dank, das funktioniert jetzt soweit. Ich werde mit jQuery dann demnächst weitermachen, sobald ich die Testseite dann soweit habe, wie ich mir es jetzt als Ziel gesetzt habe. Danke für den Tipp. Wenn ich jetzt noch die Funktionen Vor- und Zurück bei der Lightshow auf den Pfeiltasten hinzufügen möchte, ähnlich wie mit der Esc-Taste, müsste ich die Funktion im Skript, meiner Logik nach, doch eigentlich nur um folgendes erweitern:
Code:
function keydown(ev) {
    if ( ev.keyCode === 37 ) {
        function slideshowBack();
    }
    else if ( ev.keyCode === 37 ) {
        function slideshowBack();
    }
    else if ( ev.keyCode === 39 ) {
        function slideshowUp();
    }
};

Da das aber bei mir nicht funktioniert habe ich anscheinend auch hierbei etwas übersehen. Könnt ihr mir hier nochmal auf die Sprünge helfen?
 
Mit diesem hier: function slideshowBack() rufst Du die Funktion nicht auf, sondern beginnst eine Funktionsdefinition, die dann unvollständig bleibt. Außerdem benutzt Du den Keycode 37 und die Funktion slideshowBack zweimal.
 
Die obere Zeile ist beim Kopieren reingerutscht. Jetzt habe ich es ausgebessert und es funktioniert, vielen Dank.

- - - Aktualisiert - - -

Jetzt hat sich doch noch ein Problem ergeben. Als letzten Schritt wollte ich die Seite automatisieren, ähnlich wie bei der ersten, sprich die Bilder sollen automatisch aus einem Ordner geladen werden und dann mit den oben im Code enthaltenen Eigenschaften auf der Seite platziert werden und bei Klick darauf, wie bisher auch, soll sich die Lightshow mit den bisher enthaltenen Funktionen und Eigenschaften öffnen, mit einer kleinen Änderung. Es soll sich das jeweils angeklickte Bild in der Lightshow öffnen und nicht immer das erste.

Ich habe die Endung der Datei auf .php geändert,
die Datei geändert
HTML:
<div id="Content">
            <h1>Bildergalerie</h1>
                <div id="Galerie">
                    <script type="text/javascript">
                                  <?php include('../PHP.php'); ?>
                                  </script>
                    <a id= Galerie><img id=Galerie></a>
,
im php script die Zeile
Code:
var ImageGallery = <?php echo json_encode(glob("../Bilder/Galerie/*.jpg")); ?>;
eingefügt
und im Javascript die Galerie abgeändert.

Das ganze funktioniert aber wiedermal überhaupt nicht. Wie muss ich denn die Codestücke im Post weiter oben korrekt abändern, damit das so wie gewollt funktioniert?
Danke schonmal.
 
Mit ziemlicher Sicherheit ist der Grund folgender: Du legst ein zweidimensionales Array an und greifst entsprechend darauf zu:
Code:
imgArray = [ 
  ["../Bilder/Slider/holzbrett.jpg"], 
  ["../Bilder/Slider/holzbrett1.jpg"], 
  ["../Bilder/Slider/holzbrett2.jpg"] 
] 

function slideshow(slide_num) { 
  document.getElementById('imggallery').src=imgArray[slide_num][0];
}
Hatte mich schon darüber gewundert, weil die zweite Dimension in diesem Zusammenhang überflüssig ist.
Das PHP-Skript legt jedoch ein eindimensionales Array an; entsprechend musst Du darauf zugreifen:
document.getElementById('imggallery').src=imgArray[slide_num];

- - - Aktualisiert - - -

PS: Mir ist aufgefallen, dass Du in deinen a-Tags zweimal das onclick notierst. Das würde ich ändern und die Anweisung mit dem Display in die Funktion Bildwechsel() übernehmen (die nebenbei in dem Code, den Du gepostet hast, nicht definiert ist). Um jeweils das aktuelle Bild zu öffnen, würde ich dessen Index als Eingangsparameter übergeben, also z. B. Bildwechsel(1);

- - - Aktualisiert - - -

PPS: Das Erstellen des HTML für die Thumbnails kannst Du übrigens ebenfalls sehr gut mit PHP automatisieren. Schau dir dazu mal die PHP-Funktionen echo und foreach an.
 
Zurück
Oben