Sonderausgabe
iWeb
MAGAZIN
-S
n e z t u n b e W i t i m x o b w hado
Nützliche Seiten und iWeb-Hilfen http://www.iweb-forum.de Die 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.
http://iwebfaq.org Mehrsprachige Seite mit Tipps und Tricks zu iWeb. Grosse LinkSammlung zu diversen Themen rund um iWeb. Ebenso wie ich Einzelkämpfer mit dem Anliegen anderen zu helfen.
http://www.iweb-hilfe.de Seite mit einer kleinen Auswahl an kostenlosen Tipps zu iWeb. Es lohnt auf jeden Fall, sich nützliche Infosʻs zu holen.
http://iwebunlimited.com Seite mit vielen Tutorials, sowie Video Anleitungen zu iWeb. Die Seite ist zwar auf englisch, aber trotzdem ein Besuch wert.
http://blog.iwebmagazin.de Der 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!
2
Herausgeber: Dietmar Schönwandt Halfesweg 35 42651 Solingen
Sonderausgabe - Shadowbox Autor gesucht:
Mail: ds@iwebmagazin.de
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.
Internet: http://www.iwebmagazin.de http://blog.iwebmagzin.de Leserbriefe: ds@iwebmagazin.de
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.
Viel Spaß mit der Sonderausgabe des iWeb Magazins.
Euer
Didi
Shadowbox ist ein Spitzen-Script und es ist wirklich eine Sonderausgabe wert!
Alle Magazine:
http://issuu.com/iwebmagazin Neues zum Blog:
http://twitter.com/iwebmagazin
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 VideoDateien. 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.
3
Shadowbox mit iWeb nutzen
Es gibt viele Tools und Scripte um Inhalte in die eigene Seite einzubinden. Eines der bekanntesten ist sicherlich "Lightbox", mit dem Bilder geöffnet und in den Vordergrund 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-
4
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:
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.
Anleitung
Vorbereitung: Um Shadowbox in iWeb zu nutzen, benötigt man die Scriptdateien und einen HTMLEditor, mit dem man die iWebSeiten 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://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.
http://smultron.sourceforge.net
kostenlos 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 übersichtlicher. Den Inhalt des herunter geladenen Script-Paketes kopiere ich auf meinen Server (Beispiel:
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 HTMLEditor. 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-
5
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:
OPTION
PARAMETER
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 und die Kurzbeschreibung der Option aufgeführt. SYNTAX: Option: Parameter, WICHTIG: Die Option endet immer mit einem Doppelpunkt und die Parameter müssen wie aufgeführt MIT, oder OHNE Ausrufezeichen gesetzt werden.
BESCHREIBUNG
animate:
false, true
Aktiviert oder deaktiviert alle Animationen Standard=“true“ (aktiviert)
animateFade:
false, true
Aktiviert oder deaktiviert die Fade-Animation Standard=“true“ (aktiviert)
animSequence:
“wh“, “hw“, “sync“
Bestimmt die Animations-Sequenz beim Schliessen der Shadowbox. wh= Weite zuerst, hw=Höhe zuerst und sync=Beides synchron Standard=“sync“
autoplayMovies:
false, true
Aktiviert oder deaktiviert den Autostart von Videos Standard=“true“ (aktiviert)
continuous:
false, true
Aktiviert oder deaktiviert den automatischen Neubeginn einer Galerie vom Anfang, wenn diese am Ende angekommen ist Standard=“false“ (deaktiviert)
6
OPTION
PARAMETER
BESCHREIBUNG
counterType:
“default“, “skip“
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“
displayCounter:
false, true
Aktiviert oder deaktiviert den Counter - Standard=“true“ (aktiviert) (Hinweis: Die Counter werden nur bei Galerien angezeigt)
counterLimit:
1, 2, 3.....
Definiert die maximale Anzahl der angezeigten Links beim skipCounter an - Standard=“10“
displayNav:
false, true
Aktiviert oder deaktiviert die Navigation der Galerieanzeige Standard=“true“ (aktiviert)
enableKeys:
false, true
Aktiviert oder deaktiviert die Möglichkeit der Steuerung von Galerien mit der Tastatur - Standard=“true“ (aktiviert)
fadeDuration:
0.35, 0.5, ...
Definiert die Dauer (in Sekunden) der Fade-Animation beim Öffnen der Shadowbox - Standard=“0.35“
handleOversize:
“none“, “resize“, “drag“
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“
Nach dem Parameter wird mit einem Komma die nächste Option angekündigt (außer beim Letzten, s. Bild oben). handleUnsuppor ted:
“link“, “remove“
Ü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“
initialHeight:
160, ...
Definiert die Anfangshöhe des Anzeigebereichs, der beim Start der Shadobox im nicht gefüllten Zustand angezeigt wird Standard=“160“
initialWidth:
320, ...
Definiert die Anfangsbreite des Anzeigebereichs, der beim Start der Shadobox im nicht gefüllten Zustand angezeigt wird Standard=“320“
modal:
false, true
In diesem Mode kann die Shadowbox nicht durch einen Mausklick auf den überlagerten Bereich geschlossen werden Standard=“false“ (deaktiviert)
overlayColor:
“#000“
Definiert die Farbe für den überlagerten Bereich (als 3-stelliger hexadezimal Code, 6-stellig funktioniert aber genauso) Standard=“#000“
7
OPTION
PARAMETER
BESCHREIBUNG
overlayOpacity:
0.5, 0.6, ...
Über diese Option wird die Deckkraft des überlagerten Bereiches eingestellt. Je kleiner der Wert, umso größer ist die Transparenz Standard=“0.5“
resizeDuration:
0.35, 0.5, ...
Definiert die Dauer (in Sekunden) der Fade-Animation beim Schliessen der Shadowbox - Standard=“0.35“
showOverlay:
false, true
Definiert ob die Überlagerung angezeigt wird oder nicht Standard=“true“ (aktiviert)
showMovieContr ols:
false, true
Aktiviert oder deaktiviert die Steuerungsleiste des jeweiligen Medienplayers - Standard=“true“ (aktiviert)
skipSetup:
false, true
Diese Option überspringt den automatischen Aufruf der Shadowbox.setup wenn Shadowbox initialisiert wird Standard=“true“ (aktiviert)
slideshowDelay:
0, 1, 2, .....
Definiert die Verzögerung (in Sekunden) innerhalb einer Slideshow. Je höher der Wert, umso länger wird der Inhalten angezeigt Standard=“0“
troubleElements:
["select", "object", "embed", "canvas"]
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"]“
viewportPadding:
10, 15, ...
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
8
shadowbox.js auf dem eigenen Server abzulegen. SERVERORT gibt hierbei die Adresse zu den Dateien an. Unter Shadowbox.init können die Optionen und Parameter 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.
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 HTMLEditor 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 vernachlä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 GalerieFunktion 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!
9
CODE
BESCHREIBUNG
rel="shadowbox"
Aktiviert die Shadowbox ohne zusätzliche Einstellungen
rel="shadowbox[Galerie]"
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 HeadCode! Innerhalb einer Galerie können auch Inhalte unterschiedlicher Formate benutzt werden, also Bilder mit Filmen, Flash-Dateien und HTML-Seiten!
rel="shadowbox;width=400;height=200"
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.
Alle Parameter innerhalb der Ausrufezeichen des rel="shadowbox" Befehls werden mit einem Semikolon getrennt. Beispiel: rel="shadowbox;width=400;height=200"
Code-Beispiele 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>
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>
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>
10
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> 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
11
Sonderausgabe 01/2010