Wer weiss, wo dieser Hafen im nicht Cyberspace liegt?

Homeport von Dieter Zinniker


Google SiteSearch

Externe Links:

Letzter Update: 04. May 2009 21:42
2382 Besucher seit dem 14. November 2008.

Cooliris

Referenz:

Dass die fotocommuniy.de diesen Artikel referenziert, ehrt mich sehr! Danke!!!

Hier zeige ich auf, wie mit Cooliris ein Fotoalbum erstellt werden kann und darauf aufbauend eine animierte, interaktive und bildschirmfüllende 3D Diashow.

Dabei werde ich sehr pragmatisch und zielführend vorgehen. Vorausgesetzt werden lediglich rudimentäre HTML-/CSS-Kenntnisse.

Bitte vor Durcharbeiten dieses Tutorials das Cooliris Plug-in installieren und danach den Bowser komplett herunterfahren und anschliessend neu starten!

Nachstehend ist ein Mini-Fotoalbum gezeigt, das mit Cooliris / PicLens erstellt wurde. Je nachdem welche der nachstehenden Voraussetzungen ihr Browser erfüllt, ist die Diashow mehr oder weniger überzeugend.

Voraussetzungen für Cooliris:

Damit obiges Mini-Fotoalbum optimal in einer Diashow dargestellt werden kann benötigt man:
(Die Links führen zu den Downloadseiten der einzelnen Produkte)
  • Adobe Flash Player v.9.0.28 oder höher
  • Cooliris Browser Plugin
    Verfügbar für Internet Explorer, Firefox 2 & 3 und Safari.
  • JavaScript muss im Browser aktiviert sein.
Installieren Sie oben aufgeführte Add-ons für Ihren Browser und spielen Sie mit dem Mini-Fotoalbum und den diversen Möglichkeiten / Einstellungen für die Diashow.
Aber auch mit Browsern ohne Cooliris (z.B. Opera) kann die Diashow interaktiv, auch im Vollbildmodus, betrachtet werden mit JavaScript. Selbst mit deaktiviertem JavaScript bleibt einem der Zugrifff auf das Fotoalbum nicht verwehrt, allerdings ohne schöne Übergangseffekte und mit geringerem Bedienungskomfort.

Fotoalbum und Diashow mit Cooliris erstellen

Tipps & Hinweise:
  • Cooliris lässt ihre Originalfotos unverändert.
  • Die Reihenfolge der Bilder im Fotoalbum basiert auf dem Dateinamen
    Eine entsprechende Vorsortierung ist darum angezeigt. Sehr gute Umbenennungs-und Sortiermöglichkeiten bietet Irfanview.
  • Für Bildunterschriften verwendet Cooliris den Dateinamen.
    Dies ist natürlich nicht immer ideal. Ein Workaround werde ich demnächst hier publizieren.

PicLens Publisher

Der PicLens Publisher erstellt aus den Bilder in einem Dateiverzeichnis ein HTML-Fotoalbum.

Um diesem Tutorial folgen zu können, installieren Sie das Tool PicLens Publisher auf Ihrem Rechner und starten Sie anschliessend das Tool. Als Erstes wird man zur Angabe eines Dateiverzeichnises mit Bildern gefragt. Daraufhin werden die gefundenen Bilder aufgelistet. Für einen ersten Test genügt es vorerst, nur ein paar wenige Bilder zu selektieren (10 - 20 genügen). Daraufhin generiert das Tool Miniaturansichten (Thumbnails) der selektierten Bilder. Als nächste Eingabe kann man angeben, wo die erzeugten Dateien abgespeichert werden sollen (bei Bedarf kann man einen neuen Unterordner erstellen; Voreinstellung ist der Desktop!). Merken Sie sich den Speicherort gut!
Am gewählten Speicherort wird man dann folgende Dateien vorfinden:

Datei Beschreibung
instructions.html Enthält Installationsanweisungen (in Englisch)
gallery.html Enthält ein einfaches (schnödes) HTML-Fotoalbum
Der in dieser Datei enthaltene Code kann in die eigene Webseite übernommen werden.
pl_thumbs Verzeichnis mit den Miniaturansichten aller Bilder. Diese Vorschaubilder werden im Fotoalbum gallery.html verwendet.
pl_images Verzeichnis mit Kopien der Originalbilder
photos.rss RSS-Medien Datei.
Diese Datei wird von den Cooliris JavaScripten verwendet, um die Medien-Dateien (Fotos) darzustellen. Mehr dazu im Anhang weiter»»

Das Tool fordert einem auf, all diese Daten auf den Webserver hochzuladen (z.B. mit FileZilla). Merken Sie sich gut den Speicherort der Daten! Rufen Sie dann im Browser die Datei gallery.html im Webbrowser auf. Ein einfaches Fotoalbum wird sich dann öffen.
Alternativ steht Ihnen auch meine gallery.html-Datei hier zur Verfügung.
Testen Sie die Seite auch einmal mit deaktiviertem Cooliris (im FF Extras, Add-ons, Cooliris, deaktivieren und Firefox neu starten). Sie sollten dann die reine JavaScript-Variante testen können. Wenn JavaScript deaktiviert wird, kann die reine HTML-Variante getestet werden.
Für das weitere Vorgehen aktivieren Sie JavaScript und Cooliris wieder.

