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

onload event erstellen

Mich wundert, dass wenn ich ein Bullet auslöse, das Bild aus dem zugehörigen div slider "herausrutscht" und die Position und Ebene wechselt. Die Bullets sind dann im div content an oberster stelle hinter dem Bild nicht mehr sichtbar und der Text rutscht auch hinter das Bild....Woran liegt denn dieser Effekt?

Zur Automatisierung der Bullets: Bei innerHTML hätte ich jetzt getippt, dass ich im js eine Variable (var Bulletbody) anlege und bei dieser auf die Klasse bullet verweise, zwecks Eigenschaften.
Dann eine Funktion (function createBullet) erstelle (this.element = document.createElement("div");
this.element.className = "bullet";)
 
Das Problem hatte ich anfangs auch, und zwar, wenn ich ein Bullet klickte während gerade eine Animation lief. Ich konnte es aber dann lösen und habe den Code in meinem Posting editiert. Vielleicht hast Du nicht den endgültigen Code genommen.
 
Ich habe zur Sicherheit den aktuellen Code kopiert und eingefügt. Allerdings besteht das Problem immer noch. Was hast du denn geändert, damit dieser Effekt verschwunden ist?
 
In der Funktion goto() hatte ich dieses einfügen müssen, um den Fehler wegzubekommen:
Code: 
               if (imgs[1]) {
                    imgs[1].className = "";
                    imgs[1].opacity = 1;
                    this.element.removeChild(imgs[0]);
                }
Getestet habe ich mit Firefox. Welchen Browser benutzt Du denn?
 
Habe es mit Firefox, Chrome und Safari getestet. Bei allen das selbe Resultat.

HTML:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="robots" content="index,follow">
        <meta name="description" content="Hier finden Sie alles"> 
        <meta name="keywords" content="abc, def">
        <meta name="author" content="XXX">
        <meta name="language" content="de">
        <title>XXX</title>
        <link rel="stylesheet" type="text/css" href="main.css">
        <link rel="shortcut icon" href="screenshots/Favicon.ico">
        <script type="text/javascript" src="script.js"></script>
        <style type="text/css"></style>
    </head>
    
    <body>
        <div id="Rahmen">
            <div id="header">
                <div id="Logo">
                <img src="screenshots/Logo.jpg" alt="Logo" id="logo">
                </div>
                
                <br>
                
                <div id="Navigation">
                    <ul id="Navigation">
                    <li><a href="#Beispiel">Home</a></li>
                    <li><a id="aktuell" href="#Beispiel">BSP</a>
                    <ul>
                        <li><a href="#Beispiel">BSP</a></li>
                        <li><span>Philosophie</span></li>
                        <li><a href="#Beispiel">BSP</a></li>
                    </ul>
                    </li>
                    <li><a href="#Beispiel">Galerie</a></li>
                    <li><a href="#Beispiel">BSP</a></li>
                    </ul><div></div>
                </div>
                <div id="table">
                <img src="screenshots/tafel.png" alt="table" id="table">
                <img src="screenshots/tafel2.png" alt="table" id="table2">
                </div>
            </div>
            <br>
            <div id="content">
                <div id="slider">
                   <img src="screenshots/holzbrett.jpg" alt="" id="slideshow">
                    <br>
                    <div class="bullet" onclick="window.meine_slideshow.goto(0);" style="cursor:pointer"></div>
                    <div class="bullet" onclick="window.meine_slideshow.goto(1);"></div>
                    <div class="bullet" onclick="window.meine_slideshow.goto(2);"></div>
                </div> 
                
            <h1>Herzlich Willkommen</h1>
                </div>    
             
            <br>
            
            <div id="footer">

            </div>
         
    </body>
</html>

CSS:
Code: 
html {
    background-image: url(screenshots/holz2.jpeg);
}

body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: white;
    background-color: #570F14;
    max-width: 800px;
    margin: 0 auto;
    padding: 2em 2em 4em;
}

