MAGAZINiWeb

Sonderausgabe

- Shadowbox mit iWeb nutzen

Nützliche Seiten und iWeb-Hilfen

http://www.iweb-forum.deDie deutsche Nummer 1 unter den Hilfeforen zu iWeb. Hier findet ihr fast alles rund um iWeb, und bei neuen Themen wird, oft schnell nach Lösungen gesucht. Für iWebʻler ein absolutes Muss. Aktive Hilfe von Mitgliedern ist erwünscht, so kann Jeder vom Anderen lernen.

2

http://iwebfaq.orgMehrsprachige Seite mit Tipps und Tricks zu iWeb. Grosse Link-Sammlung zu diversen Themen rund um iWeb. Ebenso wie ich Einzelkämpfer mit dem Anliegen anderen zu helfen.

http://www.iweb-hilfe.deSeite mit einer kleinen Auswahl an kostenlosen Tipps zu iWeb. Es lohnt auf jeden Fall, sich nützliche Infosʻs zu holen.

http://blog.iwebmagazin.deDer Blog zum Magazin mit dem Hauptaugenmerk auf iWeb und die Internetgestaltung. Die Seite wird ständig mit neuen Tipps und Tricks zu den verschiedensten Techniken erweitert.

Ihr kennt weitere lehrreiche Seiten? - Schickt mir eine Mail, für neues bin ich immer offen!

http://iwebunlimited.comSeite mit vielen Tutorials, sowie Video Anleitungen zu iWeb. Die Seite ist zwar auf englisch, aber trotzdem ein Besuch wert.

3

Sonderausgabe - Shadowbox

Das dritte Magazin lässt auf sich warten, doch in der Zwischenzeit gibt es diese Sonderausgabe. Da das beschriebene Thema sehr umfangreich ist, kann diese Ausgabe die Wartezeit auf das neue Magazin verkürzen.

Shadowbox ist ein Spitzen-Script und es ist wirklich eine Sonder-ausgabe wert!

Ich für meinen Teil habe bisher kein Script gefunden, welches so einfach und unkompliziert zu nutzen und dabei auch noch so vielseitig von seinen Möglichkeiten ist. Egal ob Bilder, Internetseiten oder Video-Dateien. Mit diesem Script gelingt eine professionelle Präsentation der gewünschten Dateien und bietet mir Flexibilität zum Anpassen an die eigene Seite.Sicherlich ist hier ein Grundwissen bezüglich HTML Programmierung nützlich, doch mit dieser Ausgabe sollte jeder in der Lage sein die gezeigten Beispiele nachzuvollziehen und auch das Letzte aus dem Script heraus zu holen.

Autor gesucht:

Interesse am Schreiben?

Ich suche noch jemanden der ebenso wie ich Spass am schreiben hat und interessierter iWeb Nutzer ist. Hintergrundwissen zu iWeb, sowie allgemeine Techniken zum Internet wären von Vorteil. Bei Interesse einfach kurz eine Mail an ds@iwebmagazin.de mit Beschreibung der Person, und vielleicht steht schon in der nächsten Ausgabe der erste eigene Artikel.

Viel Spaß mit der Sonderausgabe des iWeb Magazins.

Euer

Didi

Herausgeber:Dietmar SchönwandtHalfesweg 3542651 Solingen

Mail:ds@iwebmagazin.de

Internet:http://www.iwebmagazin.dehttp://blog.iwebmagzin.de

Leserbriefe:ds@iwebmagazin.de

Alle Magazine:

http://issuu.com/iwebmagazin

Neues zum Blog:

http://twitter.com/iwebmagazin

4

Es gibt viele Tools und Scripte um Inhalte in die eigene Seite einzu-binden. Eines der bekanntesten ist sicherlich "Lightbox", mit dem Bilder geöffnet und in den Vorder-grund gebracht werden. Hierzu wird die eigentliche Seite mit einer transparenten Fläche überdeckt und das Bild zentriert im Browserfenster ausgegeben. Doch was, wenn man nun andere Medien präsentieren möchte?

