Tiffy Slideshow

(Demo-Applet wird geladen, bitte gedulden Sie sich einen Moment...)

Sorry, no Java support available, please install from here.

  1. Features
  2. Einbettung in eigene Web-Sites, WordPress Blogs und Joomla CMS Sites
  3. Download & Installation
  4. Nutzung als eigenständiges "standalone" Programm
  5. Lizenz / Nutzungsvereinbarung

Features

Das Tiffy Slideshow Applet lässt sich auf nahezu allen derzeit üblichen Client-Systemen (32/64 Bit Windows, Mac OS X, Linux) verwenden, für die eine Java Laufzeitumgebung verfügbar ist. Auf den meisten Systemen ist diese i.d.R. bereits vorinstalliert und lässt sich ansonsten mit wenigen Mausklicks nachladen. Es lässt sich in Webseiten einbetten und liefert damit in den heute verbreiteten Web-Browsern ein einheitliches Benutzer-Erlebnis. Es wurde auf diversen Windows, Mac OS X und Linux Plattformen ausgiebig mit Firefox (ab Version 2.0), MS Internet Explorer (ab Version 6.0), Chrome, Safari und Opera (sofern auf den jeweiligen Plattformen verfügbar) getestet.

Das Tiffy Applet lässt sich auf vielfältige Art und Weise einbetten. Es kann sowohl in statischen als auch in dynamisch erzeugten Webseiten verwendet werden. Für die Verwendung im weit verbreiteten Open Source Content Management System (CMS) "Joomla" und in der Blog-Software "WordPress" stehen zusätzlich PHP-Plugins zur Verfügung, die eine Einbettung einer Slideshow einschließlich Thumbnail-Vorschau mit nur ein bis zwei "Pseudo-Tags" erlauben.

Slideshow with thumbnails

Beispiele:
Beispielseite einer Slideshow aus einem Flickr-Album in einem Joomla-Beitrag.
Beispielseite einer Slideshow aus einem Ipernity-Album in einem WordPress Blog Post.
Beispielseite einer Slideshow aus einem Server-eigenen Bildverzeichnis.

Hinweise zur Einbettung

Die Einbettung kann serverseitig statisch oder mittels automatisch generiertem Code erfolgen, Beispiele für PHP-Seiten und Plugins für "Joomla" CMS und "Wordpress" Blogs liegen bei. Bitte folgen Sie den Links zu den jeweiligen Kapiteln, je nachdem, wie Sie die Slideshow nutzen möchten.

Direkte Einbettung ohne Plugin-Unterstützung

Parameter_Optionen

Fernsteuerung_per_JavaScript

Weitere_Optionen

Tastatur-Befehle

Einbettung in WordPress Blog-Posts über ein Plugin

Einbettung in Joomla-Artikel über ein Plugin

Einbettung unter Nutzung des applet tags

Das applet tag wird empfohlen, wenn das Applet später in unterschiedlichen Browser-Umgebungen genutzt werden soll. Gemäß HTML-Spezifikation gilt dies zwar inzwischen als nicht mehr unterstützt und es wird stattdessen die Verwendung des object tags empfohlen. Letzteres ist jedoch nur vage spezifiziert und wird von verschiedenen Browsern unterschiedlich interpretiert. Oracle, die mit der Übernahme von Sun Micosystems auch die Java-Technologie weiterführen, empfieht es deshalb auch weiterhin als konsistente Einbettungsmöglichkeit über verschiedene Plattformen hinweg. Diese Einbettungsform stellt von sich aus kein automatisches Nachladen des Java-Plugins sicher - es muss also bereits installiert sein.

Beispiel:

<APPLET CODE = "SwingTiffy.class" CODEBASE = "./" ARCHIVE = "Tiffy.jar"
    WIDTH = "600" HEIGHT = "484" NAME = "SwingTiffy">
    <PARAM NAME = "cabinets" VALUE ="TiffyApplets.cab">
    <PARAM NAME = "FileName" VALUE ="image1.jpg;image2.tif,image3.gif">
    <PARAM NAME = "Options" VALUE ="/noprint /nogauge /nothumbnails">
Sorry, no Java support available, please <a href="http://www.java.com/download/">install from here</a>.
</APPLET>

(Die vorletzte Zeile "Sorry, no Java Support available..." ist nur auf Systemen sichtbar, auf denen kein Java installiert ist und bietet eine Download-Möglichkeit an. Bei einigen Browsern können anstelle absoluter Werte für width und height auch prozentuale Werte verwendet werden.)

Es wird empfohlen, cache- Attribute zu verwenden, um den Start eines bereits zu einem früheren Zeitpunkt geladenen Applet zu beschleunigen. Ergänzungs-Beispiel:

    <PARAM NAME="cache_archive" VALUE="Tiffy.jar" />
    <PARAM NAME="cache_version" VALUE="3.3.0.9" />

Durch den Wert (value) des Versions-Attribut steuern Sie, in welchem Falle der Client eine neue Version des Applets laden soll.

