Um unabhängig von bestimmten Layouts zu gewährleisten, dass eine lightbox-diashow immer vollständig überlagernd angezeigt wird

Um unabhängig von bestimmten Layouts zu gewährleisten, dass eine lightbox-diashow immer vollständig überlagernd angezeigt wird, muss man ein „direct-HTML“-Objekt in der gewünschten Seite einbetten. Man kann lightboxes, wie alle diashows, ohne Weiteres mit weniger Aufwand auch in einem i-Frame darstellen, aber SO geht’s auch:

Die auto-embed Funktionen solcher Programme greifen sozusagen „von außen“ in den schon von DFM2HTML erstellten code ein. Der Editor überschreibt dieses aber jedesmal wieder, wenn man nach einer Änderung neu publiziert und die lightbox ist wieder verschwunden. Die Verzeichnisse sind zwar noch da, werden aber nicht mehr adressiert.

Meine Empfehlung: Dieses freeware Programm herunterladen http://visuallightbox.com/ - download

(Vom selben Hersteller gibt es noch weitere super einfach zu bedienende freeware-Angebote (für private webseiten), die ganz genau so zu behandeln sind:

http://wowslider.com/ / http://easyhtml5video.com/ / http://videolightbox.com/

Zunächst muss eine Standalone Diashow erstellt und in einem lokalen Verzeichnis abgelegt werden.

Ich zeige hier nicht jeden erforderlichen Schritt, da das Programm wirklich selbsterklärend ist, nur den allerletzten, der die show speichert. Man kann, falls man mehrere shows in einer Seite einbinden möchte hier...

...einen anderen Namen als „index.html“ einsetzen (hier flies.htm u. sandart.htm) und hat somit die Möglichkeit, weitere directHTML-Objekte einzusetzen, weil so auch das dazu gehörende Verzeichnis anders benannt ist und die Referenzierung im HTML-code entsprechend ist.

Ein Tip: Wenn man im lightbox editor die Bilder Qualität sehr hoch einstellt ist die Datenmenge entsprechend. Meist genügt ein Wert von 90 für Thumbnails und 50 für Templates.

Im Beispiel wurden die Verzeichnisse sowie angelegt.

Eine der html-files nun mit „WordPad-MFC-Anwendung“ o.Ä. öffnen. Das sieht dann z.B. so aus(ok, nicht bunt;-)):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Flies generated by VisualLightBox.com</title>

</head>

<a class="vlb" href="http://visuallightbox.com">javascript slideshow code by VisualLightBox.com v5.4</a>

</div>

</body>

</html>

</body>

</html>

Nun werden die hier rot gekennzeichneten code-Schnipsel (man findet sie leicht zwischen den blauen Infozeilen) in eine neue Textfile kopiert, die man z.B. als „directHTML1.txt“ im Projektordner speichert. Das muss für jede neu erstellte lightbox-show gemacht werden, da ja diese code-Teile ja nur auf diese Show zugeschnitten sind.

<a class="vlb" href="http://visuallightbox.com">javascript slideshow code by VisualLightBox.com v5.4</a>

</div>

Nun erstellt oder öffnet man seine DFM2HTML webseite, und wählt die Seite aus, in welcher die lightbox erscheinen soll. Auf dieser Seite ein Seiten-Objekt mit gewünschter Größe einbinden und da hinein das in der erforderlichen Größe angepasste „direct-HTML“-Objekt. Dieses „direct-HTML“-Objekt wiederum sollte ebenfalls, je nachdem wie man die thumbnails angeordnet hat, in der Größe angepasst werden. So wird das Ganze, wenn das „direct-HTML“-Objekt größer ist als das „page“-Objekt, vertikal scrollfähig. (Macht man das nicht entstehen auch eine horizontale scrollbar und das „sieht nich aus“..). In dessen HTML-Tab nun den oben ausgeschnittenen code kopieren.

Gegebenenfalls für eine 2. Show o.s. wiederholen.

Der blaue Rahmen ist das eingebettete, in der Größe angepasste “directHTML“-Objekt.

(Auch immer daran denken, dass höhenflexible Hauptseiten, die einem PageControlObjekt angehören, nicht scrollfähig sind und dafür erst eine weitere „Kind“- Seite eingefügt werden muss.).

Anschließend müssen die Verzeichnisse, welche alle Dateien für die lightboxes enthalten - hier also „Flies_files“ und „sandart_files“ -, in das Verzeichnis der webseite kopiert werden.

Hat man schon andere scripts in seiner homepage eingebunden, kann es sein, dass es zu Unstimmigkeiten kommt. Dann muss man entscheiden, welche Funktion einem wichtiger ist. Aber, wie erwähnt, besteht immer die Möglichkeit des i-Frames...