Gleich vorweg – diese Flash-Vorlage ist in der kostenlosen Version von Mediaparts Interactive ( Flash-Gallery.com ) auf maximal 4 Alben je 10 Bilder beschränkt.

Wer die voreingestellte Konfiguration seinen Wünschen anpassen möchte, kann dies in der header.xml Datei tun. Unter anderem habt ihr hier die Möglichkeit, Farbe und Breite des Rahmens, die Hintergrundfarbe, die Dauer der Rotation oder die Breite, Höhe sowie den Abstand der Icons zu definieren. In der Datei kann ebenfalls festgelegt werden, ob die Button Albenübersicht, Thumbnailübersicht, Wiedergabetaste sowie Pausetaste für den Anwender ausführbar sein sollen – siehe hier.

Die Gallery öffnet sich mit der Auswahl der Alben. Der Anwender kann jetzt nach eigenem Interesse eines der Alben auswählen, um in die Thumbnailübersicht zu gelangen. Nachdem er auf eines dieser Vorschaublider klickt, wird dieses im Großformat angezeigt. Ein erneuter Klick auf das große Bild, lässt durch eine Rotation das nächste Bild erscheinen. Die Navigation durch die Photos kann aber auch über die Vor- und Rückwärtsbuttons erfolgen. Auf Wunsch kann der Betrachter eine Slideshow starten oder wieder zur Albenübersicht wechseln.

Original Flash-Applet: Mediaparts Interactive ( Flash-Gallery.com )
bearbeitet für Picasa: Paul van Roekel

• Shadowbox JS nutzt JW FLV Player, welcher unter den Bedingungen der
  Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License, auf nicht kommerziellen Seiten genutzt werden kann.
• Wer den Player auf kommerziellen Seiten anwenden möchte, muss eine Lizenz erwerben.
• Standardmäßig ist der Player für die Nutzung mit Shadowbox JS deaktiviert.
• Für die Aktivierung geht ihr in den Adminbereich [Einstellungen] [Shadowbox JS], ändert die Einstellung [Enable FLV Support] von [false] auf [true] und speichert anschließend. Danach steht unter der Player-Auswahl [FLV] zur Verfügung. Mit der Auswahl des Players, dem Speichern sowie Bestätigen der Lizenzbedingungen, könnt ihr ab sofort den FLV-Player auf eurer Seite nutzen.

• Die Anforderungen für das Plugin sind: WordPress 2.1 oder höher, PHP4 oder höher und MySQL 4.1 oder höher.
• Plugin herunterladen und die Dateien entpacken.
• Das Verzeichnis shashin in den wp-content/plugins/-Ordner kopieren.
• Plugin im Adminbereich aktivieren.
• Um das Plugin zu konfigurieren, muss erwähnt werden, dass es hierfür im Adminbereich von WordPress zwei Standorte gibt.
  1. [Einstellungen] [shashin]
  2. [Werkzeuge] [shashin]

• Befassen wir uns zunächst mit den Einstellungen. Hier müsst ihr als erstes den Picasa-Server eintragen, z.B. http://picasaweb.google.com (Abb. 1)
• Die weiteren Einstellungen sind selbsterklärend, wie z.B:
  * Tägliche Synchronisation der Alben ja/nein
  * Wie soll das große Bild angezeigt werden soll.
  * Anzahl der Bilder pro Seite
  * Sortierreihenfolge etc.
• Nachdem ihr alle Einstellungen, euren Vorstellungen nach, angepasst habt, könnt ihr mit dem Einbeziehen eurer Alben aus Picasa beginnen.
• Dazu wechselt ihr in den Bereich [Werkzeuge] [shashin] und tragt die entsprechende URL bei [Add Albums] ein, wobei ihr zwischen allen oder ausgewählte Alben wählen könnt. (Abb. 2) Bitte beachtet, dass nur öffentliche Alben mit einbezogen werden.

• Nachdem alle Alben in die «Bildverwaltung» eingebunden sind, könnt ihr euch einen prima Überblick, in Form einer Tabelle, verschaffen (Abb. 3).
• Mit einem Klick auf eine Spaltenüberschrift, kann die Sortierreihenfolge geändert werden, z.B. nach Albumtitel, Album Key (Album ID, die vom Plugin automatisch generiert wird) oder nach Synchronisationsdatum.

• Von hier aus, können die Alben nach Änderung im Picasa-Webalbum, synchronisiert werden – dies geschieht entweder für einzelne Alben über den Synchronisationsbutton oder für alle Alben über die Auswahl [Sync All].(Abb. 4)
• Bei der Auswahl [Sync All] ist zu bedenken, dass nur die bereits in WordPress vorhandenen Alben abgeglichen werden. Es kommen keine neuen Alben hinzu. Dies geschieht, wie bereits erwähnt, über die Auswahl [Add Albums].

• Weiterhin könnt ihr in der «Bildverwaltung» die «Zufallsbilder» organisieren.
  Entweder ihr schließt unter der Auswahl [Include in Random? - Yes/No] komplette Alben oder einzelne Photos aus.
• Natürlich könnt ihr über die Löschfunktion auch wieder einzelne Alben aus eurer «Bildverwaltung» entfernen.
• Wie werden nun die Alben oder einzelnen Photos in die Seite oder Artikel eingefügt? Das ganze geschieht über Tags. Der Autor des Plugin empfiehlt beim Schreiben eines Artikel immer zwei Fenster oder Tabs (eins mit der zu schreibenden Seite und eins mit der «Bildverwaltung – am Ende der Seite befinden sich die gängigsten Tags-Beispiel») geöffnet zu haben.

Picasa unterstützt nur eine bestimmte Anzahl von Bildgrößen:

32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576, 640, 720, 800 32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576, 640, 720, 800

Beachte, dass die Größen 32, 48, 64, und 160 spezielle Größen sind, die die Thumbnails in einer quadratischen Größe anzeigen.

• photo_key: (erforderlich) Die Photo-ID findet ihr unter [Werkzeuge] [shashin]beim Klick auf das entsprechende Album.

• max_size: (erforderlich) Die gewünschte Bildgröße – s.o. aufgeführte Größen oder das Stichwort ‘max’ für maximale Größe.

• to_show: (erforderlich) Entweder Auflistung aller Alben mit dem Parameter
  ‘pub_date desc’ oder Auflistung ausgewählter Alben mit der Alben-ID

• max_cols: (erforderlich) Wieviele Spalten soll die Tabelle haben.

• album_key: (erforderlich) Die Album-ID findet ihr unter [Werkzeuge] [shashin].

• how_many: (erforderlich) Wieviele Photos sollen in der Tabelle angezeigt werden.

• caption_yn: (optional-standardmäßig auf ‘n’ gesetzt) Wer eine Bildunterschrift wünscht, sollte hier ‘y’ setzen. Eine weitere Variante wäre ‘c’, dann wird die Bildunterschrift erst nach dem Vergrößern des Photos angezeigt.

• position: (optional) Positionierung des Photos ‘left’ ‘right’ oder ‘center’

• clear: (optional) Abstandsoptionen ‘left’ ‘both’ oder ‘none’

• alt_thumb: Mit einer anderen Photo-ID kann das Thumbnail ersetzt werden. (dies ist nützlich für die Videos)

• location_yn: (optional-standardmäßig auf ‘n’ gesetzt) Habt ihr eurem Album einen Standort in GoogleMaps verpasst, könnt ihr das mit dem Parameter’y’ anzeigen, gleichzeitig wird ein GoogleMaps-Symbol angezeigt.

• pubdate_yn: (optional-standardmäßig auf ‘n’ gesetzt) Wer das Datum der Veröffentlichung vom Album anzeigen möchte, muss hier den Parameter’y’ eintragen.

• info_yn: (optional-standardmäßig auf ‘n’ gesetzt) Setzt ihr den Parameter auf ‘y’, werden alle Angaben (Anzahl der Photos, Datum der Veröffentlichung, Standort und Albumbeschreibung) angezeigt.

• description_yn: (optional-standardmäßig auf ‘n’ gesetzt) Wenn der Parameter’y’ gesetzt wird, erscheint die Albumbeschreibung als Tabellenüberschrift.

• order_by: (optional-standardmäßig auf’taken_timestamp’ gesetzt) Sortieren nach…

• float: (optional) CSS-Float-Wert.

• clear: (optional) CSS-Clear-Wert

• Für alle diejenigen, denen das Plugin gefällt, nur fehlen die Photos bei Picasa – hier eine kurze Beschreibung, wie die Bilder ins Web kommen.
• Voraussetzung für ein Picasa Web Album ist ein Konto bei Google
• Nach erfolgreicher Erstellung eines Accounts, kann man die Funktion des
  Picasa-Webalbum nutzen.
• Am einfachsten lädt man seine Bilder mit der Google-Software Picasa
• Die Webalben sind in Picasa integriert, so dass man bequem von dort seine Photos hochladen kann.
• Markiert entweder einzelne Bilder oder erstellt euch schon vorab Alben.
• Picasa stellt eine Verbindung zum Webalbum her – jetzt braucht ihr nur noch dem Assistenten folgen.

Diese Diashow beginnt automatisch, so dass sich der Betrachter zurücklehnen kann.

Wer selbst aktiv werden möchte, kann die Navigation über den Schieberegler unter den Thumbnails, durch Klicken auf ein Thumbnail oder über die Navigationspfeile [rechts/links] übernehmen.

Original Flash-Applet: Dhinakaran Annamalai
bearbeitet für Picasa: Paul van Roekel

Diese Flash-Vorlage lädt alle Bilder auf einmal und ist in zwei Versionen erhältlich,
schwarz und weiß.

Die Größe der Bilder ist einheitlich und ziemlich klein, etwa ein Drittel der Breite und die Hälfte der Höhe. Diese Vorlage eignet sich besonders für Landschaftsbilder, Porträtbilder werden leicht verzerrt.

Durch die Bilder navigiert der Betrachter durch Klick auf die Photos oder mit der rechten bzw. linken Pfeiltaste der Tastatur.

bearbeitet für Picasa: Paul van Roekel

Eine sehr schöne Flash-Galerie, in der zuerst die Thumbnails auftauchen.

Der Besucher der Webseite kann durch einen Klick auf das Miniaturbild entscheiden,
ob er sich dieses Bild in voller Größe anschauen möchte. Das Originalbild wird danach
im Vollbildmodus angezeigt, durch einen weiteren Klick, gelangt man wieder zur Ausgangsposition.

Original Flash-Applet: Chris Agiasotis
bearbeitet für Picasa: Paul van Roekel

In dieser Flash-Galerie liegen die Potos übereinander, wie auf einem Stapel.

Durch Klicken auf das obere Photo, hat man das Gefühl, man blättert sich durch einen Berg von Bildern.

Original Flash-Applet: Andrew Berg
bearbeitet für Picasa: Paul van Roekel

Diese Flash Slideshow präsentiert sich in einem schönen, schlichten aber professionellen Look.

Die Flash-Galerie startet geordnet in der Übersicht der Miniaturbilder. Durch Klicken auf ein Vorschaubild wird dieses vergrößert, durch erneutes Klicken wieder verkleinert. Auf Wunsch kann der Betrachter eine Slideshow starten.

Original Flash-Applet: JetPhoto Studio – 2007 Edition
bearbeitet für Picasa: Paul van Roekel

In dieser Flash-Galerie werden die Thumbnails wild durcheinander [wie unsortiert auf einem Tisch] geladen, wobei das Format der Miniaturbilder größer als üblich ist.

Das Erscheinungsbild erinnert an die Polaroid-Photos der 80ziger Jahre.
Der Betrachter kann die Thumbnalis mit der Maus zurechtschieben oder durch einen Doppelklick vergrößern und anschließend über die Navigationspfeile durch die Galerie blättern. Ein erneuter Doppelklick verkleinert das Bild wieder.

Original Flash-Applet: Christopher Einarsrud
bearbeitet für Picasa: Paul van Roekel

Diese Vorlage erfordert kein Flash und besticht trotzdem durch sein einfaches Design.
Die Ausgangsposition zeigt quadratische Thumbnails, die durch einen Klick vergrößert werden können. [passen sich der Bildschirmgröße an]

Entweder navigiert der Betrachter in der vergrößerten Ansicht mit den Pfeiltasten der Tastatur durch die Galerie oder beendet die Vergrößerung durch einen erneuten Klick auf das Bild und kehrt somit zur Thumbnailvorschau zurück.

Original Javascript: Torstein Hønsi
bearbeitet für Picasa: Paul van Roekel

Thickbox ist ein Script, das ähnlich wie Lightbox, Bilder einer Website in einem transparenten Overlay anzeigt.

Die Bilder werden automatisch heruntergerechnet und passen sich somit der Browsergröße an, wodurch ein Scrollen erspart bleibt.

Original Javascript: Cody Lindly
bearbeitet für Picasa: Paul van Roekel

Dieses Picasa Template bietet die Lightbox Funktionalität und wird gleich in zwei Varianten [Classic und Colors] angeboten.

bearbeitet für Picasa: galri.free.fr

TiltViewer ist eine Flash-Gallery in 3D. Mit einem Mausklick auf ein Thumbnail, wird dieses vergrößert. Betätigt man in dieser Ansicht die [F] Taste dreht sich das Bild und man erhält zusätzliche Informationen.

Per Klick in den Hintergrund kommt man in die Ausgangsposition zurück. Mit einem Rechtsklick kann man die Vollbildansicht [Go Full Screen] auswählen.

Original Flash-Applet: Felix Turner
bearbeitet für Picasa: Paul van Roekel

Mit der neuen Funktion «Sync to Web» können automatisch die Inhalte von Picasa Webalben mit den Ordner in der lokalen Picasa-Software synchronisiert werden.

Sehr beeindruckend in Picasa3 finde ich den zusätzlichen «Picasa Photo Viewer», eine Applikation, die einen schnellen Blick auf Fotos erlaubt, ohne dass dazu Picasa gänzlich gestartet werden muss.

Ruft zur Konfiguration des «Picasa Photo Viewer» im Startmenü/Programme/Picasa3 folgende Auswahl auf:

Im sich öffnenden Fenster habt ihr nun zwei Möglichkeiten, den «Picasa Photo Viewer» zu konfigurieren.

A: Der «Picasa Photo Viewer» wird aktiviert und alle Dateien, die ihr standardmäßig mit dieser Anwendung öffnen wollt, müssen ausgewählt werden.

B: Der «Picasa Photo Viewer» wird deaktiviert.

Mit dem neuen «Retouch Tool – Ausbesserungswerkzeug» kann man mit wenigen
Klicks Qualitätsmängel wie Kratzer, Wasserflecken, Bildfehler oder Markierungen
von alten Fotografien entfernen.

Ihr findet das «Retouch Tool» im Bearbeitungsmodus unter der Registerkarte «Basic Fixes». Hier könnt ihr auch die Größe des Pinsels einstellen, anschließend die zu bearbeitende Stelle durch einmaliges Klicken markieren und danach einen passenden Bereich für die Korrektur durch nochmaliges Klicken auswählen.

Ein weiteres Highlight von Picasa3 ist das Kreieren von Filmen mit Hilfe des Picasa Movie Maker. Die Videodateien können mit Überblendeffekten, Texteinblendungen oder Hintergrundmusik untermalt werden.

• Java Script herunterladen und entpacken.
• Auf dem Webserver ein Verzeichnis erstellen, z.B. "lytebox". Den Pfad zu diesem Verzeichnis bitte merken, da er noch für einige Einstellungen benötigt wird.
• Im Header der Webseite muss folgender Code eingetragen werden – hier den Pfad zum "lytebox" – Verzeichnis anpassen.

<script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/lytebox.js"></script>
<link rel="stylesheet" href="http://www.deinewebsite.de/pfad/zu/lytebox.css" type="text/css" media="screen" />

• Nachdem alle Anpassungen vorgenommen wurden, muss die entsprechende Datei mit der Änderung im Header, auf den Webserver geladen werden.
• Alle Dateien des Java Script können nun ebenfalls in das erstellte Verzeichnis auf den Webserver geladen werden.
• Es gibt vier Möglichkeiten der Anzeige, entweder als Einzelbild, Bildpräsentation mit manueller Navigation, Diashow mit Slideshow Effekt oder Webseiten im Lyteframe darstellen.

L i n k – V a r i a n t e:

Einzelbild mit Close-Button

L i n k - Variante:
<a href="http://deine.webseite.de/bild.jpg" rel="lytebox" title="Beispiel Einzelbild-Text">Beispiel Einzelbild</a>
 
B i l d - Variante:
<a href="http://deine.webseite.de/bild.jpg" title="Beispiel Einzelbild-Bild" rel="lytebox"><img src="http://deine.webseite/thumbs_bild.jpg" alt="Beispiel Einzelbild"></a>
    

L i n k – V a r i a n t e:

Manuelle Navigation durch die Bildpräsentation

B i l d – V a r i a n t e:

L i n k  -  Variante:
<a href="http://deine.webseite.de/bild_01.jpg" rel="lytebox[wagenrennen]" title="Wagenrennen Bild 1">Manuelle Navigation durch die Bildpräsentation</a>
<a href="http://deine.webseite.de/bild_02.jpg" rel="lytebox[wagenrennen]" title="Wagenrennen Bild 2"> </a>
<a href="http://deine.webseite.de/bild_03.jpg" rel="lytebox[wagenrennen]" title="Wagenrennen Bild 3"> </a>
<a href="http://deine.webseite.de/bild_04.jpg" rel="lytebox[wagenrennen]" title="Wagenrennen Bild 4"> </a>
 
B i l d  -  Variante:
<table cellpadding="0" cellspacing="0">
    <tr>
        <td width="170"><a href="http://deine.webseite.de/bild_01.jpg" title="Wagenrennen Bild 1" rel="lytebox[wagenrennen1]"><img src="http://deine.webseite.de/thumbs_bild_01.jpg" alt="Wagenrennen"></a></td>
        <td width="170"><a href="http://deine.webseite.de/bild_02.jpg" title="Wagenrennen Bild 2" rel="lytebox[wagenrennen1]"><img src="http://deine.webseite.de/thumbs_bild_02.jpg" alt="Wagenrennen"></a></td>
        <td width="170"><a href="http://deine.webseite.de/bild_03.jpg" title="Wagenrennen Bild 3" rel="lytebox[wagenrennen1]"><img src="http://deine.webseite.de/thumbs_bild_03.jpg" alt="Wagenrennen"></a></td>
        <td width="170"><a href="http://deine.webseite.de/bild_04.jpg" title="Wagenrennen Bild 4" rel="lytebox[wagenrennen1]"><img src="http://deine.webseite.de/thumbs_bild_04.jpg" alt="Wagenrennen"></a></td>
    </tr>
</table>
    

L i n k – V a r i a n t e:

Bildpräsentation mit Slideshow Effekt

B i l d – V a r i a n t e:

L i n k  -  Variante:
<a href="http://deine.webseite.de/bild_01.jpg" rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info]" title="Bild 1">Slideshow Effekt</a>
<a href="http://deine.webseite.de/bild_02.jpg" rel="lyteshow[diashow]" rev="[exif=true]" title="Wagenrennen Bild 2"> </a>
<a href="http://deine.webseite.de/bild_03.jpg" rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info][exif=true]" title="Wagenrennen Bild 3"> </a>
<a href="http://deine.webseite.de/bild_04.jpg" rel="lyteshow[diashow]"" title="Wagenrennen Bild 4"> </a>
 
