JavaScript Tutorial: moderne PopUp-Fenster erstellen mit JavaScript // Bildergalerie // deutsch




In diesem Tutorial stelle ich euch vor, wir ihr ein modernes PopUp Fenster erstellen könnt, wie z.B. bei Facebook. So könnt ihr Bildergalerien erstellen, aber auch Fenster für weitere Informationen usw. So könnt ihr auch einen YouTube Player interaktiv gestalten….

Das Script zum downloaden:
http://htmlworldblog.de/?wpdmdl=463

Eine Live-Demo findest du hier:
http://htmlworldblog.de/tutorials/popup/

Hier die Links aus den Video:

MO GRAPHICS: http://www.facebook.com/momocreativity
HTMLworld: http://www.facebook.com/htmlworld

WebdesignerSupport: http://www.facebook.com/groups/213079672101091/

Webdesign-Tutorial: http://www.youtube.com/watch?v=zSYT2T5VR8A

Intro by
1mPen

Original source


31 responses to “JavaScript Tutorial: moderne PopUp-Fenster erstellen mit JavaScript // Bildergalerie // deutsch”

  1. Hier noch ein paar Optimierungsvorschläge:
    1. du könntest die weisse Fläche, die Pfeile usw. einfach in einen zusätzlichen Container packen und dann bei oeffneFenster einfach den zusätzlichen Container einblenden.
    2. anstatt jedesmal den Wert von w zu testen ginge das einfacher: document.getElementById("fst" + w).style.display = "block"; und bei der Schliess Funktion das hier anwenden:
    var i = 5;
    while(–i){
    document.querySelector("#fst" + i).style.display = 'none';
    }

  2. Vorweg schonmal, sehr schön gemacht, hab wieder was gelernt, danke.

    Ich kenne mich bei JavaScript nicht so gut aus, wo ist der unterschied eine Funktion direkt aufzurufen
    blablup()
    statt mit
    setTimout("blablup()",0)
    beides startet sofort

    Anmerkung für function next/back
    wäre es nicht leichter das so zu machen
    function next() {
    wo++;
    if (wo > 4) wo = 1;
    oeffneFenster(wo);
    }
    function back() {
    wo–;
    if (wo < 1) wo = 4;
    oeffneFenster(wo);
    }

  3. Wenn ich die Galerie jetzt um ein Bild erweitern möchte und die JS anpasse, geht zwar die transparente Fläche auf, aber er öffnet das Fenster mit dem Bild nicht!

    Ich habe alle Varianten angepasst!

  4. hey, klasse video. vielen dank fürs posten !!!
    ich hätte dazu eine bitte. ich mache alles schritt für schritt und im grunde klappt alles gut.
    nur zwei sachen machen mich verrückt. das eine sind die pfeile links und rechts, ich bekomme sie nicht aktiviert.
    der xbutton funktioniert super! und mein zweites problem sind die bilder. ich habe vier bilder und beim jedem bild wird immer das letzte bild gezoomt. obwohl immer das 'none' oder 'block' befehl richtig gesetzt ist. gruss alex

  5. du hast gesagt für umfangreichere Bildergalerien würdest du das hier nicht so empfehlen….hast du reinzufällig auch ein Tutorial in der Art für umfangreichere Galerien?

  6. HAHAHA, sorry, aber mir wäre es recht, wenn du deine englisch aussprache üben würdest. das wird nämlich nicht [poppupp] ausgesprochen, sondern [poppapp]. genauso wird apply nicht [appli], sondern [epplai] ausgesprochen.

Leave a Reply