div#Rahmen {
    padding: 15px;
    background-color: #79191F;
}

div#header {
    background-color: #79191F;
}

div#Logo {
    width: 50%;
    margin: 0 auto;
}

img#logo {
    border: solid #000000 1px;
    border-radius: 1px;
    display: block;
    -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
}

@-webkit-keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
    }
    100% {
        -webkit-filter: grayscale(0%);
    }
}

/* Navigation*/

div#Navigation {
    font-size: 12px;
    width: 782px;
    height: 35px;
    padding: 0.8em;
    position:relative;
    left: -15px;
    background-image: url(screenshots/holz.jpg);
  }

  ul#Navigation {
    margin: 0; 
    padding: 1;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  
    position: relative;
    margin: 0.4em; padding: 0;
  }


  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 2.0em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }

  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }

  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: -0.39em;
    z-index:2;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  
/* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid black;
    border-left-color: black;
    border-top-color: black;
    color: white;
    background-color: #79191F;
  }
  
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: black;
    border-left-color: black;
    border-top-color: black;
    color: white;
    background-color: #570F14;
  }

  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: white;
    background-color: #570F14;
  }

  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: #570F14;
  }

/* Navigation Ende*/

img#table {
    position: absolute;
    left:-10px;
    float: left;
}

img#table2 {
    position: absolute;
    right: 20px;
    float: right;
}

/* Slider */

div#slider {
    padding: 15px;
    position: relative; 
    top: 0; 
    left: 0;
}

.next {
    position: absolute; 
    top: 0; 
    left: 0;
    opacity: 0;
    filter:alpha(opacity=0);
}

.fader { 
    position: relative;
    display: inline-block;
}
        
.fader img {
    vertical-align: top;
}


.bullet {
    background-color: white;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 10px;
    float: left;
}

/* Slider Ende */

/* Footer */

div#footer {
    text-align: left;
    font-size: small;
    border: 1px solid black;
    position: relative;
    width: 800px;
    top: 100px;
    left: -15px;
} 

/* Footer Ende */

JS:
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;
 
               if (imgs[1]) {
                    imgs[1].className = "";
                    imgs[1].opacity = 1;
                    this.element.removeChild(imgs[0]);
                }

                this.element.appendChild(this.images[this.counter]);
                this.images[this.counter].className = "next";
                window.clearTimeout(this.timer);
                this.fade();
            };
                /* Slider Navi Ende*/   
        }

        function erstelleFader () {
            var einstellungen = {
                id: "slideshow",
                images: ["screenshots/holzbrett.jpg", "screenshots/holzbrett1.jpg","screenshots/holzbrett2.jpg"]
            };

            if (!window.meine_slideshow) {
                window.meine_slideshow = new Fader(einstellungen);
            }
            window.meine_slideshow.next();
		}
            window.onload = erstelleFader;

/* Slider Ende */
 
Ich konnte es reproduzieren: Der Fehler trat immer dann auf, wenn man auf das Bullet von dem Bild geklickt hat, das gerade angezeigt wurde.
Behoben habe ich es so:
Code: 
            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();
                }
            };
        }

- - - Aktualisiert - - -

Das automatische Erzeugen der Bullets mit innerHTML hatte ich mir so vorgestellt:
Code: 
        function erstelleFader () {
            var einstellungen = {
                id: "slideshow",
                images: ["images/1.jpg", "images/2.jpg","images/3.jpg"]
            };

            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();
		}
Ist IMO der einfachste Weg. Wenn es dich interessiert, kannst Du ja mal versuchen, die Elemente mit Javascript anzulegen und in das DOM einzufügen.
 
Vielen Dank, das funktioniert ja jetzt super. Ich werde mir erstmal in Ruhe den Code anschauen und das ganze Schritt für Schritt zu rekapitulieren.
Danach würde ich gerne folgendes versuchen:

1)Den Pfad- und Bildnamen bei images löschen und einen autoload von allen Bildern im Ordner Screenshots durchführen, so dass man neue Bilder nur in den Ordner legen muss.
Code: 
 function erstelleFader () {
            var einstellungen = {
                id: "slideshow",
                images: ["screenshots/holzbrett.jpg", "screenshots/holzbrett1.jpg","screenshots/holzbrett2.jpg"]
            };

2) Links und Rechts im Bild je einen Pfeil mit Vor und Zurückfunktion, die erscheinen wenn man sich mit dem Mauszeiger im Bild befindet.
3) Unten im Bild eine Texteinblendung, die erscheint wenn man sich mit dem Mauszeiger im Bild befindet.
4) Die Position der Bullets verschieben, Bullets automatisch unter dem Bild zentrieren.


Bei Schritt 2 und 3 bin ich mir ja sicher, dass dies möglich ist, aber ist Schritt 1 auch "einigermaßen einfach" realisierbar?
 
Zuletzt bearbeitet:
dodo33 schrieb:
Den Pfad- und Bildnamen bei images löschen und einen autoload von allen Bildern im Ordner Screenshots durchführen, so dass man neue Bilder nur in den Ordner legen muss.
Zum Vergrößern anklicken....
Geht nicht, da du mit JS nicht auf das Dateisystem des Servers zugreifen kannst.
Du musst dir die Dateinamen per AJAX von einem serverseitigen Skript holen:
PHP: 
<?php
header("Content-Type: text/html; charset=utf-8");


$path = opendir (".");
$files = array();
while($filename = readdir($path)){
    if($filename !== "." && $filename !== ".."){
        array_push($files, $filename);
    }
}
closedir ($path);

echo json_encode($files);

?>

- - - Aktualisiert - - -

Zu 2 bzw. 3: schau dir mal onmouseenter an...
 
