Jeder kennt es aus verschiedenen Seiten und Tools. Man klickt auf ein kleines Bild, die Seite wird mit einem transparenten Overlay überlagert und in der Mitte wird das Bild in gross angezeigt. Mittels jQuery und von mir entwickelten Javascripten, lassen sich WebAcappella Seiten mit dieser Funktion ausstatten und Unterseiten im Overlay einblenden. Diese Unterseiten können mit allem erdenklichen Inhalt gefüllt werden. Egal ob Bilder, Videos, Diashows usw., alles was in einer Webseite integriert werden kann, kann mit dieser Technik eingeblendet werden.

Da wir für unsere Animation jQuery benötigen, binden wir wie gehabt die von WebAcappella mitgelieferte Bibliothek im Projekt ein, damit wir diese auch nutzen können. Hierfür kopieren wir die folgende Codezeile und fügen dieses in den Eigenschaften der Webseite im Head-Bereich der Seite ein:

<script type="text/javascript" src="jquery.js"></script>

Zum Einbinden von Unterseiten im Overlay benötigen wir etwas CCS-Code und für das Ein- und Ausblenden der Seiten die Javascripte, welches ebenfalls in den Eigenschaften der Webseite im Headbereich eingebunden wird. Wie schon mit der obigen Codezeile, kopieren wir den Code und fügen diesen im Programm ein.

<style> #overlay {width:100%;height:100%;background-color: rgba(0,0,0,0.8);top:0;position:fixed;left:0;opacity:0;display:none;z-index:90000;cursor:pointer;} #newscontainer {width:800px;height:600px;position:absolute;left:50%;top:50%;margin-top:-300px;margin-left:-400px;}</style>

<script>/* copyright by Dietmar Schönwandt @ http://www.blog.schoenwandt.info */ var adresse = ""; function einblendenOverlay(adresse) {
document.getElementById('newscontainer').src=adresse;with(document.getElementById('overlay').style){display='block'};$('#overlay').animate({opacity:1}, 600 );} function ausblendenOverlay() {$('#overlay').animate({opacity:0}, 600 ); setTimeout('with(document.getElementById("overlay").style){display="none";}',700);setTimeout('playStop()',600);} function playStop() {var adresse="#";document.getElementById('newscontainer').src=adresse;}</script>

Der Code ist für Unterseiten mit einer Grösse von 800 x 600 px optimiert. Wünscht man andere Grössen, dann muss man den Code dementsprechend abändern.

#newscontainer {width:800px;height:600px;position:absolute;left:50%;top:50%;margin-top:-300px;margin-left:-400px;}

800px und 600px sind die Breite und die Höhe der Seite, -300px und -400px geben immer die Hälfte der Breite und Höhe an. Diese Werte werden zur Zentrierung der Unterseite in der Mitte des Browserfensters benötigt.

Der folgende Code wird als HTML-Baustein in der Seite eingefügt, in der das Overlay benutzt werden soll. Wichtig hierbei ist, dass der HTML-Baustein immer in der obersten Ebene der Seite liegt, damit das Overlay auch den gesamten Inhalt der Hauptseite überlagert.

<div id="overlay" onclick="ausblendenOverlay()"><iframe id="newscontainer" frameborder="0" width="800px" height="600px" src="#" scrolling="no"></iframe></div>

Auch hier haben wir wieder zwei Grössenangaben für die Breite und Höhe der Unterseite. Diese Werte müssen ggf. ebenso wie der CCS-Code an die richtige Grösse angepasst werden.

Aufruf einer Seite im Overlay:

Wenn man nun Unterseite aufrufen möchte, dann kann man dieses nur über den Javascriptbutton in den Linkoptionen von WebAcappella. Hierbei ist zu berücksichtigen, dass diese Funktion nur mit Button und Bilddateien funktioniert. Die Codezeile für den Aufruf der Seite muss in der JS-Button Funktion hinterlegt werden. Hierfür wählt man das zu verlinkende Element und geht zu den Linkoptionen.

Bildschirmfoto 2014-03-02 um 12.27.01

Hier klickt man nun auf den JS-Button und fügt die unten aufgeführten Codezeilen im geöffneten Fenster ein.

Bildschirmfoto 2014-03-03 um 15.11.46

adresse='news.html'; einblendenOverlay(adresse);

Durch den Code wird die zu ladende Seite an das Script übergeben und beim Einblenden des Overlays geladen und angezeigt. Der Parameter adresse=’news.html‘ beinhaltet die Adresse der Unterseite. Ist es eine Seite aus meinem Projekt, dann reicht der Seitenname. Ist es eine externe Seite, dann muss hier die komplette Adresse zur Seite angegeben werden. Möchte man das Overlay aus einem Iframe ansprechen und aufrufen, dann muss die Codezeile so aussehen.

adresse='news.html'; parent.einblendenOverlay(adresse);

 

Be the first to comment.

Leave a Reply