Ein- und Ausblenden mit Ajax wie Lightbox mit Prototype&Script.aculo.us

So, weil mein letztes Tutorial zu Ajax so gut aufgenommen wurde, hier ein weiteres. Diesmal geht es darum, wie man eine Webseite aus einer bestimmten „Farbe heraus“ ein- bzw. ausblenden kann. Ihr kennt diesen Begriff evtl. von Lightbox, wenn man auf ein Foto klickt, wird der Hintergrund abgedunkelt. Eine ähnliche Technik habe ich bei Trendschlampe angewendet. Zu beginn wird die Webseite eingeblendet, der dunkle Bildschirm wird also aufgehellt. Klicke ich einen Menüpunkt, so wird der Bildschirm wieder abgedunkelt und mit Ajax der Inhalt eingeblendet. Das ganze lässt sich natürlich auch wieder schließen, dann wird es per Ajax Effekt ausgeblendet und der Bildschirm wieder aufgehellt. Das ganze habe ich mit Prototype und Script.aculo.us realisiert.

Zunächst einmal benötigen wir unsere zwei Bibliotheken, wie man Script.aculo.us und Prototype einbindet habe hier schon in meinem ersten Tutorial erklärt: Drag&Drop mit Prototype&Script.aculo.us

Dann fügen wir auf unserer Webseite eine Div ein. Per CSS stellen wir den Hintergrund auf eine Farbe (z.B. schwarz) und die Höhe und Breite jeweils auf 100%. Um sicherzugehen, dass die “leere” Div auch wirklich auf 100% angezeigt wird, kann man noch einen Spacer (ein transparentes Bild) draufpacken. Den Wert für z-index stellen wir noch auf eine hohe Zahl (1 ist keine hohe Zahl… 5700 wäre eine hohe Zahl). Dann noch position: absolute und top: 0px und left:0px und perfekt.
Beim Aufrufen der Webseite wird also erstmal, nur die schwarze Div angezeigt, egal wieviel auf der Page drauf ist, weil die schwarze Div nämlich das “oberste” Element ist und alle anderen Elemente verdeckt. Nachdem die Seite aufgebaut ist, wird der Ajax Teil vom Browser abgearbeitet. Jetzt gehts los.

Wir beginnen mit einem Scriptaculous Effekt, mit dem wir die Div ausblenden möchten. Der Effekt heißt opacity (Deckkraft für die Fachleute: Opazität) und ist Teil der Script.aculo.us Bibliothek. Der Effekt ist typisch aufgebaut:

 new Effect.Opacity('id_of_element', [options]);

Wenn unsere Div also z.B. ‘overlay’ heißt und wir von 1.0 (also 100% Deckkraft) auf 0.0 (also 0% Deckkraft) ausblenden wollen und die Länge des Effekts 1 Sekunde betragen sollte, würde das so aussehen:

  new Effect.Opacity('overlay', {duration:1, from:1.0, to:0.0});

Danach lassen sich alle darunterliegenden Elemente erkennen, aber nicht anklicken. Man sieht die Div nicht mehr, da die Deckkraft auf 0 gestellt wurde, aber sie ist immernoch da. Deswegen müssen wir an dieser Stelle das Element ausblenden:

Element.hide($(“overlay”));

Das Ausblenden soll natürlich ERST DANN passieren, WENN der Effekt beendet wurde. Deswegen gibt es für den Effekt die Option „afterFinish“.

new Effect.Opacity("overlay", {duration:1.0, from:1.0, to:0.0, afterFinish:function(){ Element.hide("overlay"); }});

Wenn wir nun auf einen Link klicken, soll das Schwarze halbtransparent wieder eingeblendet werden. Also:

  new Effect.Opacity('overlay', {duration:1, from:0.0, to:0.7});

7.0 ist, wie man sich denken kann 70% Deckkraft. Doch das Problem ist jetzt, dass die Div zwar mit 70% Deckkraft angezeigt… werden sollte, aber nicht zu sehen ist, da sie immernoch ausgeblendet ist. Also nutzen wir auch hier wieder eine Option, diesmal beforeStart.

new Effect.Opacity("overlay", {duration:1.0, from:1.0, to:0.0, beforeStart:function(){ Element.show("overlay"); }});

Dann wird das Element zu erst wieder eingeblendet (es ist immernoch unsichtbar, da die Deckkraft 0% beträgt) und dann die Deckkraft erhöht bis zu 70% innerhalb einer Minute. Der Inhalt, der angezeigt werden soll, sollte dann natürlich ebenfalls in einer Div geladen werden, nach dem Effekt beendet ist (afterFinish). Diese Div muss natürlich einen z-index Wert besitzen, der GRÖSSER ist als die Zahl, der für den Overlay-z-index-Wert vergeben wurde. Also z.B. 59999 oder so.


—————————————– In eigener Sache ——————————-

Dir/Ihnen hat mein Tutorial gefallen oder sogar weitergeholfen? Ich würde mich sehr freuen, wenn du/Sie diesen Artikel verlinken würdest/würden, durch einen höheren Bekanntheitsgrad, des Tutorials können auch andere davon profitieren. Allerdings ist es nicht gestattet, dass Tutorial zu kopieren oder ähnliches ohne vorherige Erlaubnis, Zitieren ist Auszugsweise gestattet, aber bitte mit Link zur Originalsource. Danke

Vielleicht ist das auch interessant für dich:

• GlassBox
• Ajax-Tutorial: Drag & Drop mit Prototype/Script.aculo.us ganz einfach