Schaut man sich den Seiten Quelltext von gallery.html an, stellt man fest, dass im <head>-Bereich der Seite folgendes steht: 

	
<!-- Step 1: Add a Photos RSS feed to this webpage. //-->
<link rel="alternate" href="path/photos.rss" type="application/rss+xml" title="" id="gallery" />

<!-- Step 2: Include the PiclensLite JavaScript. //-->
<script type="text/javascript" src="http://lite.piclens.com/current/piclens.js"></script>

Im ersten Statement wird mit der Datei path/photos.rss das Fotoalbum definiert. Dieses wird dann vom JavaScript piclens.js "abgespielt" (definiert im 2. Statement).
path/ bezeichnet hier den relativen Pfad von der Seite mit dem Fotoalbum zur Datei photos.rss. Sind beide im gleichen Verzeichnis, entfällt diese Angabe.

Im nächsten Schritt integriere ich die Vorschaubilder des Fotoalbums in mein eigenes Webseiten-Layout, also in diese vorliegende Webseite. Dazu kopiert man den <body>-Bereich aus gallery.html in die eigene Webseite. Das Resultat sieht man nachstehend: Obwohl die Diashow schon voll funktionsfähig ist, ist es natürlich unschön, dass die Tabelle in die rechte Spalte ragt.
Die Formatierungsangaben für die zugrundeliegende Tabelle befinden sich im <head>-Bereich von gallery.html, siehe nachstehende Code-Box:

	
<style type="text/css">
a { color: #00f; }
#pl_main { width: 700px; margin: 20px auto; font-family: Arial; font-size: 14px; line-height: 18px; color: #333; }
table.gallery { padding: 5px; width: 100%;	}
table.gallery td { text-align: center;	}
table.gallery img { padding: 5px; margin: 2px; border: 1px solid #ccc; max-width: 120px; max-height: 120px; }
.mbf-item { display: none; }
</style>

Die Ursache findet man mit ein wenig CSS-Kenntnissen schnell, sie ist oben rot markiert. Ändert man die Breite des <div>-Elementes mit der Klasse "#pl_main" von "700px" auf "100%" passt sich die Tabelle automatisch auf die variable Spaltenlayout-Breite meines Webseiten-Layouts an. Diese Style-Angaben auch in den<head>-Beriech der eigenen Webseite kopiern.
Anmerkung: Damit ich hier beide Variante zeigen konnte hab ich die Klasse "#pl_main" kopiert und die Kopie umgetauft in "#pl_main_mod" und diese für die nachstehende Tabelle verwendet, indem diese in ein <div>-Element der Klasse 'id="#pl_main_mod"' eingebettet wurde.
Zudem hab ich noch den Titel "Carnival in Trinidad" hinzugefügt.

Sieht doch schon ganz passabel aus! Und ist voll funktionsfähig!
  1. Ohne JavaScript
  2. Mit JavaScript
     a) als klickbares Fotoalbum
     b) als automatisch ablaufende Diashow
  3. Mit Cooliris
Man kann die Cooliris 3D Wand auch in die eigene Webseite einbauen ("3D embed wall"). Dazu wird folgender Code eingesetzt: 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="400">
<param name="movie" value="http://apps.cooliris.com/embed/cooliris.swf" />
<param name="flashvars" value="feed=http://www.ihreseite.com/photos.rss" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />

<!--[if !IE]>-->
<object id="coolirisSWF" type="application/x-shockwave-flash"
	data="http://apps.cooliris.com/embed/cooliris.swf" width="100%" height="400">
<param name="flashvars" value="feed=http://www.ihreseite.com/photos.rss" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<!--<![endif]-->
<div><p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash</a></p></div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Weiters muss im root-Verzeichnis der Webpräsenz noch die Datei crossdomain.xml angelegt werden. 
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <site-control permitted-cross-domain-policies="all"/>
    <allow-access-from domain="*.cooliris.com" secure="false" />
    <allow-access-from domain="*.piclens.com" secure="false" />
</cross-domain-policy>

Das Ergebnis sieht dann so aus:

Links (engl.)

 

Anmerkung zu (Media) RSS
Media RSS ist ein RSS Dialekt für die Verbreitung von multimedialen Dateien (Bild, Audio, Video) in der Art eines Nachrichtentickers. Das Vorhandensein dieser Dienstleistung wird dem Webseitenbesucher mit dem Symbol RSS Symbol angezeigt. Durch Anklicken des Symbols abonniert der Besucher Ihren MRSS-Dienst, d.h. er wird periodisch die .rss-Datei laden und auf neue Inhalte überprüfen sowie diese dann dem Besucher präsentieren.
Für Image Grabbers Was bei natürlichen Personen durchaus Sinn machen kann, aber im Internet findet man auch die Media Grabbers und für die sind solche Feeds natürlich gefundenes Fressen ...

 
© 1996-2010 Urheberrecht bei Dieter Zinniker, alle Rechte vorbehalten.
Erste Publikation: 8. September 1996
Letzte Änderung: 04. May 2009 21:42:05
http://www.homeports.ch
   
Haftungsausschluss:
Dieses Web-Site ist keine Publikation einer offiziellen Stelle. Die Seiten erheben weder den Anspruch auf Vollständigkeit noch auf Fehlerfreiheit. Der Autor übernimmt keine Haftung für Schäden Dritter, die durch falsche oder falsch verstandene Angaben auf dieser Webseite entstanden sind.
Zum Impressum.