Wel!Zoom 2

Wel!Zoom 2 für WordPress

Da nicht jeder an Quell-Text seines Blogs programmieren möchte, gibt es Wel!Zoom 2 auch als WordPress Plugin. Das Plugin ist noch nicht veröffentlicht, also Beta Status.

Download
Wel!Zoom 2 for WordPress

Die Verwendung von Wel!Zoom 2 für WordPress benötigt keinen Eingriff in die PHP-Dateien von WordPress (WP) oder des verwendeten Themas, noch sind irgendwelche Programmierkenntnisse erforderlich. Nach der Installation (oder dem kopieren) in das WP-Verzeichnis und der Aktivierung des Plugins, können alle Optionen bequem unter „Einstellungen“ – „Wel!Zoom“ vorgenommen werden.

Wurde ein Bild über die Mediathek eingefügt, lässt es sich einfach über den Bilddialog in den „Erweiterten Einstellungen“ als Wel!Zoom Objekt definieren. Hierzu genügt es eine der CSS-Zielklassen, die in der Options-Seite angegeben sind der Link CSS-Klasse zuzuordnen. Es können natürlich auch Klassen selbst definiert werden. Durch den Einsatz von mehreren Ziel-Klassen ist es Möglich Bild-Gruppen, innerhalb einer Seite, zu erstellen. Somit können verschiedene Gruppen innerhalb der Zoom-Ansicht angeschaut werden.

Wel!Zoom 2 besitzt mehrere Eigenschaften, die durch hinzufügen eines Eintrages in den „Erweiterte Linkeinstellungen“ unter „Link-Beziehung“ festgelegt werden können:

Eigenschaft Name Wert Beispiel
Hintergrundfarbe des Objekts background-color #ff0000 hex Box Hintergrund rot
Deckkraft des Objekts background-opacity 75 0..100 Box Deckkraft 75%
Abstand zum Rahmen* padding 10 int Rahmen Abstand 10px
Rahmendicke des Objects* border-width 4 int Rahmen Dicke 4px
Rahmenfarbe des Objects border-color #ff0000 hex Box Rahmen rot
Maximale Breite des Objects width 640 int Max. Breite 640px
Maximale Höhe des Objects height 480 int Max. Höhe 480px
Deckkraft des Fensterhintergrundes overlay-opacity 25 0..100 Hintergrund 25%
Farbe des Fensterhintergrundes overlay-color #ff0000 hex Hintergrundfarbe rot
Vorschau Breite* pre-view-width 16 int Vorschau Breite 16px
Vorschau Höhe* pre-view-height 16 int Vorschau Höhe 16px
Verschiebbarkeit des Objektes draggable no yes/no Nicht verschiebbar
Anzeige des Galerienavigators navigator no yes/no Kein Navigator
Objekt Unterschrift title Bild Titel string Bild mit Titel

Natürlich können auch mehrere Eigenschaften für ein Bild festgelegt werden. Der Syntax eines Eintrages ist dann in den „Link-Beziehung“ wie folgt:

Die einzelnen Eigenschaften werden hierbei immer von einem Semikolon getrennt (daher darf niemals ein Semikolon innerhalb des Textes stehen!).

Weitere Beispiele sind in der weiteren Beschreibung aufgeführt. Wobei alle Eigenschaften  sowohl in WordPress als auch außerhalb von diesen identisch sind.

Wel!Zoom 2 außerhalb von WordPress

Download
Wel!Zoom 2

Vorraussetzung zur Verwendung von Wel!Zoom 2

Wel!Zoom 2 verwendet zum einen, das Frameworke Prototype, zur Verbesserung der Cross-Browser Fähigkeit, also das  Eingebetteten von Inhalten in Webseiten (insbesondere Cascading Style Sheets und JavaScript), unabhängig des jeweiligen Browsertyp. Zum anderen Script.Aculo.Us, eine Cross-Browser Visual-Effects-Engine. Beide Scripte müssen zusätzlich eingebunden werden. Die Downloads findet man auf der jeweiligen Projektseite:

Kompatibilität

Wel!Zoom 2 wurde getestet auf:

Chrome

Einbindung von Wel!Zoom 2

Zur Einbindung die gewünschte HTML-Datei mit einem Editor öffnen (TextMate, Notepad++ etc.) und in HTML-Kopf folgende Zeilen einbinden.

Hierbei bitte genau die Reihenfolge, wie in Zeile 7 bis 9, dargestellt einhalten, da Script.Aculo.Us ebenfalls Funktionen aus Prototype verwendet.

