To assure - independent of specific layouts - that a lightbox show always appears completely overlaying the browser-window a “directHTML”-object has to be
embedded in the desired page. You can use i-frames to display all kinds of
picture shows with much less effort, but this also is a nifty method:
The auto-embed functions of those programs grab “from the outside” so
to speak into the already created DFM2HTML
code. The DFM2HTML-editor overwrites those code changes
everytime the document has been altered and newly published. The lightbox will
not be displayed anymore despite the directories are still there.
To get started I recommend you download one
freeware software here http://visuallightbox.com/ - download
First of all a „standalone“ diashow has to be created
and stored in a local
directory.
I’m not showing every single step cos especially this particular program is
selfexplanatory, just the last step dealing with storing. It is possible – in
case there’s a need of embedding more than one show into a certain page -

to define different names (such as “flies.html” or “sandart.html”), with
the possibility to insert different directHTML-objects, because the
corresponding directories and the references in the html-code are created with
the same names.
My tip:
If you set up your picture quality too high the amount of data is respective.
Normally a value of 90 is good for thumbnails and 50 sufficiant for the
templates.
In this example the directories
and
have been created.
Open one of the html-files with an editor
“WordPad-MFC” or similar. There you see the following: (okay, its not
colored)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head>
<title>Flies
generated by VisualLightBox.com</title>
<meta
http-equiv="content-type" content="text/html;charset=utf-8"
/>
<meta
name="keywords" content="Flies, VisualLightBox, LightBox, Photo Gallery,
gallery generator, gallery template" />
<meta
name="description" content="Flies created with VisualLightBox, a
free wizard program that helps you easily generate beautiful Lightbox-style web
photo galleries" />
<!-- Start VisualLightBox.com HEAD
section -->
<link rel="stylesheet"
href="Flies_files/vlb_files1/vlightbox1.css"
type="text/css" />
<link
rel="stylesheet"
href="Flies_files/vlb_files1/visuallightbox.css"
type="text/css" media="screen" />
<script
src="Flies_files/vlb_engine/jquery.min.js"
type="text/javascript"></script>
<script
src="Flies_files/vlb_engine/visuallightbox.js"
type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section
-->
</head>
<body
bgcolor="#ffffb1">
<!-- Start VisualLightBox.com BODY section
id=1 -->
<div id="vlightbox1">
<a
class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_1.jpg" title="Fliegen
(1)"><img src="Flies_files/vlb_thumbnails1/fliegen_1.jpg"
alt="Fliegen (1)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_2.jpg" title="Fliegen
(2)"><img src="Flies_files/vlb_thumbnails1/fliegen_2.jpg"
alt="Fliegen (2)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_3.jpg" title="Fliegen
(3)"><img src="Flies_files/vlb_thumbnails1/fliegen_3.jpg"
alt="Fliegen (3)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_4.jpg" title="Fliegen
(4)"><img src="Flies_files/vlb_thumbnails1/fliegen_4.jpg"
alt="Fliegen (4)"/></a>
<a class="vlightbox1" href="Flies_files/vlb_images1/fliegen_5.jpg" title="Fliegen (5)"><img src="Flies_files/vlb_thumbnails1/fliegen_5.jpg" alt="Fliegen (5)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_6.jpg" title="Fliegen
(6)"><img src="Flies_files/vlb_thumbnails1/fliegen_6.jpg"
alt="Fliegen (6)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_7.jpg" title="Fliegen
(7)"><img src="Flies_files/vlb_thumbnails1/fliegen_7.jpg"
alt="Fliegen (7)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_8.jpg" title="Fliegen
(8)"><img src="Flies_files/vlb_thumbnails1/fliegen_8.jpg"
alt="Fliegen (8)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_9.jpg" title="Fliegen
(9)"><img src="Flies_files/vlb_thumbnails1/fliegen_9.jpg"
alt="Fliegen (9)"/></a>
<a class="vlightbox1" href="Flies_files/vlb_images1/fliegen_10.jpg"
title="Fliegen (10)"><img
src="Flies_files/vlb_thumbnails1/fliegen_10.jpg" alt="Fliegen
(10)"/></a>
<a class="vlb"
href="http://visuallightbox.com">javascript slideshow code by
VisualLightBox.com v5.4</a>
</div>
<script
src="Flies_files/vlb_engine/vlbdata1.js"
type="text/javascript"></script>
<!-- End VisualLightBox.com BODY section
-->
</body>
</html>
</body>
</html>
Now the red
colored code-snippets (easy to find between the blue colored lines) have to be copied into a new
text-file and stored as “directHTML-code1” in your project directory, for
example. This has to be done with every new show since these snippets are
particular for this one show.
<!-- Start VisualLightBox.com HEAD
section -->
<link rel="stylesheet"
href="Flies_files/vlb_files1/vlightbox1.css"
type="text/css" />
<link
rel="stylesheet"
href="Flies_files/vlb_files1/visuallightbox.css"
type="text/css" media="screen" />
<script
src="Flies_files/vlb_engine/jquery.min.js" type="text/javascript"></script>
<script
src="Flies_files/vlb_engine/visuallightbox.js"
type="text/javascript"></script>
<!--
End VisualLightBox.com HEAD section -->
<!-- Start
VisualLightBox.com BODY section id=1 -->
<div
id="vlightbox1">
<a
class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_1.jpg" title="Fliegen
(1)"><img src="Flies_files/vlb_thumbnails1/fliegen_1.jpg"
alt="Fliegen (1)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_2.jpg" title="Fliegen
(2)"><img src="Flies_files/vlb_thumbnails1/fliegen_2.jpg"
alt="Fliegen (2)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_3.jpg" title="Fliegen
(3)"><img src="Flies_files/vlb_thumbnails1/fliegen_3.jpg"
alt="Fliegen (3)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_4.jpg" title="Fliegen
(4)"><img src="Flies_files/vlb_thumbnails1/fliegen_4.jpg"
alt="Fliegen (4)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_5.jpg" title="Fliegen
(5)"><img src="Flies_files/vlb_thumbnails1/fliegen_5.jpg"
alt="Fliegen (5)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_6.jpg" title="Fliegen
(6)"><img src="Flies_files/vlb_thumbnails1/fliegen_6.jpg"
alt="Fliegen (6)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_7.jpg" title="Fliegen
(7)"><img src="Flies_files/vlb_thumbnails1/fliegen_7.jpg"
alt="Fliegen (7)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_8.jpg" title="Fliegen
(8)"><img src="Flies_files/vlb_thumbnails1/fliegen_8.jpg"
alt="Fliegen (8)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_9.jpg" title="Fliegen
(9)"><img src="Flies_files/vlb_thumbnails1/fliegen_9.jpg"
alt="Fliegen (9)"/></a>
<a class="vlightbox1"
href="Flies_files/vlb_images1/fliegen_10.jpg" title="Fliegen
(10)"><img
src="Flies_files/vlb_thumbnails1/fliegen_10.jpg" alt="Fliegen
(10)"/></a>
<a class="vlb"
href="http://visuallightbox.com">javascript slideshow code by
VisualLightBox.com v5.4</a>
</div>
<script
src="Flies_files/vlb_engine/vlbdata1.js"
type="text/javascript"></script>
<!--
End VisualLightBox.com BODY section -->
Now open a new or an
existing dfm-document and choose the page in which you want the lightbox-show
to appear. Embed a page-object of the desired size and insert a directHTML-object
which again has to be set to the appropriate size in order to fit “your”
thumbnail configuration set while creating the standalone lightbox-show. If the
directHTML object exceeds the size of its displaying page-object a vertical
scrollbar is generated. (if you’re not defining this size also a horizontal
scrollbar will show up and that’s kind of annoying...) In its HTML-Tab
insert the code-snippets from the previous step.
If necessary repeat this for another show.

The blue frame shows the
embedded directHTML-object.
(Always keep in mind that „liquid“ main-pages which
belong to a page-control-object will not generate scrollbars and another
“child”-page has to be inserted in order to achieve scrolling)
Subsequently
all directories holding the data for the lightboxes – here “Flies_files” and
“sandart_files” – have to be copied into the websites’ directory as shown here.

In rare
cases it can happen that errors appear in displaying the homepage when other
scripts have been embedded too. In this case you have to make a decision of
what is of more importance. But, as mentioned above, there’s always the
possibility of using i-frames....