Tutorial Einbindung der Fotogalerie „SimpleViewer2“ (Version 2.1.1) in NOF

Download SimpleViewer2:
http://simpleviewer.net/simpleviewer/ (am Ende der Seite kann die entsprechende Sprache gewählt werden)

1. Voraussetzungen:
- Letztes JavaScript-Update von Sun Microsystems: http://www.java.com/de/download/manual.jsp (Dort am besten auf "jetzt überprüfen" klicken)
- Letzter aktueller Adobe Flash Player
http://get.adobe.com/de/flashplayer/ (MacAffee Security Scan kann der Haken entfernt werden) oder Download hier: http://dl.cdn.chip.de/downloads/60718/flash101.zip?1279051632-127...ad0e748853
- Letzte Version von Adobe Air:
http://get.adobe.com/de/air/

Anm:
Fehlen diese Komponenten (beim Ersteller als auch beim Betrachter), wird im Galerie-Fenster ein entsprechender Fehler angezeigt, der auf fehlendes Java und FlashPlayer hinweist)

Beispiel-Link auf ein bereits fertiges Produkt:
http://vom-friesengrund.de/html/bilder.html

Wichtig zu wissen:
Der „normale, kostenfreie SimpleViewer2 (Version 2.1.1) kann pro Galerie nur max. 50 Bilder bzw. Fotos anzeigen. Für mehr Bilder sowie weitere Features käme dann nur die „pro-Variante“ (kostenpflichtig) in Frage.

SimpleViewer beinhaltet nun auch "SimpleViewer Mobile" , eine Version von HTML5 SimpleViewer, speziell entwickelt für mobile Geräte, die Flash nicht unterstützen. Dazu gehören iPhones, iPads und Android-Geräte. SimpleViewer Mobile bietet eine bessere Darstellung von Bildern auf einem kleinen Bildschirm.

2. Dateien
Bei Download von SimpleViewer2 erhält man die Datei „simpleviewer.zip“. Diese extrahieren (entpacken) und so erhaltet Ihr einen Ordner „simpleviewer_211“. Dieser beinhaltet:
- web (Verzeichnis)
- readme.html
- svBuilder.air

3. Galerie erstellen und bearbeiten
Als erstes wird der „svbuilder“ mit Doppelklick auf dem PC/Notebook installiert.
Anschließend wird dieser gestartet.

Start-Panel


 svbuilder_2.JPG (Größe: 51,54 KB / Downloads: 72)


Hier kann eine neue Gallerie erstellt werden oder eine vorhandene Gallerie, die bereits mit früheren Versionen von Simple Viewer erstellt wurde, geladen und bearbeitet werden.

Images-Panel


 svbuilder_1.JPG (Größe: 83,3 KB / Downloads: 76)


Im folgenden Fenster werden – mit dieser neuen Version 2.1.1 wesentlich vereinfacht – Einstellungen vorgenommen:
1. Bilderauswahl entweder von der lokalen Festplatte oder von „Flickr“
2. Einfügen / „Hereinziehen“ der gewünschten Bilder von der Festplatte
3. Festsetzen der gewünschten Auflösung in der Gallerie. SimpleViewer 2 skaliert größere Formate automatisch auf die eingestellte Größe
4. Auflistung der geladenen Bilder
Im oberen freien Feld des jeweiligen Bildes kann hier schon der gewünschte Text für das Bild eingegeben werden, wie er später in der Fotoshow dargestellt werden soll.

Customize-Panel


 svbuilder_3.JPG (Größe: 78,13 KB / Downloads: 68)


1. Im „Select Preset“ kann zwischen verschiedenen Darstellungsstyles der Fotoshow gewählt werden. Diese können im Pulldown-Menu ausgewählt und direkt im rechten Fenster angesehen werden.
2. Schaltfläche „aktualisieren“ (Refresh)
3. Hier können die verschiedenen, zusätzlichen Angaben gemacht werden:
- Höhe und Breite der Gallerie
- Hintergrundfarbe
- Eingabe des Titels der Gallerie
- Style (wenn nicht schon unter „Select Preset“ gewählt)
- Text- und Rahmenfarbe sowie Rahmenstärke
- Positionierung der kleinen Vorschaubilder (Thumbs) sowie
4. Vorschau der aktuellen Gallerie

Publish-Panel


 svbuilder_4.JPG (Größe: 47,22 KB / Downloads: 42)


1. Hier wird der gewünschte Speicherort und Datei-Name eingetragen und anschl. die fertige Fotoshow mit „save“ auf der Festplatte gespeichert.