Hier habe ich vor einiger Zeit ein interessantes Script gefunden, mit dem man nicht nur Bilder, sondern auch Internetseiten und Videos einbinden kann. Selbst gemischte Galerien aus unter-

schiedlichen Formaten lassen sich einfach mit einander verknüpfen. Auf der Entwicklerseite:http://www.shadowbox-js.com kann das Script herunter geladen werden. Für NICHT kommerzielle Seiten ist die Nutzung kostenlos, und für kommerzielle Seiten kann man eine Lizenz erwerben. Da die deutsche Umsetzung nicht so ganz gelungen ist, habe ich das Script geringfügig geändert und die Übersetzung angepasst. Ebenso habe ich eine PDF-Datei mit den Optionen für die Einstellung des Scriptes hinzugefügt und es unter:

Shadowbox mit iWeb nutzen

http://www.iwebmagazin.de/download/shadowbox-3.0.1.zip

zum Download bereit gestellt. Ein schönes Beispiel für die Leistungsfähigkeit des Scriptes kann man sich auf:http://www.iwebmagazin.de/magazin.html anschauen. Auf der Magazinseite gelangt man durch Klick auf eines der Magazine in eine Galerie, in der alle verfügbaren Magazine betrachtet und weiter geschaltet werden können. Für mich eines der schönsten Scripte in diesem Bereich.

5

Vorbereitung:Um Shadowbox in iWeb zu nutzen, benötigt man die Scriptdateien und einen HTML-Editor, mit dem man die iWeb-Seiten nachträglich bearbeiten kann. Ich für meinen Teil nutze Smultron. Der Editor ist klein, kostenlos und trotzdem effektiv. Leider wird das Programm vom Entwickler nicht mehr aktualisiert, ist aber trotzdem ein nützliches Tool für die tägliche Arbeit. Das Programm kann unter:http://smultron.sourceforge.netkostenlos herunter geladen werden. Das nützliche an diesem Tool ist die Vorschaufunktion. Hier kann man sich die geänderte Seite direkt anschauen und testen, ohne die Seite vorher im Netz zu veröffentlichen. Es geht genauso der Mac eigene Texteditor, mit Smultron ist die Angelegenheit jedoch über-sichtlicher.Den Inhalt des herunter geladenen Script-Paketes kopiere ich auf meinen Server (Beispiel:

http://www.meinserver.de/shadowbox/), oder auf Mobile.me (Beispiel: http://web.me.com/ACCOUNT_NAME/sb/) und notiere mir die Adresse, da ich diese später benötige. Dieses hat den Vorteil, dass man die Dateien nicht in jeden Seitenordner kopieren muss! Im Vorfeld sollte man sich Gedanken machen, wie man Shadowbox nutzen möchte.

Sinnvoll ist ein Bild in der iWeb-

Seite zu integrieren und dann über die Linkfunktion die gewünschte Datei(n) zu verlinken. Wenn das geschehen ist, veröffentlicht man die Seite in iWeb auf der Festplatte, oder auf den Mobile.me-Account.

HINWEIS:Die Script-Dateien auf den Server zu laden, hat den Vorteil, dass die Dateien nicht in jeden Seitenordner kopiert werden müssen!

Einbinden des Scripts:Als erstes öffne ich die erstellte iWeb-Seite mit dem HTML-Editor. Entweder geschieht dieses von meiner Festplatte oder über iDisk auf Mobile.me. Der benötigte Code für die Integration des Scripts in die Seite, befindet sich in der mitgelieferten Datei "code.txt". Dieser Code muss im Header-

Anleitung

6

Bereich der Seite platziert werden.Dazu kopiere ich den Code ans Ende vom Head- und vor den Body-Bereich (siehe Foto). Nun muss ich im Code noch die Links zu den Dateien "shadowbox.css" und "shadowbox.js" angeben. Hierzu gebe ich den kompletten Pfad zu den Dateien an Beispiel:

http://www.meinserver.de/shadowbox/shadowbox.js. Wenn man die Steuerungsdateien definiert hat, geht es an die Einstellungsoptionen der Shadowbox. Zwar liegt dem Downloadpaket die PDF-Datei mit den Parametern bei, da diese jedoch in englisch ist gehen wir jetzt erst einmal auf die Optionen der Shadowbox ein. In der

nachfolgenden Tabelle sind die Optionen, die Parameter unddie Kurzbeschreibung der Option aufgeführt. SYNTAX: Option: Parameter,

WICHTIG:Die Option endet immer mit einem Doppelpunkt und die Parameter müssen wie auf-geführt MIT, oder OHNE Aus-rufezeichen gesetzt werden.

OPTION PARAMETER BESCHREIBUNG

animate:

animateFade:

animSequence:

autoplayMovies:

continuous:

false, true

false, true

“wh“, “hw“, “sync“

false, true

false, true

Aktiviert oder deaktiviert alle Animationen - Standard=“true“ (aktiviert)

Aktiviert oder deaktiviert die Fade-Animation - Standard=“true“ (aktiviert)

Bestimmt die Animations-Sequenz beim Schliessen der Shadowbox. wh= Weite zuerst, hw=Höhe zuerst und sync=Beides synchron - Standard=“sync“

Aktiviert oder deaktiviert den Autostart von Videos - Standard=“true“ (aktiviert)

Aktiviert oder deaktiviert den automatischen Neubeginn einer Galerie vom Anfang, wenn diese am Ende angekommen ist - Standard=“false“ (deaktiviert)

7

Nach dem Parameter wird mit einem Komma die nächste Option angekündigt (außer beim Letzten, s. Bild oben).

OPTION PARAMETER BESCHREIBUNG

counterType:

displayCounter:

counterLimit:

displayNav:

enableKeys:

fadeDuration:

handleOversize:

handleUnsupported:

initialHeight:

initialWidth:

modal:

overlayColor:

“default“, “skip“

false, true

1, 2, 3.....

false, true

false, true

0.35, 0.5, ...

“none“, “resize“, “drag“

“link“, “remove“

160, ...

320, ...

false, true

“#000“

Bestimmt den angezeigten Counter Typen. Der Default-Counter ist ein einfacher Counter im Stil “1 of 5“, wobei der Skip-Counter einen separaten Link für jede Datei anzeigt - Standard=“default“

Aktiviert oder deaktiviert den Counter - Standard=“true“ (aktiviert)(Hinweis: Die Counter werden nur bei Galerien angezeigt)

Definiert die maximale Anzahl der angezeigten Links beim skip-Counter an - Standard=“10“

Aktiviert oder deaktiviert die Navigation der Galerieanzeige - Standard=“true“ (aktiviert)

Aktiviert oder deaktiviert die Möglichkeit der Steuerung von Galerien mit der Tastatur - Standard=“true“ (aktiviert)

Definiert die Dauer (in Sekunden) der Fade-Animation beim Öffnen der Shadowbox - Standard=“0.35“

Bestimmt die Vorgehensweise bei Inhalten die grösser als der Anzeigebereich sind. Mit dem “none“ Parameter wird die Grösse im Original belassen, auch wenn hierdurch nur ein Teil des Inhaltes angezeigt wird (Der Inhalt wird beschnitten). Durch den Parameter “resize“ wird der Inhalt dynamisch an den Anzeigebereich angepasst. der “drag“ Parameter (für Bilder) belässt den Inhalt in der original Grösse, der Inhalt kann jedoch im Anzeigebereich verschoben werden. - Standard=“resize“