Einbettung unter Nutzung des object und des embed tags

Das object tag wird vom Internet Explorer für die Einbettung von Java Applets genutzt, wohingegen die Familie der Mozilla-Browser das embed tag hierfür verwenden. Beide erlauben das Nachladen des Java Plugins für den Fall, dass es noch nicht installiert ist. Durch entsprechend geschickte Schachtelung der beiden Tags gelingt es, das Applet auch wieder für gemischte Browser-Umgebungen einzubetten und den Vorteil des Autodownloads zu erlangen.

Beispiel:

<OBJECT classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
  WIDTH = "600" HEIGHT = "484" NAME = "SwingTiffy" codebase="http://java.sun.com/update/1.5.0/jinstall-1_5_0_11-windows-i586.cab#Version=1,5,0,11">
  <PARAM NAME = CODE VALUE = "SwingTiffy.class" >
  <PARAM NAME = CODEBASE VALUE = "./" >
  <PARAM NAME = ARCHIVE VALUE = "Tiffy.jar" >
  <PARAM NAME = NAME VALUE = "SwingTiffy" >
  <PARAM NAME ="type" VALUE = "application/x-java-applet;version=1.4">
  <PARAM NAME ="scriptable" VALUE = "true">
  <PARAM NAME = "FileName" VALUE = "image1.jpg;image2.tif;image3.gif">
  <PARAM NAME = "Options" VALUE = "/nogauge /noprint /nothumbnails">
  <COMMENT>
  <EMBED type="application/x-java-applet;version=1.4" CODE = "SwingTiffy.class"
    CODEBASE = "./" ARCHIVE = "SwingTiffy.jar,TiffyApplet.jar" NAME = "SwingTiffy"
    WIDTH = "600" HEIGHT = "484" cabinets = "TiffyApplets.cab"
    FileName = "image1.jpg;image2.tif;image3.gif"
    Options = "/nogauge /nothumbnails /noprint"
    scriptable=true pluginspage="http://www.oracle.com/technetwork/java/javase/downloads/index.html">
    <NOEMBED></COMMENT>Sorry, no Java support available.</NOEMBED>
  </EMBED>
</OBJECT>

Detaillierte Hinweise zur Verwendung von applet / object / embed tags finden sich hier. Nachteil dieser Variante ist, dass das Applet hierüber bei einigen Browsern nicht per JavaScript steuerbar ist und damit z.B. die Möglichkeit fehlt, interaktiv über Klicken auf Thumbnails das entsprechende Bild im Applet zu laden.

Parameter Optionen:

Das Applet ist über optionale Parameter hochgradig konfigurierbar.

Option   Zweck
/blend   weiche Überblendung im Normalbild-Modus aktivieren
(im Vollbild/Slideshow-Modus standardmäßig aktiviert)
/slidedelay<n>   aktiviert Slide-Modus bereits in Normalbild-Darstellung
(n Millisekunden Übergangszeit)
/bgcolor<r,g,b>   Hintergrundfarbe auf R,G,B Werte (0..255) setzen
(Bsp.: schwarz: /bgcolor0,0,0 / weiß: /bgcolor255,255,255)
/nogauge   PopUp für Fortschrittsanzeige unterdrücken
/nothumbnails   autom. Anzeige der Vorschaubilder unterdrücken
/noannotations   autom. Laden der Annotations (Anmerkungen) unterdrücken
/smooth   weiche Skalierung (Antialiasing) aktivieren
/i   invertierte Darstellung
/r<n>   rotierte Darstellung (n: 1=90 Grad, 2=180, 3=270 Grad)
/fh   Bildgröße horizontal einpassen
/fw   Bildgröße auf Fenster einpassen (default)
/f1   Bild in 1:1 (100%) Darstellung anzeigen
/page<n>   Start mit Anzeige von Seite n (Multipage-Auswahl)
/save   Speichern (Download) aktivieren
/print   Bild(er) unmittelbar zum Drucken öffnen
/noprint   Druckmöglichkeit deaktivieren
/noautorotate   automatische Druckbild-Rotation unterdrücken
/quickprint   startet Sofort-Druck mit Standardeinstellungen
/lightprint   speichersparender Druckmodus
/heavyprint   Drucken mit neuen Methoden (erfordert mehr Speicher,
erlaubt "Kachelbilddruck" über mehrere Seiten)
/150dpi   Drucken mit verringerter Auflösung
/buttons[...]   steuert die Sichtbarkeit der Buttons (Schaltflächen).
Z.B. versteckt /buttons1010 den zweiten und vierten Button.
(Trennflächen werden mitgezählt, restliche Buttons bleiben aktiviert)
/bottomtoolbar   verlagert die Button-Leiste an den unteren Rand und wählt einen
moderneren Button-Satz aus.

Fernsteuerung per JavaScript

Das Applet lässt sich per JavaScript Code, der zusätzlich in der einbettenden HTML-Seite enthalten sein kann, steuern. Z.B. lässt sich damit die aktuelle Seite (Nummer des darzustellenden Bildes) ändern oder Annotations einblenden. Im Einzelnen:

loadImage(URL-String)  : lädt ein neues Bild aus der angegeben URL nach
setPageNum(int)  : springt in einer Bilderserie zur angegeben Bildnummer
setAnnotations(XML-String)  : blendet Anmerkungen, Symbole etc. (Formatbeschreibung siehe ausführliche Applet-Dokumentation)
getAnnotations()  : liest gesetzte Annotations aus
toggleThumbnails()  : schaltet die Anzeige integrierter Thumbnails ein bzw. aus

Klicken Sie hier für eine ausführliche Beschreibung

Weitere Optionen:

Tastatur-Befehle:

In der Normalbildansicht stehen auch bei ausgeblendeten Buttons eine Reihe von Bedienmöglichkeiten über Tastatur zur Verfügung. Ggf. muss der Bildbereich einmal durch Anklicken den Fokus erhalten haben.

Skalierung   Tastatur- / Maus-Aktion
Standard 1:1 Ansicht 1
Proportionale Anpassung an Fenster   0
Zoom +   +
Zoom -   -
Zoom auf Auswahl   Rechteck mit Maus ziehen
Vollbild / Slideshow   F
Weiche Skalierung (Antialiasing)   #
Drucken   P
     
Seitenkontrolle   Taste
Nächste Seite   >
Vorige Seite   <
Wiedergabe / Pause Umschaltung Leertaste
     
Bildroll Funktionen   Taste
Sichtfenster verschieben   Pfeiltasten
Sichtfenster seitenweise verschieben      PgUp/PgDown, Strg+Pfeiltaste
Sprung zu den Rändern   Strg+PgUp/PgDown, Pos1/Ende

Die Vollbildansicht kann mit der ESC-Taste verlassen werden. Die Vollbild-Wiedergabe kann mit der 'P'-Taste angehalten werden (Pause) und mit der Leertaste kann die Wartezeit zum nächsten Bild verkürzt werden (Skip).

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Klicken Sie hier für eine ausführliche Applet-Beschreibung

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Einbettung in WordPress Blogs

Das Slideshow Applet lässt sich nach Installation des WordPress Plugins mit nur einer Zeile, einem "Pseudo-Tag", in einen WordPress Blog Artikel einbinden. Hierbei kann die Bilderserie automatisch aus einem Verzeichnis generiert werden, in dem auf dem Server die gewünschten Bilder abgelegt wurden. Ebenso einfach können damit ganze Bilderserien von Flickr und Ipernity Konten nach vielfältigen Auswahlkriterien eingebettet werden. Erst zur Laufzeit, wenn ein Besucher den Artikel abruft, wird die tatsächliche Abfrage ausgeführt und dynamisch das entsprechende Applet-Tag in die HTML-Seite hinein generiert.

Beispiel 1 a)
(Bilder in "Large"-Auflösung werden aus Flickr gemäß einem gewünschten Tag gesucht):
{tiffyflickr=method=flickr.photos.search&api_key=your_key&user_id=your_user_id&tags=desired_tag size=Large width=600 height=484 bgcolor=255,255,255 slidedelay=5000}

Beispiel 2 a)
(Bilder in 1024-er Auflösung werden aus einem Ipernity Album gelesen):
{tiffyiper=album.docs.getList/xml/?album_id=desired_album-id&media=photo&per_page=100&api_key=your_key size=1024 width=600 height=484 bgcolor=255,255,255 slidedelay=5000}

Beispiel 3 a)
(Bilder werden aus einem eigene Server-Verzeichnis gelesen):
{tiffyimgdir=images/nature/ width=600 height=484 bgcolor=255,255,255 slidedelay=5000}

Das Plugin erkennt die Pseudo-Tags daran, dass sie in geschweiften Klammern eingefasst werden. Das erste Schlüsselwort (tiffyflickr / tiffyiper / tiffydir) steuert, ob eine Einbettung aus flickr, ipernity oder einem eigenen Verzeichnis erfolgen soll. Abhängig davon folgt die entsprechende Selektion. Bei Flickr bzw. Ipernity ist dies der Aufruf einer entsprechenden "API"-Abfrage-Methods, bei einem Server-Verzeichnis ist es der entsprechende Pfad. Bei Flickr und Ipernity folgt dann mit "size=..."  ein Attribut, das die gewünschte Größe (Auflösung) des Quellbildes auswählt.

Die weiteren Attribute sind für alle drei Varianten gleich, sie steuern die Abmessungen (width und height), mit denen das Applet dargestellt werden soll, die Hintergrundfarben (mit den Farbanteilen für rot, grün und blau jeweils zwischen 0 und 255) sowie die Wartezeit, die ein Bild jeweils bis zum nächsten Bildwechsel stehenbleiben soll (in Millisekunden). Die Attribute sind jeweils durch Leerzeichen zu trennen. Bei der Höhe (height) sollte berücksichtigt werden, dass der Bereich mit der Button-Leiste unterhalb des Bildes 34 Pixel einnimmt. Mit den Abmessungen width=600 height=484 steht für die Bilder dann z.B. noch eine Fläche von 600 mal 450 Pixeln (optimal für 4:3 Format) zur Verfügung.

Analog kann optional mit einer weiteren Zeile die Einbindung von Vorschau-(Thumbnail-)Bildern erfolgen, die beim Anklicken das im Slideshow Applet dargestellte Bild aktualisieren:

Beispiel 1 b)
(Thumbnails in "Square"-Auflösung (75x75 Pixel) werden aus Flickr gemäß einem gewünschten Tag gesucht):

{thumbflickr=method=flickr.photos.search&api_key=your_key&user_id=your_user_id&tags=desired_tag size=Square}

Beispiel 2 b)
(Thumbnails in 75x Größe (75x75 Pixel) werden aus einem Ipernity Album gelesen):
{thumbiper=album.docs.getList/xml/?album_id=desired_album-id&media=photo&per_page=100&api_key=your_key size=75x}

Beispiel 3 b)
(Bilder werden aus einem eigenen Server-Verzeichnis namens images/nature (relativ zur aktuellen Seitenbasis) gelesen):
{thumbdir=images/nature/}

Auch hier werden die Pseudo-Tags in geschweifte Klammern eingefasst; das erste Schlüsselwort steuert wieder, aus welcher Quelle die Thumbnails bezogen werden sollen.

Erzeugung der gewünschten Flickr-Selektion:
Flickr unterstützt eine sehr flexible "API" (Programmier-Schnittstelle), die auch ohne Programmierkenntnisse für die Formulierung der gewünschten Abfrage-Selektion genutzt werden kann. In den obigen Beispielen wurde zur Bilder-Suche die Methode "flickr.photos.search" verwendet, zu der alle verfügbaren Suchoptionen unter http://www.flickr.com/services/api/flickr.photos.search.html aufgeführt und ausführlich beschrieben sind. Ebenso einfach lassen sich damit z.B. Bilder aus einem bestimmten Zeitraum oder - sofern mit Geo-Tags versehen - einer bestimmten Region auswählen.

Um diese Abfrage-Methode nicht mühsam per Hand zusammenstellen zu müssen, bietet Flickr auch einen entsprechenden "API-Explorer". Für die search-Methode ist dieser z.B. über http://www.flickr.com/services/api/explore/?method=flickr.photos.search aufrufbar. Wenn Sie bei Flickr angemeldet sind, können Sie mit diesem Explorer interaktiv die unterschiedlichen Suchmöglichkeiten ausprobieren. Ihre Benutzer-ID und entsprechende Vorschlagswerte für diverse Alben finden Sie dort ebenfalls. Wählen Sie dann vor dem eigentlichen Aufruf noch die Option "Aufruf nicht signieren" aus. Nach dem Aufruf erhalten Sie das Ergebnis in XML-formatierter Ansicht. Für die Übernahme der Suchanfrage ist die unterhalb des Kastens mit dem Treffer-Ergebnis generierte Abfrage-URL angezeigt. Alles, was in dieser URL nach dem Fragezeichen kommt (beginnend mit "method="), kann nun als entsprechende Abfrage-Methode für das WordPress-Plugin mittels copy&paste übernommen werden. Bitte ersetzen Sie dabei noch den Explorer-API-Key durch Ihren eigenen Flickr API-Key (s.u.).

Alternativ können z.B. auch alle Bilder eines gewünschten Flickr-Albums für die Darstellung selektiert werden. Die entsprechende API-Methode lautet "flickr.photosets.getPhotos" und ist unter http://www.flickr.com/services/api/flickr.photosets.getPhotos.html beschrieben. Zunächst muss dazu allerdings die ID des gewünschten Albums ermittelt werden. Diese lässt sich z.B. mit http://www.flickr.com/services/api/explore/?method=flickr.photosets.getList ermitteln, die alle Alben eines Users mit ihren entsprechenden IDs anzeigt. Ist die Album-ID ermittelt, kann nun die entsprechende Abfrage im API-Exporer mit http://www.flickr.com/services/api/explore/?method=flickr.photosets.getPhotos getestet und - wie oben bereits beschrieben - aus der damit generierten URL (unterhalb des Trefferergebnisses) die gewünschte Abfrage-Methode für das WordPress-Plugin entnommen werden. Im Ergebnis kann dann z.B. das Pseudo-Tag, das im WordPress-Artikel für ein Album mit der ID 72157625522463262 benutzt wird, wie folgt aussehen:

Beispiel 4 a)
(Bilder in "Large"-Auflösung werden aus einem Flickr-Album selektiert):
{tiffyflickr=method=flickr.photosets.getPhotos&api_key=your_key&photoset_id=72157625522463262 size=Large width=600 height=484 bgcolor=255,255,255 slidedelay=5000}