Der in Zeile 8 dargestellte Aufruf von von Script.Aculo.Us kann jedoch zu Fehlern führen. Zwar ist, der Aufruf des Scripts so, in der Dokumentation von Script.Aculo.Us, beschrieben, bei mir führte dies jedoch häufig zu Laufzeitfehlern. Das Script scriptaculous.js dient lediglich dazu, die Dateien effect.js, bulider.js und dragdrop.js nachzuladen, so dass ich die folgende Art vorschlage:

Verwendung von Wel!Zoom 2

Miniatur Bilder / Thumbnails

Hierzu wird ein Vorschaubild, an die gewünschte Position der Seite, eingefügt und mit einem Link versehen. Anschließend die CSS-Klasse des Links, oft auch als Formatierung bezeichnet, auf welZoom2 setzen. Das Miniatur Bild hat hierbei keinen Einfluss auf Wel!Zoom 2.

Im HTML-Quelltext:

Ergebnis auf der Seite:

Link auf Bilder

Soll ein Text-Link ein Bild öffnen, den Text mit dem entsprechenden Link versehen und dem Link die CSS-Klasse welZoom2 zuweisen.

Im HTML-Quelltext:

Ergebnis auf der Seite:

Bild anzeigen!

Verlinken auf Webinhalte

Zum öffnen anderen Webinhalte, wie HTML oder PDF, einfach die URL der Seite als Link setzen und mit der CSS-Klase welZoom2 versehen.

Im HTML-Quelltext:

Ergebnis auf der Seite:

Seite öffnen!

Übergabe von Parametern und Optionen

Zur Übergabe von Parametern, für ein einzelnes Objekt, wird auf Linkeigenschaft rel zurückgegriffen, da diese in der Regel keine Verwendung findet. Daher wird allerdings auch die Eingabe dieser Eigenschaft nicht von jedem WYSIWYG-Editor unterstützt, so dass dies dann direkt im HTML Code durchgeführt werden muss.

Eigenschaft Name Wert Beispiel
Hintergrundfarbe des Objekts background-color #ff0000 hex Box Hintergrund rot
Deckkraft des Objekts background-opacity 75 0..100 Box Deckkraft 75%
Abstand zum Rahmen* padding 10 int Rahmen Abstand 10px
Rahmendicke des Objects* border-width 4 int Rahmen Dicke 4px
Rahmenfarbe des Objects border-color #ff0000 hex Box Rahmen rot
Maximale Breite des Objects width 640 int Max. Breite 640px
Maximale Höhe des Objects height 480 int Max. Höhe 480px
Deckkraft des Fensterhintergrundes overlay-opacity 25 0..100 Hintergrund 25%
Farbe des Fensterhintergrundes overlay-color #ff0000 hex Hintergrundfarbe rot
Vorschau Breite* pre-view-width 16 int Vorschau Breite 16px
Vorschau Höhe* pre-view-height 16 int Vorschau Höhe 16px
Verschiebbarkeit des Objektes draggable no yes/no Nicht verschiebbar
Anzeige des Galerienavigators navigator no yes/no Kein Navigator
Objekt Unterschrift title Bild Titel string Bild mit Titel

* Befindet sich noch in der alpha-Pfase und kann zu Fehlern führen.

Anzeigen von Videos

YouTube Videos

Zum einfügen eines YouTube Videos, die URL des gewünschten Videos kopieren. Nicht die URL der YouTube Seite! Dann entweder einen Text oder ein Bild mit einem Link versehen und die CSS-Klasse welZoom2 hinzufügen.

Im HTML-Quelltext:

Ergebnis auf der Seite:

oder als Text – YouTube Video

Eigene Flash Videos

Diese Videos müssen die Endung flv besitzen, QuickTime Videos, mit der Endung mp4 oder m4v, können ebenfalls mit diesem Player abgespielt werden. Zur wiedergabe wird der JW Player verwendet. Dieser kann dort gesondert, als Freeware, herunter geladen werden. Nach dem Download, die ZIP-Datei entpacken, das Verzeichnis muss dann mediaplayer heißen. Dieses Verzeichnis, in den Ordner „…/welZoom2/include/“ kopieren.

Im HTML-Quelltext:

Auf der Seite:

oder als Text – Flash Video / QuickTime Video

Eigenschaft Name Wert
Startbild image bild.jpg absoluter Pfad
Breite des Videos width 480 int
Höhe des Videos height 272 int
Player Skin (DangDang) flash-player dangdang string