Über diese Option wird die Vorgehensweise bei nicht unterstützten Medien-Formaten geregelt. Hierbei geht es um Medien, die ein Plugin benötigen, damit sie auf dem Computer angezeigt werden können. Der “link“ Parameter zeigt eine benutzerfreundliche Fehlermeldung mit einem Link zum fehlenden Plugin. “remove“ deaktiviert einfach nur die Anzeige des nicht unterstützten Medientypen in der Galerieanzeige. - Standard=“link“

Definiert die Anfangshöhe des Anzeigebereichs, der beim Start der Shadobox im nicht gefüllten Zustand angezeigt wird - Standard=“160“

Definiert die Anfangsbreite des Anzeigebereichs, der beim Start der Shadobox im nicht gefüllten Zustand angezeigt wird - Standard=“320“

In diesem Mode kann die Shadowbox nicht durch einen Mausklick auf den überlagerten Bereich geschlossen werden - Standard=“false“ (deaktiviert)

Definiert die Farbe für den überlagerten Bereich (als 3-stelliger hexadezimal Code, 6-stellig funktioniert aber genauso) - Standard=“#000“

8

OPTION PARAMETER BESCHREIBUNG

overlayOpacity:

resizeDuration:

showOverlay:

showMovieControls:

skipSetup:

slideshowDelay:

troubleElements:

viewportPadding:

0.5, 0.6, ...

0.35, 0.5, ...

false, true

false, true

false, true

0, 1, 2, .....

["select", "object", "embed", "canvas"]

10, 15, ...

Über diese Option wird die Deckkraft des überlagerten Bereiches eingestellt. Je kleiner der Wert, umso größer ist die Transparenz - Standard=“0.5“

Definiert die Dauer (in Sekunden) der Fade-Animation beim Schliessen der Shadowbox - Standard=“0.35“

Definiert ob die Überlagerung angezeigt wird oder nicht - Standard=“true“ (aktiviert)

Aktiviert oder deaktiviert die Steuerungsleiste des jeweiligen Medienplayers - Standard=“true“ (aktiviert)

Diese Option überspringt den automatischen Aufruf der Shadowbox.setup wenn Shadowbox initialisiert wird - Standard=“true“ (aktiviert)

Definiert die Verzögerung (in Sekunden) innerhalb einer Slideshow. Je höher der Wert, umso länger wird der Inhalten angezeigt - Standard=“0“

Definiert eine Anzahl vom HTML-Tags und Elementen, die während einer Überlagerung im modal-Modus nicht angezeigt werden. Einige Browser sind nicht in der Lage mehrere transparente Bereiche gleichzeitig anzuzeigen. Die Sichtbarkeit wir wieder hergestellt, wenn die Shadowbox geschlossen wird. - Standard=“["select", "object", "embed", "canvas"]“

Definiert den inneren Randabstand vom Inhalt zum Anzeigebereich - Standard=“20“

Beispiel-Code<!-- Start Shadowbox --><link rel="stylesheet" type="text/css" href="SERVERORT/shadowbox.css"><script type="text/javascript" src="SERVERORT/shadowbox.js"></script><script type="text/javascript">Shadowbox.init({ overlayColor:" " "#000", overlayOpacity:" " 0.8 });</script><!-- Ende Shadowbox -->

Die im Beispielcode rot gekennzeichneten Bereiche müssen von jedem der die Shadowbox individuell verwenden möchte angepasst werden. Wichtig wie bereits Anfangs erwähnt die Dateien shadowbox.css und

shadowbox.js auf dem eigenen Server abzulegen. SERVERORT gibt hierbei die Adresse zu den Dateien an. Unter Shadowbox.init können die Optionen und Para-meter beliebig modifiziert werden. Hinter jeder Zeile mit einer Option

eingeschlossen Parameter kommt ein Komma, bis auf in der letzten Zeile. Besonders gut gefällt mir die Option “overlayColor“, mit der ich die Überlagerungsfarbe auf meine Seite anpassen kann.

9

