date: 20010823
Comments on the script "LomoWall" v2.1 by Marc II

document contents:


Installation

Don't be afraid - now comes a little programmer's work - IT'S QUITE EASY, SO GO ON READING!

Step 1 - adding the code

You just have to load your own HTML file into a text editor (notepad will do it) and copy the script lines into the <head>...</head> section. (see example)
Following, create a table within the <body>...</body> that determines the size and position of your LomoWall. The table looks like this: 
<TABLE>
<TR>
<TD>
<a href="javascript:ClickOnTableImg(1)"><IMG width=xx height=yy border=0 name="tablestart"></a>
</TD>
<TD>
<a href="javascript:ClickOnTableImg(2)"><IMG width=xx height=yy border=0></a>
</TD>
...
</TR>
...
</TABLE>
<script>InitLomoWall();</script>
The cells are numbered, starting with 1 (ClickOnTableImg(number)). This is to determine which image you have clicked on.
Note that the first line contains a marker (name="tablestart") for the script to recognize the position of the table. (see example)
If you don't know how HTML Tables are made, go on to Step 2!

There is yet a more simple way to build the table, if you just want a plain table like in the example shown. I provide a script function to generate the table content automatically. This is especially useful with large tables because it saves some kilobytes and download time. See automatic table.

explanation:


Example of the HTML file: 
<html>
<head>
....(other head contents)

<script language="JavaScript" title="LomoWall">
<!--
  var 
    LomoWallVersion="LomoWall by Marc II (markus.petz@kfunigraz.ac.at) v2.1 20000913";
    LomoWallText="Feel free to use and share this little script whenever you want (please contact me if you do so / want technical support / have suggestions for modifications). LOMO the world!";
    img = new Array("30b","31b","32b","33b","34b","35b","36b","37b","38b","40b","41b","42b","43b","44b","45b");
    ImgFolder = "";
    ImgExtension = ".jpg";

    PopUpLargeImg = "off"
    LargeImgSuffix = "";
    PopUpWinWidth = 400;
    PopUpWinHeight = 320;

    LomoWallReload = "on";
    ReloadAfterSeconds = 5;
    PreLoad = "on";
    UseStyles = new Array("diffuse","lines1","lines2","spots","paths1","paths2"); /* valid values: "diffuse","lines1","lines2","spots","paths1","paths2" */
    LinesRepeat = 2;
    TableHeight = 6;
    TableWidth = 6;
    CountImgAtOnce = 5;
    MaxCountSingleImg = 8;
    CountBeforeDouble = 12;