B i l d  -  Variante:
<table cellpadding="0" cellspacing="0">
    <tr>
        <td width="170"><a href="http://deine.webseite.de/bild_01.jpg" title="Wagenrennen Bild 1" rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info]"><img src="http://deine.webseite.de/thumbs_bild_01.jpg" alt="Wagenrennen"></a></td>
        <td width="170"><a href="http://deine.webseite.de/bild_02.jpg" title="Wagenrennen Bild 2" rel="lyteshow[diashow]" rev="[exif=true]"><img src="http://deine.webseite.de/thumbs_bild_02.jpg" alt="Wagenrennen"></a></td>
        <td width="170"><a href="http://deine.webseite.de/bild_03.jpg" title="Wagenrennen Bild 3" rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info][exif=true]"><img src="http://deine.webseite.de/thumbs_bild_03.jpg" alt="Wagenrennen"></a></td>
        <td width="170"><a href="http://deine.webseite.de/bild_04.jpg" title="Wagenrennen Bild 4" rel="lyteshow[diashow]"><img src="http://deine.webseite.de/thumbs_bild_04.jpg" alt="Wagenrennen"></a></td>
    </tr>
</table>
                            

E i n e   Webseite:

• Wikio.de  [Weite: 940px Höhe: 720, mit Srolling]

M e h r e r e   Webseiten:

• Google.de  [Weite: 740px Höhe: 380, ohne Srolling]
• Pingalerie.de  [Weite: 1024px Höhe: 720, mit Scrolling]
• Photogalerie  [Weite: 1024px Höhe: 720]

E i n e  Webseite:
<a href="http://deine.webseite.de/" rel="lyteframe" title="Dein Title" rev="width: 940px; height: 720px; scrolling: auto;">Link Name</a>
 
M e h r e r e  Webseiten:
<ul>
    <li><a href="http://www.google.de" rel="lyteframe[group]" title="Google.de" rev="width: 740px; height: 380px; scrolling: no;">Google.de</a></li>
    <li><a href="http://de.yahoo.com/" rel="lyteframe[group]" title="Yahoo.de" rev="width: 1024px; height: 720px; scrolling: auto;">Yahoo.de</a></li>
    <li><a href="http://www.wikio.de/" rel="lyteframe[group]" title="Wikio.de" rev="width: 1024px; height: 720px; scrolling: auto;">Wikio.de</a></li>
</ul>
                            

Lytebox wird standardmäßig mit 5 Farbvarianten geliefert: grey (Standard), red, blue, gold und green. Der Austausch der Farben, kann in der lytebox.js vorgenommen werden, indem man ‘grey’ durch die entsprenden Farbe ersetzt. [siehe Abbildung]

Änderung in der lytebox.js

Problem im Internet Explorer 6

Leider reicht die Änderung für die korrekte Anzeige im IE6 nicht aus. Hier müssen noch zusätzlich einige Modifizierungen in der lytebox.css vorgenommen werden. Standardmäßig werden die Farbeintragungen von der Farbe ‘grey’ angeführt. Für die Farbeinstellung im IE6 muss die gewünschte Farbe an erster Stelle stehen. Einfach die entsprechenden Zeilen austauschen, so dass in der kompletten lytebox.css insgesamt 11 Änderungen erfolgen müssen. [siehe Abbildungen]

Original lytebox.css

Gänderte lytebox.css

Beim ersten Start der Lidl-Software wird die aktuelle Preisliste überspielt, was ein paar Sekunden dauern kann. Um sich später
die Liste anzusehen, muss dieser Button angeklickt werden.

Bildbearbeitung:

Zuschneiden:

Datei öffnen:

Datei speichern:

Freeware Edition

Vollversion