SimpleViewer in NOF einbauen (und so sieht es dann aus).

Ich beschreibe hier Version 2.1.2 vom Januar 2011.

Zunächst bitte auf den Link (unten) klicken um die Skripte  downzuloaden.

http://www.airtightinteractive.com/simpleviewer/

Zum komfortablen Einbau guckt Euch bitte meine Beschreibung zum “svBuilder” an.

Ihr erhaltet eine Datei “simpleviewer.zip”.

Diese ZIP-Datei bitte in irgendeinen Ordner extrahieren (entpacken). Nun erhaltet Ihr einen Ordner:

simpleviewer_212

Wechselt in den Ordner “web”. In diesem Ordner werdet Ihr folgende Ordner finden:

1) images
2) thumbs
3) svcore

In jedem der Ordner “images” und “thumbs” sind einige Beispiel-Bilder drin, die Ihr löschen könnt.

Nun kopiert Ihr zunächst alle großen Fotos für Eure eigene Galerie in den Ordner:

images

Jetzt müsst Ihr die kleinen Fotos, die Piktogramme (Thumbs) mit einem Foto-Programm, in der von Euch erwünschten Größe, erstellen und kopiert diese dann in den Ordner:

thumbs

...oder Ihr lasst das alles komfortabel mittel des Programms “svBuilder” vom SimpleViewer erstellen.

In dem Ordner “svcore” befinden sich alle für den SimpleViewer notwendigen Skripte.

Nun müsst Ihr die Datei:

gallery.xml

noch anpassen und die Datei-Namen Eurer Fotos und Thumbs (also z.B. “foto1.jpg”) aus dem Ordner images und thumbs, anstelle der dort ursprünglich eingetragenen Datei-Namen, zwischen dem Befehl <image> einsetzen. Auch diese XML-Datei könnt Ihr komfortabel mit dem “svBuilder” erstellen lassen.

Ebenfalls könnt Ihr die anzuzeigende Beschriftung, zwischen dem Befehlt <caption>, an Eure Bedürfnisse anpassen oder eine URL als Link auf den Pfeil oben rechts setzen, an dem sonst die Fotos einzeln gezeigt werden.

Bitte öffnet diese Datei z.B. mit Eurem Windows-Editor oder Word-Pad (siehe scrollbares Bild unten).

Wie Ihr im Code oben schon erkennen könnt, habe ich außerdem, für meine Seite hier, noch ein einige andere Änderungen vorgenommen, wie z.B. die Text-Farbe “textColor” oder die Rahmen-Farbe “frameColor” oder auch die Breite des Rahmens, um die großen Fotos herum, “frameWidth”.
Außerdem habe ich den Titel auf “Unsere Katze Alina” umgeschrieben. Ich habe das hier fett markiert. Wollt Ihr HTML Formatierungen anwenden, dann muss der Text von dem Befehl <![CDATA[ Der Text ]]> eingekleidet werden, wie Ihr es bei meinem ersten Foto erkennen könnt.

Hier findet Ihr die möglichen Einstellungen für den SimpleViewer (Standard):

http://www.simpleviewer.net/simpleviewer/support/standard_options.html



Um den SimpleViewer auf Eurer Seite direkt einzubauen, zieht Ihr Euch ein Textfeld auf.

> Textfeld aufziehen > im Fenster “Textfeld-Eigenschaften” oben auf den mittleren Button “Text” klicken
> und anschließend auf den Button “HTML”

... und fügt den Code (unten) aus dem <Body-Bereich> der “index.html” vom SimpleViewer ein.

Dazu öffnet Ihr diese Datei mit Eurem Window-Editor.

Ich habe hier auf meine Hintergrund-Farbe von schwarz auf grau “E4E4E4” angepasst, wie im Code unten zu erkennen und auch die Größe der Darstellung von Prozent in eine Pixel-Größe geändert.

Oder Ihr erledigt diese Einstellung komfortabel mit dem “svBuilder” des SimpleViewers.

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
   SV.simpleviewer.load('sv-container', '890px', '800px', 'E4E4E4', true);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->

Ich habe nun hier noch folgendes getan, damit ich nicht sämtliche Pfadangaben in den Skripten umschreiben muss:

Publiziert zunächst die Seite, auf der Ihr das alles einbaut, lokal. Dann wechselt in die Ansicht
“Publizieren” und erstellt dort einen neuen Ordner

simpleviewer

Dann verschiebt die .html-Seite, auf der Ihr das alles einbaut, aus dem Ordner html in den gerade erstellten Ordner simpleviewer, so wie ich es hier detailliert beschreibe.

Nun kopiert Ihr alle vom SimpleViewer zur Verfügung gestellten 3 Ordner (mit Euren neuen Fotos und Thumbs, sowie den Skripten) sowie die Konfigurations-Datei “gallery.xml” in diesen Ordner

simpleviewer

den Ihr gerade erstellt habt, und zwar auf Eurem PC in diesen Ordner, der sich dann im Ordner

 “Lokale Publizierung”

befindet (damit Ihr das auch lokal testen könnt) und dann natürlich später auch alles auf Euren Server (mittels FTP-Programm) in den Ordner “simpleviewer” kopieren.


Das war es dann auch schon.



Viel Erfolg!

nach oben

zurück