Ab Version 11: meine kleine Galerie mit XHTML 

Mit der neuen XHTM-Funktion in NOF 11 bieten sich völlig neue Möglichkeiten, interaktive Elemente in eine Webseite zu integrieren.

Auf den ersten Blick ist die Funktion der kleinen Galerie, die über verschiedene Mouse-Over-Befehle erstellt wurde, ähnlich. Diese Galerie funktioniert per Klick und generiert zusätzlich noch den Titel des jeweiligen Bildes neben die Überschrift. Der Einbau benötigt etwas weniger Handarbeit als in der Mouseover-Version. Realisiert wurde das vom bekannten CSS-Quäler (Panda) des www.nof-forum.de  - aber es ist einfacher als man auf den ersten Blick vermutet. Traut euch.... (zur Demo hier klicken)

Vorbereitungen:

Als erstes muss die gewünschte Seite auf XHTML umgestellt werden. Wir drücken F9 und stellen im Layout-Eigenschaftenfenster unter HTML -Ausgabe auf sematisches XHTML um.

Anschließend wird noch ein Scriptschnipsel zwischen den Headtags der Seite platziert.
Im Layout-Eigenschaftenfenster auf den HTML-Button klicken - es öffnet sich das HTML-Eingabefenster (das für alte NOF -User erstmal etwas ungewohnt ausschaut - siehe hier). Der zweite kleine Button im oberen Bereich setzt den Cursor an die gewünschte Stelle.

Folgender Schnipsel wird eingefügt:

die hier eingetragene js-Datei kann entweder von Hand in den local-publish-Order kopiert werden oder als neues Asset eingebunden werden. (die js-Datei gibt es hier zum download). Der Schnipsel selber muss nicht angepasst werden. Nur wer statt H6 (Überschrift6) eine andere Überschriften-Formatierung nutzen möchte, kann entsprechend ändern. Damit es hübsch aussieht muss die H6 natürlich im Style entsprechend angepasst werden - siehe hier

Der Bildeinbau für die Galerie:

Wir erstellen eine Tabelle (im Beispiel 3 Zeilen/1 Spalte) - wie in dem Beispiel - natürlich lassen sich da auch andere Anordnungen verwirklichen.

in die erste Zelle der Tabelle schreiben wir einen Text der für das erste Bild geladen angezeigt wird und formatieren ihn als H6 (hier wird das Script später automatisch den Bildtitel der angewählten Bilder hinzufügen)

in die zweite Zelle der Tabelle fügen wir ein großes Bild als Startbild ein. Dieses Bild benötigt eine ID. Das ID-Eingabefeld finden wir im Reiter Aktionen im Bild-Eigenschaftenfenster (der letzte Reiter).

Hier tragen wir als ID folgendes ein:

• largeImg (natürlich könnte hier auch eine eigene ID eingetragen werden).

Die ersten eigenen Style-Erweiterungen:

Die notwendigen ID-Eigenschaften werden im Style festgelegt. Wir wechseln also in die Ansicht Design und klicken dort auf den Reiter CSS-Code. Dort tragen wir folgende CSS-Code ein:

Höhe und Breite sind die tatsächlichen Werte des großen Bildes, müssen also entsprechend angepasst werden (achtet bitte darauf, dass alle Bilder die gleiche Größe haben) - ohne Definition geht es auch, kann aber unschön zucken, wenn die Bilder unterschiedliche Größen haben - Abstand und Rahmen dienen nur dem Look und können nach Wunsch angepasst oder auch weggelassen werden.

die kleinen Bilder, ihr Link und der anzuzeigende Titel

in die dritte Zelle der Tabelle fügen wir die gewünschten Thumb-Bilder (im Beispiel haben alle 100px Höhe/Breite) ein und verlinken sie ganz wie gewohnt als Datei-Link mit den großen Bildern. Anschließend klicken wir auf den HTML-Button im Link-Fenster und tragen hier in den Tag noch den gewünschten Titel ein.

• Beispiel: title="ich bin der angezeigte text"

Die Zelle erhält eine class, die entweder ebenfalls im css in der Ansicht Design oder auch wie gewohnt unter Text/Formatvorlagen eingerichtet werden. Die class dient lediglich der Zuordnung für das Script im Headtag- aber wenn wir schon eine erstellen, kann man sie auch gleich zum hübsch machen nutzen - hier werden auch eventuell die Größenangaben eurer eigenen Thumb-Bilder eingetragen.

zusätzlich gibt es noch eine class für den Rahmen bei Mouseover:

die Formatierung thumbs img wird nun ganz normal über das Design-Auswahl im Eigenschaftenfenster ausgewählt.

jetzt publizieren und fertisch sind wir - viel spaß beim nachbauen...