Dann wäre es einfacher, wenn man es gleich mit PHP auf dem Server machen würde. Mit glob() ist es dann ein Einzeiler:
PHP: 
<script type="text/javascript>
var ImageArr = <?php echo json_encode(glob("screenshots/*.jpg")); ?>;
</script>
und
Code: 
        function erstelleFader () {
            var einstellungen = {
                id: "slideshow",
                images: ImageArr
            };
 
Ich habe den Code im Javascript angepasst und das PHP Codestück in eine eigene Datei (PHP.php) gepackt.
Dazu 2 Fragen:

- Für Wartungszwecke ist es wahrscheinlich einfacher PHP Code auch in eine eigene Datei zu schreiben und die ähnlich wie .js im Head einzubinden
HTML: 
(<script type="text/javascript" src="../PHP.php"></script>
Muss man dabei noch etwas beachten? Wenn ich es nämlich auf diese Weise mache, funktioniert es nicht.

PHP.php:
Code: 
var ImageArr = <?php echo json_encode(glob("screenshots/*.jpg")); ?>;

- Muss ich dann nicht die Zeile img abändern ("screenshots/*.jpg") da ja auf ein spezielles Bild im Ordner referenziert wird oder muss diese spezielle Bild dann immer im Ordner vorhanden sein?
HTML: 
div id="content">
                <div id="slider">
                   <img src="screenshots/holzbrett.jpg" alt="" id="slideshow">
                </div>
 
PHP Code auch in eine eigene Datei zu schreiben und die ähnlich wie .js im Head einzubinden
Zum Vergrößern anklicken....
Nein, so kannst Du nur Javascript-Code einbinden. Mit PHP-Include kannst Du beliebigen Code einbinden:
HTML: 
<?php include('../PHP.php'); ?>
Wegen einer einzigen Zeile lohnt sich das aber weniger.
Wenn es nicht funktioniert: Du musst außerdem beachten, dass eine Datei, die PHP-Code enthält, auch die Endung php hat.
Muss ich dann nicht die Zeile img abändern ("screenshots/*.jpg") da ja auf ein spezielles Bild im Ordner referenziert wird oder muss diese spezielle Bild dann immer im Ordner vorhanden sein?
Zum Vergrößern anklicken....
Wenn ich den Code richtig interpretiere, muss nur ein Tag mit der richtigen ID vorhanden sein, denn dieses wird durch das Skript gegen ein span-Tag ausgetauscht und die Bilder werden dynamisch eingefügt. D. h. Du kannst wahrscheinlich das src-Attribut des img-Tags weglassen.
Edit: Dieses Bild hat jedoch insofern eine gewissse Bedeutung, als es angezeigt wird, wenn Javascript im Browser ausgeschaltet ist. Man könnte statt dessen auch einen span mit einem sinnvollen Hinweistext für den Besucher verwenden.
 
Zuletzt bearbeitet:
Ok, muss ich dann
Code: 
<script type="text/javascript>
var ImageArr = <?php echo json_encode(glob("screenshots/*.jpg")); ?>;
</script>
an einer bestimmten Stelle in der HTML Datei einfügen? Funktioniert bei mir nämlich auch nicht, wenn ich es direkt in die HTML schreibe....
 
PHP ist eine serverseitige Sprache und muss daher vom Server geparst werden. Dazu musst du der Datei die Endung .php statt .html geben und auf Server ausführen (lokal: XAMPP)
 
Ah ok, hatte ich völlig überlesen, Entschuldigung.
Wenn ich den Code in die separate PHP.php Datei schreibe und via include in meine index.html dabei einbinde, muss die index.html Datei dann auch die Endung.php aufweisen, sprich index.php?
 
Ja, denn die Include-Anweisung ist auch PHP. Testest Du deine Seite lokal? Dann musst Du, wie jnl schon schrieb, einen Webserver installieren. Einfacher, und daher würde ich es dir empfehlen, ist es, wenn man den Editor MS-Webmatrix verwendet, weil dieser gleich einen Webserver mitbringt. Auch sonst zu empfehlen, weil er u. a. Syntaxfehler gleich bei der Eingabe anzeigt.

- - - Aktualisiert - - -

PS:
an einer bestimmten Stelle in der HTML Datei einfügen?
Zum Vergrößern anklicken....
Ja, weil das Skript auf die Variable ImageArr zugreift, muss diese natürlich vor den Einziehen des Skripts definiert werden.
 
Ok, hab das ganze wie beschrieben umgesetzt und es funktioniert jetzt soweit.
Aber nun werden keine Bilder mehr angezeigt, auf die in der index.php direkt verwiesen wird.
z.B.
HTML: 
 <div id="table">
                <img src="http://forum.jswelt.de/screenshots/tafel.png" alt="table" id="table">
                <img src="http://forum.jswelt.de/screenshots/tafel2.png" alt="table" id="table2">
                </div>

Woran liegt denn das?
 
Zuletzt bearbeitet:
Wo testest Du denn, lokal oder auf deinem Webspace? Wenn das letztere, würde ich vermuten, dass Du die Bilder noch nicht hochgeladen hast oder dass etwas mit den Dateinamen nicht stimmt, z. B. Groß- und Kleinschreibung. (Nehme mal an, dass die Forensoftware das http://forum.jswelt.de/ davor gesetzt hat.)
 
Zuletzt bearbeitet:
Ich teste lokal, die Dateinamen und der Pfadstimmen, das Problem tritt auch nur mit XAMPP auf, wenn ich mit meinem Editor die .html Dateien in der Live-Vorschau öffne funktioniert es. Bin nur wegen der PHP Datei zum Testen auf XAMPP umgestiegen und der Autoload funktioniert hierbei, allerdings werden eben die Bilder auf die direkt in der index.php bzw. in den .html Dateien referenziert werden nicht geladen. Und ja, das http://forum.jswelt.de/ kommt nicht von mir.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben