Shadowbox ist ein Javascript, über das man Elemente wie Bilder, Videos und HTML-Seiten von seiner eigentlich Seite hervorheben kann. Hierfür wird die eigentliche Seite mit einem Transparenten Hintergrund überlagert / abgedunkelt und das zu präsentierende Element, zentriert im Browserfenster dargestellt. Durch Fragen im Web Acappella Forum, habe ich meine Kenntnisse aus iWeb-Zeiten aufgefrischt und ein Javascript geschrieben, über das durch Aufruf einer Funktion alles andere geregelt wird.

Wichtiger Hinweis am Anfang:

Die Codezeilen auf dieser Seite können nicht kopiert und in den Seiten eingefügt werden. Die Formatierung des Codes lässt diese nicht zu. Bitte ausschließlich den Code aus der Textdatei „Code.txt“ im Downloadpaket verwenden! Ab der Version 1.2, gibt es eine weiter Scriptdatei, die verwendet werden muss, wenn man keine(n) Überschrift / Titel über dem angezeigten Element wünscht.

Hierbei unterscheiden wir in zwei Funktionen:

1. startShadowboxImage () – Diese Funktion dient zum Aufruf eines Bildes

2. startShadowboxIframe () – Diese Funktion dient zum Aufruf von HTML-Seiten und Videos

Das von mir geschrieben Script, bietet die Möglichkeit verschiedene Parameter beim Aufruf einer Funktion für die Darstellung zu übergeben, was den Vorteil hat, dass nicht für jeden Aufruf der Code für die unterschiedlichen Dateien abgeändert werden muss.

Parameter fürs Script:

adresse – hier wird der Link zur Datei übergeben. Dieses kann zu einer Datei auf meinem oder einem externen Ordner sein.

titel – Diese Angabe ist die Überschrift, welche über meinem Element erscheint

hoehe – Definiert die Höhe des Elementes (NUR BEI DER FUNKTION startShadowboxIframe ())

breite – Definiert die Breite des Elementes (NUR BEI DER FUNKTION startShadowboxIframe ())

adresse, titel, hoehe und breite sind die Bezeichnungen der Variablen, welche im Script die Werte im Code übergeben. Die Werte werden beim Aufruf der Funktionen ans Script übergeben und das Script erledigt den Rest. Der Aufruf der Funtionen erfolgt über Javascript und sieht folgendermaßen aus:

Scriptaufruf:

startShadowboxImage (‚adresse‚, ‚titel‚)

startShadowboxIframe (‚adresse‚, ‚titel‚, ‚breite‚, ‚hoehe‚)

Beispiel:

startShadowboxIframe (‚http://www.DeineSeite.de/Datei.html‚, ‚Seitenüberschrift‚, ‚800‚, ‚600‚)

Der Aufruf der Funktion kann auf zwei verschiedene Arten vollzogen werden. Entweder über den Javascript-Button aus dem Programm heraus, oder wenn man den Inhalt beim Start der Seite anzeigen möchte, dann muss nach dem Veröffentlichen der Seite in den Code eingegriffen und über den Javascript-Befehl „onload“ die Funktion gestartet  werden (dazu später mehr). Doch als Erstes müssen wir die Shadowbox und das Javascript „sbjs.js“ in unserer Seite einbinden. Ich habe ein Paket zusammengestellt, welches die Shadowbox, sowie mein Javascript beinhaltet. Dieses Paket kann hier… heruntergeladen werden. Das Paket entpackt man nach dem Download und legt den Ordner „shadowbox“ mit allen Dateien auf seinen Server. Das hat den Vorteil, dass ich bei jedem Projekt, welches ich durchführe die Dateien an einer zentralen Stelle liegen habe und nicht fünfzig mal auf meinem Server in verschiedenen Ordnern. Nach dem Hochladen, schaffe ich nun die Voraussetzungen meiner Seite in Web Acappella.

Einbinden der Scripte im Projekt:

Ich öffne mein Projekt / Seite im Programm und wähle dann im Hauptmenü des Programms – Website – Eigenschaften der Website

 

Im Bereich HTML-Code, füge ich dann folgende Codezeilen ein und passe diese dann an meine Eigenschaften an:
Das Ganze sollte dann so aussehen:

Alle nötigen Dateien sind nun eingebunden und man kann sich mit dem Aufruf der Funktionen beschäftigen. Als Erstes verwenden wir die Javascript-Button Funktion aus dem Programm heraus.

HINWEIS:

Nutzer der freien Version von Web Acappella müssen die oben aufgeführten Codezeilen von Hand im HTML-Code der Seite einbinden.

Hierfür gestaltet man seine Seite und fügt wie unten beschrieben, die Funktionsaufrufe in der Seite ein. Dann veröffentlicht man sein Projekt und öffnet die getroffenen Seiten in einem Editor. Die drei Codezeilen zu den Scriptdateien müssen dann im HEAD-Bereich der Seite eingefügt werden, damit die Shadowbox auch läuft.

Funktionsaufruf über Javascript-Button:

Wir setzen ein Element wie Bild oder Button auf unsere Seite und öffnen das Fenster für die Elementen-Einstellung, um an die Verlinkung unseres Elementes zu kommen. In unserem Beispiel, verwenden wir wie oben bereits beschrieben den Aufruf der Funktion zum starten eines Iframe-Elements:

startShadowboxIframe (‚http://www.DeineSeite.de/Datei.html‘, ‚Seitenüberschrift‘, ‚800‘, ‚600‘);

 

Nun muss die Seite nur noch veröffentlicht werden und wenn alles korrekt angegeben wurde, startet die Shadowbox und zeigt mein gewünschtes Element an.

Für den Funktionsaufruf einer Bilddatei, verwendet man den Folgenden Code:


startShadowboxImage (‚http://www.Seite.de/Bild.jpg‘, ‚Seitenüberschrift‘);

Funktionsaufruf nach Laden der Seite:

Wenn man nun möchte, dass die Shadowbox nach dem Laden der Seite automatisch startet und ein Bild oder ein anderes Element angezeigt wird, dann muss man in den HTML-Code der Seite eingreifen. Den Javascript-Befehl „onload„, kann man so einsetzen, dass unser gewünschtes Ziel erreicht wird. Da wir möchten, dass die Shadowbox nach dem Laden startet, müssen wir den Befehl mit dem Aufruf der Funktion verbinden und im BODY-TAG der Seite einfügen. Unser Code hierfür sieht bei unserem Bildbeispiel dann so aus:
onload=“startShadowboxImage (‚http://www.Seite.de/Bild.jpg‘, ‚Seitenüberschrift‘)“;

Diese würde dann so aussehen:

Ursprünglich sieht der Body-Tag so aus – <body>. Nach dem Hinzufügen unseres Aufrufs, so:
<body onload=“startShadowboxImage (‚http://www.Seite.de/Bild.jpg‘, ‚Seitenüberschrift‘)“ >

Wenn Fragen sind, dann werden diese am Besten im Web Acappella Forum gestellt, dort bin ich auch tätig.

 

Viel Spaß beim Ausprobieren und Nutzen des Scripts!

 

Be the first to comment.

Leave a Reply