Build an album - Step by step

When you are completely new to jAlbum, I suggest to take first a short tour on jAlbum's website to become more familiar with jAlbum itself.
Otherwise, go forward to read the principal steps to build an album with LightFlow:
Hint: Hover with your mouse pointer over these to bring-up a screenshot to illustrate my explications.
  1. Download and install LightFlow in jAlbum.
  2. In jAlbum, choose LightFlow as skin . As long as "Use layout hints" is enabled, LightFlow loads its default options which produce already nice looking albums.
    • If you want to customize your album, open the LightFlow settings and choose your preferred options.
      Hint: On almost all option fields (not their labels) exist a help-tooltip which pops up when you hold the mouse pointer some seconds over it.
    • If you want that clicking a thumbnail in your album opens an external source (e.g. Youtube movie), open that thumbnail in jAlbum's user interface in editing mode. In the lower right corner of jAlbum's window you'll remark the "LightFlow" tab which allows you to enter the URL which links directly to the external source .
      When the URL doesn't reflect the real file extension (as it's the case for Youtube, Daily motion etc.), you should enter a file extension to force LightFlow to handle the file in this way.
      You also might adapt width and height for this individual file to show. As long as the file is a media file, your settings will overwrite only for this file the general setting of width and height for media files, set in the Miscellaneous tab of LightFlow .
    • jAlbum allows to set a number of columns and rows because traditional albums display thumbnails in columns and rows. This may lead to multiple index pages, e.g. when you have 20 photos and you choose only 5 columns and 3 rows, jAlbum will produce 2 index pages. The first one will show the first 15 photos (5x3=15) and the second page the last 5 photos.
      Even if the column & row concept is not really applicable for LightFlow, LightFlow supports it by adding navigation links to the previous and next page (only if they exist). However, when you want to have only one index page, increment the number of columns and rows so that their product (columns multiplied by rows) is greater than the number of your images (LightFlow is set per default to 999 x 999). In order to avoid too long page charging time, consider to split down your large image pool into different subfolders.
  3. Generate the album .
  4. View your generated album locally (in Internet Explorer, you might need to authorize to execute the content ).
  5. Save your project.
  6. Purchase a LightFlow license.
  7. Once obtained your license with your registered LightFlow version, replace the unregistered with your version, load your saved project and rebuild the album (just "Make Changes" which is much more faster than "Make All").
  8. Upload the album to your preferred web hosting service.

Embedding the album with an iframe

If you want to embed the generated album in your existing website by using an iframe, the iframe tag in your website looks typically like this:
<iframe src="pathToYourAlbum/index.html" width="800" height="300" id="album" name="album" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>

When you want that slide images are opened over the whole screen insted to show them inside the iframe, you need to add some lines of html code to the embedding html page.
NEW: Have a look at the file "iframeExample.html" located in the root folder of the generated album in order to have a live example of such an embedded album (since v3.6.3). The html code source of "iframeExample.html" contains a step-by-step guide to explain which lines need to be copied.

However, here comes the same in a bit more general way:
First, you need to include some css and javascript files into your web page. Add the following lines in the head section of your html page (replace "pathToYourAlbum" by the relative path to your album):
<link rel="stylesheet" title="Standard" href="pathToYourAlbum/res/styles.css"
type="text/css" media="screen" /> <link rel="stylesheet" title="Standard"
href="pathToYourAlbum/res/lightwindow/css/lightwindow.css"
type="text/css" media="screen" /> <script type="text/javascript" src="pathToYourAlbum/res/lightflow/lightflow.js" >
</script> <script type="text/javascript"
src="pathToYourAlbum/res/lightwindow/js/lightwindow.js" >
</script>
Next, copy from the index.html of your album the javascript function "lightWindowInit" and paste it at the end of the head section of your html page.
Depending on your LightFlow settings, the javascript snippet to copy & paste should look like this:
<script type="text/javascript">
		function lightWindowInit() {
			LightFlowGlobal.myLightWindow = new lightwindow({
				rootPath: "pathToYourAlbum/res/lightwindow/",
				loadingTxt: "loading or ",
				cancelTxt: "cancel",
				playTxt: "start slideshow",
				stopTxt: "stop slideshow",
				slowerTxt: "slower by 1 second",
				fasterTxt: "faster by 1 second",
				showSlideshow: false,
				circular: true,
				animationDuration: 0.25
			});
		}
		LightFlowGlobal.readyJS=true;
</script>
						
Replace "pathToYourAlbum" by the relative path to your album.

This technique requires that embedding and embedded page are both of the same domain.
Internet Explorer requires furthermore, that the page which embeds the album begins with something like the following lines:
<!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" >
<!-- saved from url=(0014)about:internet -->
				
You can simply copy these lines from index.html of the generated album.
Want to know what these lines technically do? Well, they first declare and reference a DTD. Without them, IE would render the html page in quirks mode which may fail. The last line makes IE placing the html page in the Internet zone, allowing the page to bypass the Local Machine zone lockdown, thus allowing the iframe to access the javascript code of its parent page in order to display the slide over the whole screen.