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”
Hey, habe problem mit der Java script datei brauche dringend hilfe :/
Danke! Super erklärt!!!
es scrollt nicht mit oder hab ich iwas falsch gemacht? 😀
du lisbeltst aber richtig hard-core
Der downloadlink ist kaputt….
wie kann man eine variable aus einer php datei in einer html datei anzeigenlassen?
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';
}
Wie kann ich das machen das ich mit den pfeiltasten Navigieren kann? Wäre cool wenn das mal erklärt wird 🙂
Beim Löwen fehlt das hintere linke Bein :D:D:D
Echt cool! Das einzige Tutorial das ich nach voll ziehen kann! Richtig gut gemacht!!
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);
}
Vielen Dank hat mir sehr geholfen
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!
warum nicht? gibts was besseres?
Kannst du das Script bitte noch mal online stellen?
warum benützt du eigentlich noch divs? ^^
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
wie kann man denn das just in time laden schreiben
Kannst du mir da bitte helfen ?
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?
* mann
Muss js und css noch iwie auf den rechner installieren?
Auch ne Möglichkeit für einen transparenten gleichfarbigen Hintergrund ist rgba als Farbton
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.
Ohh nein du monetariesierst deine Videos nicht wirklich oder? Ich hab zwar nichts dagegen aber Videos in denen es nur um Wissensweitergebung geht sollten nicht Monetariesiert werden
könntest du des mal mit der just in time machen ? des würde mich interessieren 😉
Klasse Video und danke für die Hilfe. Habe es jetzt nicht mit Bildern gemacht, sondern mit einem Login-Formular, welches dann erscheint. Tolle Sache und weiter so 🙂
-Gruß Oliver
HAHAHAHAHA, dein englisch! Popp-Upp HAHAHA Sorry
Tolle Erklärung! Total verständlich und sehr anschaulich gemacht.
@htmlworld Wo du recht hast hast du recht : ) Aber es soll ja auch nur für Bilder sein.
Also ich habs in meinem Script eingebunden 😀
Könntest du den Quelltext bitte uploaden 😀
Er hat RICHTIG was drauf! 😉
Gutes Video und DANKE =)