JW Player bietet die Option zusätzliche Player Skins einzubinden. Eine Auswahl von verschiedenen Skins befindet sich hier. Nach dem Download des Skins, diesen entpacken und den Inhalt des Verzeichnisses (nicht das Verzeichnis), in den Ordner „…/welZoom2/include/mediaplayer“ kopieren. Das neue Skin kann dann mit der Eigenschaft flash-player, für ein einzelnes Objekt, oder mit der Variable flashPlayer, als Standard für alle Objekte, in der Datei settings.js (siehe weiter unten), festgelegt werden.

Eigene QuickTime Videos

Zwar bietet der JW Player eine Unterstützung für QuickTime Videos an, es ist aber auch möglich diese direkt einzubinden, inklusive PlugIn abfrage. Hierzu, in der rel Eigenschaft „type:quicktime;“ einfügen, sowie Breite und Höhe des Videos. Die Höhe muss inklusive der Toolbar eingegeben werden.

Im HTML-Quelltext:

Auf der Seite:

oder als Text – QuickTime Video

Videoquellen anderer Anbieter

Sollen Videos von anderen Anbietern eingebunden werden, wie z.B. myVideo, oder auch Microsoft oder OpenOffice.Org Dokument, kann wie bei „Verlinken von Webinhalten“ vorgegangen werden. Durch Angabe der Breite (width) und der Höhe (height) kann Objekt entsprechend des Inhaltes angepasst werden. Die PlugIn Unterstützung des Browsers wird dabei jedoch  nicht abgefragt.

Benutzer Einstellungen in Wel!Zoom 2

Im Verzeichnis „../welZoom2/“ befindet sich eine Datei, mit dem Namen settings.js. Hier können Benutzerdefinierte Einstellungen getroffen werden. Beim verändern der Datei muss jedoch darauf geachtet werden, dass der JavaScript Syntax eingehalten wird. Hier einige Regeln. Jeder Parameter muss mit einem Komma abgeschlossen werden, es sei denn es folgt eckige oder geschweifte Klammer. Strings müssen immer, eingeschlossen, in Anführungszeichen oder Hochkommas geschrieben werden. Integers dagegen dürfen nicht darin eingeschlossen werden. Eine hexadezimal Zahl beginnt immer mit einer Raute. wZ2.env kann ignoriert, darf aber nicht gelöscht werden.

classes:
Ist ein Array in dem all die CSS-Klassen gespeichert sind, nach denen im Dokument gesucht werden soll um sie als Zoom-Objekt darzustellen. Dies kann beliebig erweitert werden.

backgroundColor:
Legt die Hintergrundfarbe der Zoom-Box fest. Der Wert kann als hexadezimal Zahl oder als benannte Farbe übergeben werden. Empfohlen ist die hexadezimal Schreibweise, es sei denn er soll Transparent sein (transparent).

backgroundOpacity:
Legt die Deckkraft der Zoom-Box fest. Die möglichen Werte sind hier 0 bis 100, je kleiner der Wert desto transparenter wird die Box.

padding:
Kann zur Zeit noch nicht geändert werden.

borderWidth:
Kann zur Zeit noch nicht geändert werden.

overlayColor:
Ist die Farbe des Fensterhintergrundes. Der Wert kann als hexadezimal Zahl oder als benannte Farbe übergeben werden. Empfohlen ist die hexadezimal Schreibweise, es sei denn er soll Transparent sein (transparent).

targetPos:
Kann zur Zeit noch nicht geändert werden.

overlayOpacity:
Legt die Deckkraft des Fensterhintergrundes fest. Die möglichen Werte sind hier 0 bis 100, je kleiner der Wert desto transparenter wird die Box.

preViewWidth: / preViewHeight:
Kann zur Zeit noch nicht geändert werden.

width: / height:
Legt die maximal darstellbare Höhe bzw. Breite des Zoom-Objekts fest. Ist die das Browser-Fenster kleiner als die festgelegten Werte, wird auf diese Abmessung skaliert. Der Wert ist jedoch relevant für die Darstellung von Videos oder Webinhalten.

titleHeight:
Gibt die Höhe des Titels an, der optional unter dem Zoom-Objekt dargestellt werden kann.

frameBackgroundColor:
Hintergrundfarbe bei der Darstellung von Videos oder Webinhalten. Der Wert mass als hexadezimal Zahl angegeben werden.

flashPlayer:
Name des JW Player Skins, ohne die Angabe der Dateiendung.

Lizenz

Wel!Zoom 2 ist eine Open Souce Software, lizensiert unter LGPL3.

Schreibe einen Kommentar