Beispiel 4 b)
(Zugehörige Thumbnails des Flickr-Albums werden in "Square"-Auflösung (75x75 px) selektiert):
{thumbflickr=method=flickr.photosets.getPhotos&api_key=your_key&photoset_id=72157625522463262 size=Square}

Sie können auch einfach diese Beispiel-Zeilen übernehmen und lediglich Ihren Key und Ihre Album ID (photoset_id) einsetzen.

Flickr-API Key
Sie können zunächst für Test den folgenden API-Key benutzen: afdfe6e03dfe0740e8a65cb130c4cb1a
Dieser Key ist jedoch lediglich für gelegentliche Testzwecke generiert worden, es kann nicht garantiert werden, dass damit dauerhaft Abfragen funktionieren werden. Sie sollten sich deshalb für Ihre Website einen persönlichen Flickr-Key erzeugen lassen. Dies lässt sich leicht unter http://www.flickr.com/services/apps/create/apply erledigen. Dort wird zwischen privater und kommerzieller Nutzung unterschieden, auch die kommerzielle Nutzung ist jedoch in den allermeisten Fällen kostenfrei, es werden lediglich einige zusätzliche Daten abgefragt. Da die oben beschriebenen Pseudo-Tags, in denen der Key eingetragen wird, nicht mehr im endgültig für den Besucher erzeugten HTML-Quellcode erscheinen, sondern durch ein entsprechendes Applet-Tag ersetzt werden, bleibt der Key in Ihren Händen.

Erzeugung der gewünschten Ipernity-Selektion:
Ipernity unterstützt eine zu Flickr ähnliche, ebenfalls sehr flexible "API" (Programmier-Schnittstelle), die auch ohne Programmierkenntnisse für die Formulierung der gewünschten Abfrage-Selektion genutzt werden kann. In den obigen Beispielen wurde zur Abfrage eines Ipernity-Albums die Methode "album.docs.getList" verwendet, zu der alle verfügbaren Suchoptionen unter http://www.ipernity.com/help/api/method/album.docs.getList aufgeführt und ausführlich beschrieben sind.

Zur Vereinfachung der Erzeugung einer entsprechenden Abfrage bietet auch Ipernity einen entsprechenden "API-Explorer". Für die o.g. Album-Auslesung ist dieser z.B. über http://www.ipernity.com/help/api/explore/album.docs.getList aufrufbar. Wenn Sie bei Ipernity angemeldet sind, können Sie mit diesem Explorer interaktiv die unterschiedlichen Suchmöglichkeiten ausprobieren. Ihre Benutzer-ID und entsprechende Vorschlagswerte für diverse Alben finden Sie dort ebenfalls. Wählen Sie dann vor dem eigentlichen Aufruf noch die Option "Diese Anforderung nicht unterzeichnen" aus. Nach dem Aufruf erhalten Sie das Ergebnis in XML-formatierter Ansicht. Für die Übernahme der Suchanfrage ist die unterhalb des Kastens mit dem Treffer-Ergebnis generierte Abfrage angezeigt. Von dieser können Sie nun als entsprechende Abfrage-Methode für das WordPress-Plugin alles mittels copy&paste übernehmen, was nach /api/ folgt. Auch hier ersetzen Sie bitte noch den Explorer-API-Key durch Ihren eigenen Ipernity API-Key (s.u.). Die IDs anderer Alben lassen sich einfach mit http://www.ipernity.com/help/api/explore/album.getList ermitteln.

Alternativ können z.B. auch alle Bilder einer beliebigen Such-Abfrage für die Darstellung selektiert werden. Die entsprechende API-Methode lautet "doc.search" und ist unter http://www.ipernity.com/help/api/method/doc.search beschrieben. Die entsprechende Abfrage kann im API-Exporer mit http://www.ipernity.com/help/api/explore/doc.search getestet und - wie oben bereits beschrieben - aus der damit generierten URL (unterhalb des Trefferergebnisses) die gewünschte Abfrage-Methode für das Pseudo-Tag im WordPress-Artikel entnommen werden.

Ipernity-API Key
Sie können zunächst für Test den folgenden API-Key benutzen: 4d1d069d000027B15a35f19a97714d20
Dieser Key ist jedoch lediglich für gelegentliche Testzwecke generiert worden, es kann nicht garantiert werden, dass damit dauerhaft Abfragen funktionieren werden. Sie sollten sich deshalb für Ihre Website einen persönlichen Ipernity-Key erzeugen lassen. Dies lässt sich schnell unter http://www.ipernity.com/apps/key/0 erledigen. Dort wird zwischen privater und kommerzieller Nutzung unterschieden, auch die kommerzielle Nutzung ist jedoch in den allermeisten Fällen kostenfrei, es werden lediglich einige zusätzliche Daten abgefragt. Da die oben beschriebenen Pseudo-Tags, in denen der Key eingetragen wird, nicht mehr im endgültig für den Besucher erzeugten HTML-Quellcode erscheinen, sondern durch ein entsprechendes Applet-Tag ersetzt werden, bleibt der Key in Ihren Händen.

