Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Thema geschlossen 
Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Bildgalerie SimpleViewer 2.0.3 Erstellung und Anzeige in NOF
#1
Tutorial Einbindung der Fotogalerie „SimpleViewer2“ 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/ (bei MacAffee Security Scan kann der Haken entfernt werden) oder Download hier: http://dl.cdn.chip.de/downloads/60718/fl...ad0e748853

Anm:
Fehlen diese beiden 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 mein bereits fertiges Produkt:
http://vom-friesengrund.de/html/bilder.html

Wichtig zu wissen:
Der „normale, kostenfreie SimpleViewer2 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.


2. Dateien
Bei Download von SimpleViewer2 erhält man die Datei „simpleviewer.zip“. Diese extrahieren (entpacken) und so erhaltet Ihr einen Ordner „simpleviewer_203“. In diesem neuen Ordner wechseln ins Verzeichnis „web“.
Hier findet Ihr 2 weitere Ordner:
o Images und
o Thumbs
Die Beispiel-Bilder in diesen Ordnern können gelöscht werden.

Images
Hier rein gehören die gewünschten großformatigen Fotos, die in der Galerie erscheinen sollen
Thumbs
Hier rein kommen die gleichen, aber kleinformatigen Fotos, deren Größe mit einem Fotoprogramm festgelegt werden können.

Desweiteren erhaltet Ihr noch die Dateien
o Gallery.xml
o Index.html
o Simpleviewer.swf

3. Galerie bearbeiten

Gallery.xml mit einem Editor aufrufen und bearbeiten. Ich benutze immer das Programm „Notepad++“, einen leistungsfähiger Editor.


.jpg  gallery.xmt.JPG (Größe: 98,18 KB / Downloads: 65)


Hier könnt Ihr nach eigenen Wünschen die Textfarbe (textColor), Rahmenfarbe (frameColor) sowie die Anzahl der einzelnen kl. Vorschaubilder (Thumbs) pro Reihe, die Darstellungsgröße der großen Bilder (ImageWidth, ImageHeight) sowie viele andere eigene Einstellungen setzen.

Die Bildunterschriften können ebenfalls verändert werden:
Einfach zwischen <caption> und </caption) des jeweiligen Bildes den gewünschten Text einsetzen.
Anm.:
Sollen Sonderzeichen verwendet werden, ist oben bei encoding anstatt „UTF-8“ „ISO-8859-1“ zu setzen.

Die gewünschte Hintergrundfarbe (Background Color) ist in der „index.html“ zu verändern.
Dazu wird diese wieder mit dem Editor aufgerufen:


.jpg  index.html.JPG (Größe: 109,97 KB / Downloads: 41)


In der Zeile „params.bgcolor“ kann hier ein gewünschter html-Farbcode eingegeben werden. In meinem Beispiel ist es exakt die Hintergrundfarbe der Webpage (F0F0F0).

Die Datei „index.html“ kann zur besseren Zuordnung bei mehreren Flash-Shows auch bequem in einen gewünschten Dateinamen geändert werden (hier: motte.html)

Nach Fertigstellung kann man bei Doppelklick auf die „index.html“ das fertige Ergebnis in einem separaten Fenster betrachten.

4. Veröffentlichung
Am besten erstellt Ihr Euch einen Ordner „SimpleViewer“ und kopiert dort alle Dateien
- Images
- thumbs
- Gallery.xml
- Index.html (bzw. Die unbenannte „xxxxx.html“)
- Simpleviewer.swf
hinein.
Anschl. ladet Ihr den kpl. Ordner „SimpleViewer“ per FTP-Programm (beliebt ist z.B. FileZilla) auf Euren Server.

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


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


Im re. Fenster „Inlineframe-Eigenschaften“ könnt Ihr dann dorthin verlinken, wo auf Eurem Server die Datei /SimpleViewer/index.html (bzw. umbenannte .html) liegt. Dazu nutzt Ihr im Link-Fenster am besten "externer Link" und gebt den genauen Pfad dort ein. Der fertige Link wird dann im angelegten iFrame angezeigt.
Vergesst auch nicht, im re. Fenster "Inlineframe-Eigenschaften" den Haken bei Rahmen zu entfernen.
Anschliessend Rechtklick im angelegten iframe-Fenster, weiter auf „link“ und dort nochmals auf die .html verlinken. Fertig siehts dann so aus:


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


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.

Weitere Informationen und auch zahlreiche andere Beschreibungen von Bildergalerien findet Ihr hier:
http://www.tommyherrmanndesign.com/nof/h...ertut.html

Viel Spaß und Erfolg mit NOF und SimpleViewer 2 !
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#2
Tutorial Einbindung SimpleViewer 2 mit Picasa

Statt alle Bilder (große und kleine für die Galerie) 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. Empfiehlt sich, wenn man nicht ausreichend gemieteten Serverplatz besitzt.

1. Zuerst muss das benötigte Picasa Template für Simple Viewer heruntergeladen werden:
http://simpleviewer.net/downloads/simple...mplate.zip
Das Entpacken des .zip in den Picasa-Ordner:
* Windows: \ Program Files \ Google \ Picasa3 \ web \ Vorlagen
* Macintosh: Anwendungen: Picasa.app: Contents: Resources: Web: Vorlagen
(Zum Navigieren innerhalb eines Pakets, mit Strg-Maustaste und wählen Sie "Paketinhalt zeigen")

Falls noch kein Picasa vorhanden ist, Download neueste Version hier:
http://picasa.google.de/#utm_campaign=de...erm=picasa

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“ angeklickt, anschl. „exportieren“.


.jpg  picasa1.JPG (Größe: 77,91 KB / Downloads: 20)


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

Nun könnt Ihr den Anweisungen des Startposts ab Punkt 3 „Galerie bearbeiten“ weiter folgen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#3
Die neue Version des Simple-Viewers 2.1.1. wird hier beschrieben:

http://www.nof-schule.de/forum/t-bildgal...ige-in-nof
Lieben Gruß
Barbara
--------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Thema geschlossen 


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Bildgalerie SimpleViewer 2.1.1 Erstellung und Anzeige in NOF Manni 2 16.049 30.01.2011, 19:40
Letzter Beitrag: Manni



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!