Make Your Own Viewer

Making a 2D Viewer

Looking at my photographs is all very well but I bet you have more interesting images that you would like to display on your own website with a zoom tool. However, you could probably do without the hassle of learning javascript and spending a lot of time figuring all this out for yourself.
I have simplified the process as much as possible so that you can add these viewers to your own website.
A very basic knowledge of html is all that you require.

You can download the zip file containing the ready-made files here: Folder2D

After you unzip the folder and look inside you will see two files.

Now add your 2D image to the folder and rename it "I1a.jpg". That is short for Image One 'a'.

Now hover the mouse over your "I1a.jpg" file and get the dimensions. For example 4221 x 3606. The first number is the width and the second number is the height.

We need to input this information into the R2D5.html file. You can open this with Notepad, Notepad++ or any simple text editor.

Near the top of the page you will see where to enter the width and height. Do not remove the semi-colons! Javascript needs these to separate statements.

Rename the folder with a name that reminds you of the image inside, the name "Folder2D" won't do if you have several photographs.

Finally, make a hyper-link from your webpage to "R2D5.html".

Making a 3D Viewer

This follows a similar process.

You can download the zip file containing the ready-made files here: Folder3D

After you unzip the folder and look inside you will see five files.

Now add your 3D image pair to the folder for cross-eye viewing. Name the left image "I1a.jpg", and the right image "I1b.jpg".

Now hover the mouse over either image file to get the dimensions (both images should be the same size). For example 4221 x 3606. The first number is the width and the second number is the height.

We need to input this information into the Dimensions.js file. You can open this with Notepad, Notepad++ or any simple text editor.

Near the top of the page you will see where to enter the width and height. Do not remove the semi-colons! Javascript needs these to separate statements.

Rename the folder with a name that reminds you of the image inside, the name "Folder3D" won't do if you have several stereo photographs.

Finally, make a hyper-link from your webpage to "RX5.html".

Making a 3D Viewer that Rotates

Coming soon...