Hinweis:
Das Laden der Flickr-/Ipernity-Bilder erfolgt über den Server der eigenen Website. Dies ist erforderlich, da das Sicherheitskonzept für Java Applets vorsieht, dass Daten nur aus der Domain nachgeladen werden dürfen, aus der auch das Applet selbst aufgerufen wurde. Das serverseitige Plugin agiert hierbei als eine Art Bilder-"Proxy", d.h. die Bilddaten werden zunächst vom Quellserver (bei Flickr oder Ipernity) auf den eigenen Server geladen und von dort aus an das Applet weitergereicht. Um den Datendurchsatz zu reduzieren und die Übertragungszeiten zu minimieren, werden die vom Quellserver geladenen Daten nach der ersten Übertagung auf dem eigenen Server in einem Cache-Bereich vorgehalten und bei weiteren Anfragen direkt von dort aus ausgeliefert. Es ist dabei jedoch zu berücksichtigen, dass sich der Datendurchsatz von und zur eigenen Website hierdurch erhöht und zusätzlicher Webspace verwendet wird. Bei den meisten Providern ist dies jedoch heutzutage kein Thema mehr, da das im Preis enthaltene Daten-/Transfervolumen ohnehin unlimitiert oder zumindest entsprechend großzügig dimensioniert ist. Der Vorteil dieser Strategie ist, dass auch die Abrufe von Bildern, die eigentlich an anderer Stelle verwaltet werden, statistisch mit erfasst werden können und auch deren ursprüngliche Quell-URL verborgen bleiben kann.

Einbettung in Joomla Sites

Das Slideshow Applet lässt sich nach Installation des Joomla Plugins mit nur einer Zeile, einem "Pseudo-Tag", in einen Joomla Beitrag einbinden. Hierbei kann die Bilderserie automatisch aus einem Verzeichnis generiert werden, in dem auf dem Server die gewünschten Bilder abgelegt wurden. Ebenso einfach können damit ganze Bilderserien von Flickr und Ipernity Konten nach vielfältigen Auswahlkriterien eingebettet werden. Erst zur Laufzeit, wenn ein Besucher den Artikel abruft, wird die tatsächliche Abfrage ausgeführt und dynamisch das entsprechende Applet-Tag in die HTML-Seite hinein generiert.

Die Einbettung in Joomla Beiträge erfolgt dabei vollkommen analog und mit den gleichen Pseudo-Tags, wie zuvor für WordPress beschrieben.

Download & Installation

Die aktuelle Version des Tiffy-Slideshow-Paketes finden Sie unter http://www.tiffy.de/slideshow/download.

Sofern das Software Paket als ZIP-Archiv vorliegt, entpacken Sie es bitte zunächst in ein Verzeichnis Ihrer Wahl. Das Archiv enthält folgende Dateien:

Tiffy.jar (Applet im Java-Archiv-Format)
Tiffy.cab (Applet im CAB-Archiv-Format - (hat nur noch historische Bedeutung für sehr alte IE Browser))
wpplg_slidelist.zip (WordPress Plugin)
plg_slidelist.zip (Joomla Plugin)
php_slidelist.zip (generische PHP-Scripte für andere nicht-Joomla / nicht-WordPress Websites)

Bitte übertragen Sie zunächst die beiden Tiffy-Dateien (Tiffy.jar und Tify.cab) z.B. mit einem FTP-Client in das Basis-Verzeichnis Ihrer WordPress- oder Joomla-Installation (z.B. / oder /blog oder /joomla). Anschließend erfolgt die Installation der restlichen Plugin-Dateien abhängig davon, ob Sie Joomla, WordPress oder eine andere Website-Software verwenden.

Legen Sie nun bitte noch unterhalb des Basis-Verzeichnisses Ihrer WordPress- bzw Joomla- Installation ein Verzeichnis für temporäre Dateien an. Je nach Basis-Verzeichnis also entweder /tmp oder z.B. /blog/tmp bzw. /joomla/tmp).

Installation des WordPress Plugins

Nun kann das Plugin über die Plugin-Verwaltung des WordPress Admin-Backends hochgeladen und installiert werden. Sie finden dafür im Backend ein Menü "Plugins". Dort gibt es eine Möglichkeit, neue hinzuzufügen. Man kann dann entweder bei WP schauen, welche Plugins dort verfügbar sind oder ein eigenes Plugin (in diesem Falle als ZIP-Archiv) hochladen.

WP Plugin Installation

An dieser Stelle bitte die Datei wpplg_slidelist.zip zum Upload auswählen und hochladen. Kurz darauf müsste die Bestätigung erscheinen und angeboten werden, es gleich zu aktivieren. Nach erfolgreicher Installation und Aktivierung sollte es etwa so aussehen:

WP Plugin installed

Ab jetzt sollten Pseudo-Tags wie unter "Einbettung in WordPress Blogs" beschrieben, automatisch beim Seitenabruf durch das Slideshow-Applet ersetzt werden.