Beim Einbinden von Inhalten, egal ob Bilder, Videos oder Webseiten, sollte man immer den vollständigen Link zu der Datei angeben. Also Datei auf den Server laden (wenn nicht schon geschehen) und dann den gewünschten Inhalt über die Hyperlink-Einstellung in iWeb verlinken. Dabei den kompletten Link, mit http://... usw. angeben. Den Haken „Link in neuem Fenster öffnen“ lassen wir deaktiviert. Nach dem

Veröffentlichen der Seite, laden wir die Seite in den HTML-Editor unserer Wahl und fügen den Code mit den Optionen in den Head-Bereich der Seite ein. Ist das geschehen, sucht man im HTML-Code nach der Codezeile mit dem Hyperlink. Dieser befindet sich in der Regel ziemlich am Ende des HTML-Codes. Da man die Linkadresse jedoch kennt, sollte man die Zeilen schnell finden.

Beispiel-Code

<a href="http://www.schoenwandt.info/alben/shadowbox/muschel.jpg" title="http://www.schoenwandt.info/alben/shadowbox/muschel.jpg"><img src="test_files/muschel.png" alt="" style="border: none; height: 225px; width: 236px; " /></a>

Bei dem oben gezeigten Beispiel wurde auf ein Foto verlinkt, welches auf meinem Server liegt.href=“...“ gibt die Linkadresse an und title="..." ist der Titel, welcher in einem Infofenster angezeigt wird, wenn man mit dem Cursor auf dem Link verweilt. Der Titel wird von iWeb automatisch mit der Linkadresse versehen, was nach meiner Meinung unschön programmiert ist. Hier kann ich jeden x-beliebigen Text eintragen.alt="" wird von iWeb vernach-lässigt, wobei auch hier ein

alternativer Linktext eingetragen werden kann. Dieser wird angezeigt, wenn der Browser die eigentliche Darstellung des Links nicht unterstützt. Sinnvoll ist hier ebenfalls eine Beschreibung einzutragen, da Suchmaschinen nach solchen Texten suchen. Also, schaden wird es nicht, wenn man sich etwas Zeit lässt den Link anzupassen. Der Titel dient ebenfalls als Überschrift der Shadowbox, wird also beim Öffnen angezeigt. Der Link href=“...“ bleibt logischer Weise

stehen, da dieses unser eigentlicher Link zum gewünschten Inhalt ist. Wird der Link gelöscht, wird der Inhalt nicht gefunden!. Die Vorarbeiten sind gemacht, aber wie spreche ich nun die Shadowbox an?Dieses ist eigentlich recht einfach! Ich setzte einen zusätzlichen Code vor die Linkadresse. Der Befehl rel="shadowbox" aktiviert die Shadowbox und zeigt den gewünschten Inhalt an.

Beispiel-Code

<a rel="shadowbox" href="http://www.schoenwandt.info/alben/shadowbox/muschel.jpg" title="http://www.schoenwandt.info/alben/shadowbox/muschel.jpg"><img src="test_files/muschel.png" alt="" style="border: none; height: 225px; width: 236px; " /></a>

Der Befehl rel="shadowbox" ist jedoch noch erweiterbar. Mit verschiedenen Parametern lässt sich jeder präparierte Link einzeln verändern und definieren. Der Head-Code nimmt die Grundeinstellungen der

Shadowbox vor und der zuvor genannte Befehl steuert den einzelnen Link, wodurch ich jeden Inhalt individuell gestalten kann. Mit dem rel="shadowbox" Befehl kann man ebenfalls die Galerie-Funktion aktivieren und

bestimmen, welcher Inhalt in welcher Galerie angezeigt wird. Auf der nächsten Seite gehen wir nun näher auf die zusätzlichen Möglichkeiten des rel="shadowbox" Befehls ein und zeigen was möglich ist!

10

Code-Beispiele

Alle Parameter innerhalb der Ausrufezeichen des rel="shadowbox" Befehls werden mit einem Semikolon getrennt.