(...the script itself is too long, doesn't make sense to display all of it here...see test.htm!) 
//-->
</script>
<!End of LomoWall Script>

</head>

<body>
...(some of your own body contents)

  <TABLE ALIGN="center" BORDER="0" CELLSPACING="0" CELLPADDING="0">
  <TR>
    <TD><a href="javascript:ClickOnTableImg(1)"><IMG width=110 height=77 border=0 name="tablestart"></a></TD>
    <TD><a href="javascript:ClickOnTableImg(2)"><IMG width=110 height=77 border=0></a></TD>
    <TD><a href="javascript:ClickOnTableImg(3)"><IMG width=110 height=77 border=0></a></TD>
  </TR>
  <TR>
    <TD><a href="javascript:ClickOnTableImg(4)"><IMG width=110 height=77 border=0></a></TD>
    <TD><a href="javascript:ClickOnTableImg(5)"><IMG width=110 height=77 border=0></a></TD>
    <TD><a href="javascript:ClickOnTableImg(6)"><IMG width=110 height=77 border=0></a></TD>
  </TR>
  <TR>
    <TD><a href="javascript:ClickOnTableImg(7)"><IMG width=110 height=77 border=0></a></TD>
    <TD><a href="javascript:ClickOnTableImg(8)"><IMG width=110 height=77 border=0></a></TD>
    <TD><a href="javascript:ClickOnTableImg(9)"><IMG width=110 height=77 border=0></a></TD>
  </TR>
  </TABLE>
  <script>InitLomoWall();</script>

...(your own body contents)

</body>
</html>
The example above shows a wall table with the properties 3x3 images.


Step 2 - HTML Table explanation

Look at the listing above. There is a <TABLE>...</TABLE> container that makes up a 'blind' table (with no visible borders at all)
three <TR>...</TR> containers (generating three horizontal rows of images)
three <TD>...</TD> containers in each row, that make three vertical divisions of each row, so in total 3x3=9 cells.

The resulting table looks like this (borders are drawn to make it visible):
image 1 image 2 image 3
image 4 image 5 image 6
image 7 image 8 image 9

You can add as many columns and rows as you like, just insert
- a <TR> container for each additional row (these are the lines from <TR> to </TR>)
- a <TD> line for an additional column (note: each row should contain the same amount of columns, and the lines are numbered)

The line: <script>InitLomoWall();</script> at last starts the script once to fill the wall.


Step 3 - Parameters to set

Last, you have to adjust some parameter values to your own needs:

img = new Array("file1","file2"....,filex);
Here you have to type in the names of all your images. If they can all be found in the same folder then you needn't type the folder name every time (explanation follows).

ImgFolder = "ImageFileFolder/";
If all your files can be found in the same folder, then you can type its name here (name followed by "/"), otherwise you should determine the path of each file in the 'img=' line above and leave this one blank (ImgFolder="";).

ImgExtension = ".jpg";
If all the files are of the same type, you can just leave the extensions out in the 'img=' line and determine it here. If not, leave this one blank (ImgExtension="";).

PopUpLargeImg = "off"
"off" lets the LomoWall reassemble when you click an image, "on" lets pop up a new window with a larger version of the clicked image.

LargeImgSuffix = "";
File names of the large image versions must have a unique suffix, e.g. if the small image is pic1.jpg then the large image is pic1b.jpg (and "b" is the LargeImgSuffix)

PopUpWinWidth = 400;
Width of the pop-up window in pixels.

PopUpWinHeight = 320;
Height of the pop-up window in pixels.


LomoWallReload = "on";
If you don't want the wall ro reload and change automatically, set this to "off"

ReloadAfterSeconds = 5;
This tells the script how many seconds it shall wait before it has to load a new wall.

PreLoad = "on";
People having Microsoft Internet Explorer 4.0 can get a better displaying quality by loading the next images before assembling a new wall. The whole thing will work on other browsers as well, but if you want, you can switch this to "off".
Note: with "off", you can watch the loading process. Images will not change all at the same moment, that's why I made this option.

UseStyles = new Array("diffuse","lines1","lines2","spots","paths1");
which pattern style do you want? Valid values:
"diffuse": images are placed in randomly chaos
"lines1": diagonal lines left top - right bottom
"lines2": diagonal lines right top - left bottom
"spots": images come in groups around a centre
"paths1": one by one in a line, direction changing frequently (similar to spots)
"paths2": lines, direction changes less often
(check examples on the WWW)
If you specify different ones, they will be alternated. If one is double it will occur more frequently. Shorten the code if you leave a pattern out.

LinesRepeat = 2;
Only necessary with styles "lines1" or "lines2". This is the "thickness" of the diagonal lines. Try 1, 2 or 3 (or more :-)

TableHeight = 3;
Height of the LomoWall table (number of rows).

TableWidth = 3;
Width of the LomoWall table (number of columns).

CountImgAtOnce = 4;
How many different images do you want to display at once? (if this is 4 for example, then the script will make a LomoWall out of 4 different images).

MaxCountSingleImg = 3;
How often do you want a single image being displayed at the same time? Enter here.

CountBeforeDouble = 12;
How many different images do you wish to be displayed before the first is displayed a second time? (example: 12 says that at least 12 different images occur before one is double)

These variables are for internal use only. Do not Change them.
CountTableImg = TableHeight*TableWidth;
CountTotalImg = img.length;
ImgsToDisplay = new Array(CountImgAtOnce);
CountImgDisplayed = new Array(CountImgAtOnce);
AlreadyChosen = new Array(CountTotalImg);
DiagStart1x = new Array(TableHeight+TableWidth-1);
DiagStart1y = new Array(TableHeight+TableWidth-1);
DiagStart2x = new Array(TableHeight+TableWidth-1);
DiagStart2y = new Array(TableHeight+TableWidth-1);
CellsFilled = new Array(CountTableImg);
CountLoaded = CountImgAtOnce;
TempImg = new Array(CountImgAtOnce);
TableStartImg = 0;
CountReloads = 0;
CountRetries = 0;
BrowserName = navigator.appName;


Step 4

- Mail a Thankyou to: markus.petz@kfunigraz.ac.at
- Please keep the 'version' line. It's for my pleasure, if I should ever see my baby again somewhere on the web. I enjoy programming. (I should tell you that I was actually just learning to program HTML/JavaScript when I made this one)
Feel free to copy this program and use it wherever you want. You may experiment a little with the params or add some new function if you are more than a beginner (if so, please tell me your ideas).

Now you're ready to go! Enjoy your LomoWall 8-)
[Marc II]

Special functions / hints

These functions are thought for advanced users with JavaScript knowledge.

Reload table. Call this function if you want to make a reload button or -icon:
RandomizeImages(0)

To stop reloading:
LomoWallReload='off'; window.clearTimeout(ReloadTimer1);

To restart loading:
LomoWallReload='on'; window.setTimeout('RandomizeImages(1)',ReloadAfterSeconds*1000);

If you want to move the script to an external file:
- copy it to LomoWall.js file (leave the <script...>  <!--  //-->   </script> lines out)
- place inside the header: 

<script language="JavaScript" src="LomoWall.js" type="text/javascript" title="LomoWall by Marc II markus.petz@kfunigraz.ac.at) v2.1 20000907">
</script>


Compacting the code:
delete some functions if you do not use all the patterns:

function SetDiffuse()
{   ...
} /*SetDiffuse*/

function SetDiagonal1()
{   ...
} /*setDiagonal1*/

function SetDiagonal2()
{   ...
} /*setDiagonal2*/

function SetSpot()
{   ...
} /*SetSpot*/

function SetPath1()
{   ...
} /*SetPath1*/

function SetPath2()
{   ...
} /*SetPath2*/
In most cases you will not need all of these. (check examples on the WWW)
If you remove a function then you must remove the corresponding function call within the function RandomizeImages(SetTimer):
if (UseStyles[i1]=="diffuse") SetDiffuse();
if (UseStyles[i1]=="lines1") SetDiagonal1();
if (UseStyles[i1]=="lines2") SetDiagonal2();
if (UseStyles[i1]=="spots") SetSpot();
if (UseStyles[i1]=="paths1") SetPath1();
if (UseStyles[i1]=="paths2") SetPath2();

How to use the automatic table function:
As mentioned above, the HTML code for the table can be generated by a script function. This needs some time to run but saves download time. Call the function as follows:
CreateTable(imagewidth,imageheight);
As you can see, it only asks for the image dimensions in pixels (not the table dimensions, because they are set by TableWidth and TableHeight).

The table in my example would finally shrink to these lines:
<TABLE ALIGN="center" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<script>CreateTable(110,77);</script>
</TABLE>
<script>InitLomoWall();</script>
(note: InitLomoWall(); has to be placed after the table, and if the LomoWall table is embedded in another table it must be placed after that table)

Version history since v1.0

v1.0 --> v1.01 (1.01b 981213)

v1.0 was only a few hours old when I made some fixes, nobody ever has possibly seen it ;-)
- Added var StopSignal, that allows to stop auto-loading at once (set to 1 -> stop)
- Aadded var CountBeforeDouble 'cause it didn't look good when the same image appeared three times in success.
- Added SetTimer parameter to function call. This should prevent multiple timers when you call the function by href.

Future plans: better display in 'spots' or 'lines' of a single image specially for bigger walls. (this is implemented in the current version)

v1.01 --> v2.0  (2.0b 981217; 2.0a 981218)

What has changed? - Almost *everything*.
The new (and better looking) functions produced more code.
- The total images in the table variable was replaced by TableHeight and TableWidth.
- The whole thing is now started via InitLomoWall();
- Added a pre-load feature for loading in the background. I'm sad about this doesn't work with Netscape 4.5 - but it works with MSIE 4.0 (though Bill Gates didn't invent JavaScript!)
- no more need for StopSignal! (yes I learned some more commands ;)
Auto-reloading in now stopped by the following command:
<script>LomoWallReload="off"; window.clearTimeout(ReloadTimer1);</script>
or
<a href="javascript:LomoWallReload='off'; window.clearTimeout(ReloadTimer1);"></a>

v2.0 --> v2.0a

- removed a bug with Netscape 3.x, that does not know the "do - while" loop.
- corrected CountBeforeDouble a bit. (2.0a build 990721)

v2.0a --> v2.1

- Made an automatic check for the CountImgAtOnce*MaxCountSingleImg<CountTableImg pitfall. No need to care about it anymore.
- Added an automatic search for the first image in the table. No more difficulties with MSIE/Netscape incompatibilities.
- Additional one-pixel images for the PreLoad function are now obsolete.
- Added possibility of showing a large image version when clicking the wall (instead of just re-assembling the wall).
- Removed "wait for first load" bug with Internet Explorer.
- Activated background loading with Netscape.
- Corrected error when every image is to be displayed only once.

People I'd like to thank

Stefan Münz
- creator of SelfHTML, THE german HTML/JavaScript reference
www.teamone.de/selfhtml

S.Os. (starvin.marvin@gmx.de)
- who did some very nice adaptions on Silberfish.de that inspired me to review the script
www.silberfisch.de

Masahiko Higuchi
- from LOMO@networkshop in Nagano, Japan, who offered me to translate the download site into Japanese
cobalt.networkshop.co.jp/~mas/album/

Contact information
still have questions? E-mail to markus.petz@kfunigraz.ac.at
www.oocities.org/SiliconValley/Screen/9180/
japanese mirror: lomo.networkshop.co.jp/~marc/