Bei späteren Updates genügt es, einzelne ggf. aktualisierte Dateien manuell per FTP in das Unterverzeichnis wp-content/plugins/wpplg_slidelist hochzuladen.

Installation des Joomla Plugins

Die Installation des Joomla-Plugins erfolgt über die Erweiterungs-Verwaltung des Joomla Admin-Backends. Dort kann die Paket-Datei (das zugehörige ZIP-Archiv plg_slidelist.zip) hochgeladen und installiert werden.

Joomla Plugin Installation

Anschließend kann in der Plugin-Konfiguration noch der Pfad für temporäre Dateien des Plugins eingestellt werden. In der Regel können Sie dort den Vorgabewert /tmp übernehmen.

Joomla Plugin installed

Das Plugin legt dort zur Session gehörige, temporäre Dateien ab und cached dort Bilder von Flickr- und Ipernity-Selektionen.

Bei späteren Aktualisierungen genügt es i.d.R. die aktualisierten Dateien in das Joomla Verzeichnis für Content-Plugins (z.B. /plugins/content) per FTP hochzuladen.

Nutzung als eigenständiges "standalone" Programm

Tiffy lässt sich nicht nur als Slideshow Applet in Websites einbinden, sondern auch als eigenständiges Programm auf dem lokalen PC nutzen. Durch seine Plattformunabhängigkeit funktioniert es unter nahezu allen Betriebssystemen, für die eine Java Laufzeitumgebung vorhanden und installiert ist. Ob Java bereits auf Ihrem System installiert ist, können Sie sehr einfach unter http://www.java.com/de/download/installed.jsp?detect=jre&try=1 testen - und ggf. nachinstallieren oder aktualisieren.

Anschließend genügt lediglich ein Doppelklick auf die Datei Tiffy.jar, um die Standalone-Version von Tiffy zu starten. Windows-Benutzer können hierzu mit dem Explorer einfach eine Verknüpfung anlegen, für Mac OS X Anwender empfiehlt sich, die Tiffy.jar Datei in den Programme-Ordner zu kopieren.

Eine ausführliche Beschreibung aller Funktionen des Programmes finden Sie unter hier. Die Nutzung der erweiterten Funktionen ist bisher nur ausgiebig auf Windows-Plattformen getestet worden, auf anderen Betriebsystemen (Mac OS X, Linux) ist sie noch experimentell.

Erzeugung von skalierten Bildern und Thumbnails für flüssig ablaufende Slideshows

An dieser Stelle soll lediglich beschrieben werden, wie Sie mit Tiffy mit wenigen Mausklicks die für eine Server-Slideshow erforderlichen Dateien erzeugen können. In der Regel sind die JPG-Dateien heutiger Digitalkameras sehr groß - zu groß, um sie direkt in einer flüssig ablaufenden Slideshow im Internet verwenden zu können. Tiffy bietet Ihnen deshalb die Möglichkeit, weitgehend automatisiert geeignete Verkleinerungen sowie Thumbnails in unterschiedlichen Größen und Formaten zu erstellen.

Wählen Sie nach dem Starten von Tiffy zunächst die Funktion "Bearbeiten Diashow/Präsentation".

Create Slideshow 01

Nun navigieren Sie im Dateidialog zu dem Verzeichnis, in dem sich die Quell-Bilder befinden und aktivieren anschließend die Option "Bildkatalog anzeigen".

Create Slideshow 02

Der Dialog wechselt nun die Darstellung zu einem Katalog mit Vorschaubildern ("Thumbnails"). Beim ersten Aufruf werden diese zunächst von Tiffy aus den Original-Bildern generiert, bei späteren Aufrufen nur noch eingelesen, wodurch sich der Katalog entsprechend schneller aufbaut. In dieser Darstellung können Sie die gewünschten Bilder entweder einzeln in der Liste oder als Bereich in den Vorschaubildern (zusammen mit der Shift- bzw. Ctrl-Taste) per Maustaste markieren oder einfach "Alle markieren" auswählen.

Durch Anklicken der Taste "Zur Liste hinzufügen" werden nun die markierten Bilder der Liste hinzugefügt. Für eine eigenständig (ohne Browser) ablaufende Diashow können links Sie noch die Standzeit für die markierten Bilder vorgeben. Enthält die Liste alle gewünschten Bilder, klicken Sie bitte auf "Erzeuge Präsentation".

Create Slideshow 03

Es erscheint daraufhin noch ein Dialog, in dem Sie den Titel der Präsentation und die Abmessungen der Bilder sowie die JPEG-Kompressions-Qualität der Verkleinerungen festlegen können. Die Werte für Breite und Höhe sind als Maximal-Werte anzusehen, tatsächlich werden die verkleinerten Bilder unter Beibehaltung ihres Original-Seitenverhältnisses derart skaliert, dass keine Seite länger ist, als vorgegeben, sie also in jedem Falle in ein entsprechendes Rechteck hineinpassen.

Create Slideshow 04