Beispiel: rel="shadowbox;width=400;height=200"

CODE BESCHREIBUNG

rel="shadowbox"

rel="shadowbox[Galerie]"

rel="shadowbox;width=400;height=200"

Aktiviert die Shadowbox ohne zusätzliche Einstellungen

Aktiviert die Shadowbox als Galerie, wobei der Name in den rechteckigen Klammern beliebig benannt werden kann. Alle Links innerhalb einer Seite und mit dem gleichen Namen in der rechteckigen Klammer werden in der Galerie angezeigt. Alle Einstellungen für die Galerie erfolgen über den Head-Code! Innerhalb einer Galerie können auch Inhalte unterschiedlicher Formate benutzt werden, also Bilder mit Filmen, Flash-Dateien und HTML-Seiten!

Mit den Parametern width und height (in Pixeln) stelle ich die Fenstergröße des darzustellenden Inhaltes ein. Diese Parameter sind nur für Filme und Flash-Dateien.

BILD<a rel="shadowbox" href="http://www.schoenwandt.info/alben/shadowbox/muschel.jpg" title="MUSCHELBILD"><img src="test_files/muschel.png" alt="MUSCHELBILD" style="border: none; height: 225px; width: 236px; " /></a>

VIDEO UND FLASH<a rel="shadowbox;width=400;height=200" href="http://www.schoenwandt.info/video/video.mp4" title="VIDEO"><img src="test_files/muschel.png" alt="VIDEO" style="border: none; height: 225px; width: 236px; " /></a>

HTML<a rel="shadowbox" href="http://www.schoenwandt.info/video/video.html" title="HTML"><img src="test_files/muschel.png" alt="HTML" style="border: none; height: 225px; width: 236px; " /></a>

BILDERGALERIE<a rel="shadowbox[Galerie]" href="http://www.schoenwandt.info/shadowbox/daten/bilder/au.jpg" title="AU"><img src="test_files/muschel.png" alt="AU" style="border: none; height: 225px; width: 236px; " /></a><a rel="shadowbox[Galerie]" href="http://www.schoenwandt.info/alben/shadowbox/muschel.jpg" title="MUSCHEL"><img src="test_files/muschel.png" alt="MUSCHEL" style="border: none; height: 225px; width: 236px; " /></a>

11

Wie und wozu man die Shadowbox nun einsetzt, ist jedem selbst überlassen. Auf jeden Fall darauf achten, dass dieses Script für den privaten Gebrauch kostenlos ist. Möchte man die Shadowbox für gewerbliche Zwecke nutzen, kann hierfür eine Lizenz beim Programmierer erworben werden.

Meiner Meinung nach lohnt es sich auf jeden Fall.

So, und nun rann an den Speck und daran denken, probieren geht über studieren!

Viel Spaß beim Tüfteln.

Euer

Didi

MIXGALERIE<a rel="shadowbox[MIX]" href="http://www.schoenwandt.info/shadowbox/daten/bilder/au.jpg" title="AU"><img src="test_files/muschel.png" alt="AU" style="border: none; height: 225px; width: 236px; " /></a><a rel="shadowbox[MIX]" href="http://www.schoenwandt.info/alben/shadowbox/muschel.jpg" title="MUSCHEL"><img src="test_files/muschel.png" alt="MUSCHEL" style="border: none; height: 225px; width: 236px; " /></a><a rel="shadowbox[MIX]" href="http://www.schoenwandt.info/video/video.html" title="HTML"><img src="test_files/muschel.png" alt="HTML" style="border: none; height: 225px; width: 236px; " /></a><a rel="shadowbox[MIX];width=400;height=200" href="http://www.schoenwandt.info/video/video.mp4" title="VIDEO"><img src="test_files/muschel.png" alt="VIDEO" style="border: none; height: 225px; width: 236px; " /></a>

Sonderausgabe 01/2010