4. Veröffentlichung
Erstellt Euch auf Eurem Server innerhalb Eurer Homepages am besten einen Ordner „SimpleViewer“
Ladet den kpl. Ordner, der wie im Publish-Panel angegeben und gespeichert ist, per FTP-Programm (beliebt ist z.B. FileZilla) auf Euren Server als Unterverzeichnis innerhalb SimpleViewer. Hat den Vorteil der Übersichtlichkeit, wenn mehrere Fotoshow mit SimpleViewer in Anwendung kommen.

5. Einbindung in NOF
Auf der betreffenden Seite in NOF, auf der die Galerie erscheinen soll, zieht Ihr nun ein Inline Frame (auch iFrame genannt). Zu finden ist das iFrame-Symbol in der oberen Werkzeugleiste



 iframe1.JPG (Größe: 21,61 KB / Downloads: 108)


Im re. Fenster „Inlineframe-Eigenschaften“ könnt Ihr dann dorthin verlinken, wo auf Eurem Server die Datei /SimpleViewer/index.html (bzw. umbenannte .html) liegt. Der fertige Link wird dann im angelegten iFrame angezeigt.
Anschliessend Rechtklick im angelegten iframe-Fenster, weiter auf „link“ und dort nochmals auf die .html verlinken. Fertig siehts dann so aus:



 SimpleViewer.JPG (Größe: 47,51 KB / Downloads: 124)


In diesem Fall wird die Flash-Galerie innerhalb der iFrames angezeigt.
Selbstverständlich kann man auch ohne iFrame einfach einen externen Link zur .html setzen, um die Galerie zu starten.

Viel Spaß und Erfolg mit NOF und SimpleViewer2

Danke Manni

Tutorial Einbindung SimpleViewer 2 mit Picasa

Statt alle Bilder auf den Server zu legen und größeren Speicherplatz zu verbrauchen, kann man sich des kostenfreien Speicherplatzes von Picasa (Google) bedienen, von wo sich das Programm die Daten holt.

1. Zuerst muss das Picasa Template für Simple Viewer heruntergeladen werden:
http://simpleviewer.net/downloads/simpleviewer_picasa_template.zip
Das Entpacken des .zip in den Picasa-Ordner:
* Windows: \Program Files\Google\Picasa3\web\templates
* Macintosh: Anwendungen: Picasa.app: Inhalt: Ressourcen: Web: Vorlagen
(Zum Navigieren innerhalb eines Pakets, mit CTRL + Klick und wählen Sie "Paketinhalt zeigen")

Falls noch kein Picasa vorhanden ist, Download neueste Version hier:
http://picasa.google.de/#utm_campaign=de&utm_source=de-ha-emea-de...erm=picasa
Die derzeit neueste Version ist Picasa 3.8.0 (öfters mal nach Updates schauen).

2. Picasa starten

3. Weitere Bearbeitung innerhalb Picasa
In Picasa wählt Ihr den Ordner, der die gewünschten Bilder für die Galerie enthält und wählt anschl. in der oberen Menuleiste „Ordner“ und weiter „Als HTML-Seite exportieren..“.
Im folgenden Fenster wählt Ihr die gewünschte Auflösung der Bilder, wie sie später in der Galerie angezeigt werden sollen (320, 640, 800 oder 1024 pixel). Der Name/Titel der Galerie-Seite wird eingegeben sowie der Speicherort (s. Beispiel im angehängten Bild). Im darunterliegenden Fenster wird „SimpleViewer 2.1.1“ angeklickt, anschl. „exportieren“.


 Picasa-template.JPG (Größe: 74,79 KB / Downloads: 33)


Anschliessend wird die Galerie erzeugt und in neuem Browser-Fenster angezeigt, wie sie sich z.Zt. darstellt.

Nun könnt Ihr den svbuilder starten, die erzeugte Gallerie laden und dort weiter bearbeiten (s. Pkt. 3. des o.a. Tutorials).

Weitere Informationen können direkt auf der SimpleViewer Homepage:
http://simpleviewer.net/simpleviewer/support/picasa_template.html
eingesehen werden. Ganz unten kann dort die Sprache auf deutsch gestellt werden. Man habe aber Nachsicht, dass die Übersetzung teilweise schlecht ist.

Sollten Fehler entdeckt werden oder mir neue Versionen entgangen sein und das Tutorial nicht mehr aktuell sein, bitte einen kurzen Hinweis an mich.