Nach Bestätigung mit "OK" werden nun die Verkleinerungen generiert. Die gemäß Vorgaben verkleinerten Bilder befinden sich anschließend im Unterverzeichnis "web". Zusätzlich wurde bereits beim Aufbau der Anzeige für den Bildkatalog ein Unterverzeichnis "thumbnails" erzeugt, in dem sich je Quellbild zwei Thumbnails befinden. Das kleinere der beiden ist quadratisch auf 75x75 Pixel zugeschnitten. Je nach Format des Originalbildes werden hierbei ggf. horizontale oder vertikale Bildbereiche von der Bildmitte aus gekürzt, so dass die kürzere Seite vollständig erhalten bleibt, die längere Seite jedoch zur Erhaltung eines Quadrates an beiden Enden beschnitten wird. Diese Thumbnails entsprechen in etwa den quadratischen Minibildern, die auch Flickr oder Ipernity z.B. für die Alben-Vorschau erzeugen.

Create Slideshow 05

Bekannte Probleme

Die Software wurde ausgiebig getestet, trotzdem können aufgrund der Plattformunabhängigkeit von Java und der Kombinations-Vielfalt möglicher Laufzeitumgebungen nicht immer zu 100% einheitliche Verhaltensweisen gewährleistet werden. Bekannt sind folgende Probleme:

Lizenz / Nutzungsvereinbarung

Die Software ist Eigentum von Helge Hackbarth. Sie kann von Ihnen, wie sie ist, - nicht exklusiv und nicht unterlizensierbar - unter den hier genannten Bedingungen lizensiert werden. Eine Weitergabe der Software Ihrerseits an Dritte ist nur mit Genehmigung des Autors möglich, Sie können jedoch gerne Verweise auf diese Seite als Link weitergeben.

Dieses Produkt verwendet die Flickr API und die Ipernity API zur Selektion und Anzeige von dort gespeicherten Bildern. Sofern Sie die Möglichkeiten zur Einbindung von Flickr oder Ipernity Bildern nutzen, berücksichtigen Sie bitte die seitens Flickr und Ipernity vorgegebenen Benutzungsrichtlichlinien, auf die im Abschnitt der API-Schlüssel hingewiesen bzw. verlinkt wird (siehe hier und hier) und beachten Sie bei Einbindung fremder Bilder auch die Bedingungen der jeweiligen Rechte-Inhaber.

Das Produkt wird bereitgestellt, wie es ist und ohne jegliche Garantie-/Gewährleistungszusagen. Sämtliche Risiken, die aus der Nutzung des Produktes entstehen können, trägt der Empfänger bzw. Anwender. Der Autor der Software kann für jegliche Schäden, die ggf. aus der Nutzung entstehen, nicht haftbar gemacht werden. Mit der Installation der Software erkennt der Nutzer dies automatisch an.

Private Nutzung

Die Software "Tiffy View" kann in der vorliegenden "Slideshow"-Version unentgeltlich und zeitlich unbegrenzt privat für nicht-kommerzielle Zwecke genutzt werden. Bitte prüfen Sie anhand der u.g. Kriterien, ob in Ihrem Falle eine private oder eine kommerzielle Nutzung zutrifft.

Sofern Sie keinen kostenpflichtigen Lizenzschlüssel erwerben, zeigt die Software einen - dezent platzierten - Hinweis auf die Quelle der Software. Im Slideshow-Modus ist dies z.B. der Schriftzug "powered by Tiffy.de" neben der Navigations-Buttonleiste. Dieser wird bei Installation eines vom Autor erworbenenLizenzschlüssels ausgeblendet.

Für ggf. später folgende Versionen mit erweitertem Funktionsumfang können abweichende Nutzungs-Richtlinien gelten.

Kommerzielle Nutzung

Eine kommerzielle Nutzung liegt dann vor, wenn entweder der primäre Zweck der Anwendung selbst oder der Website, in der sie eingebettet wird, zur Erzielung von Einnahmen dient. In diesem Falle ist der Erwerb einer kostenpflichtigen Nutzungslizenz erforderlich. Wenn Sie nicht sicher sind, ob Ihr Anwendungszweck als kommerziell einzustufen ist, können Ihnen ggf. die folgenden Beispiele als Anhaltspunkte dienen.

Auch hier sind - losgelöst von der Lizensierung der Tiffy Software - bei der Nutzung von Bildern aus Flickr oder Ipernity über die API der Software die entsprechenden API Richtlinien von Flickr und Ipernity zu berücksichtigen (siehe hier und hier).

Tiffy Software ist in unterschiedlichen Versionen (z.B. "Tiffy View" für fertige Anwendungen und "Tiffy Toolkit" für die Entwicklung eigener Anwendungen) erhältlich. Die Versionen sind wiederum in unterschiedlichen Lizenzmodellen (Lizensierung pro User / pro Server) lizensierbar. Alles weitere zur Lizensierung finden Sie unter  Tiffy.de, wenn sie dort den entsprechenden Links "how to buy" folgen.