- Upload thumbnails and full sized images into
respective folders:
- Thumbnail image filenames MUST be the SAME as the full
sized image filenames. That way only one file name will be
required to be entered per image.
- All thumbnail images are to be placed in the folder "Thumbnails" and
all full sized images are to be placed in the folder "Images".
BOTH of these folders need to be located just outside the root of the
basic webpage that you are embedding the viewer into.
- For example, if my webpage is located here:
http://www.mywebsitestuff.com/DHTMLScrollingImageViewer/DHTMLImageViewerBLACK.htm - Then the images and thumbnail folders should be located here:
http://www.mywebsitestuff.com/DHTMLScrollingImageViewer/Images/
http://www.mywebsitestuff.com/DHTMLScrollingImageViewer/Thumbnails/
Note: it is highly recommended that you keep all full sized images under 600 pixels in either height or width. Larger images take longer to load to the webpage. As well, the popup windows will be make using the viewer more tedious for the user. Nevertheless, if it is necessary to go higher in resolution then the viewer will still work.
- For example, if my webpage is located here:
- Thumbnail image filenames MUST be the SAME as the full
sized image filenames. That way only one file name will be
required to be entered per image.
- Open ONE file to setup script:
We will be using DHTMLImageViewerBLACK.htm & EditMeBLACK.js (from the examples) as starting points to explain the setup procedure.
Note: ALL EditMe*.js files contained within the download are the same with exception to the setup selections that were made.
- Change setup controls
- Set Position, Dimensions And
Color
The following is a snap shot of the first half of the "EditMeBLACK.js" file:
// ||||||||||||||||||||||||||||||||||||||||||||||||||||
// | Set Position, Dimensions And Color HERE |
// ||||||||||||||||||||||||||||||||||||||||||||||||||||
// Image Viewer Dimensions settings (pixels):
var PagePositionLEFT = 300; // Set position of Image viewer from LEFT of page
var PagePositionTOP = 150; // Set position of Image viewer from TOP of page
var InterFaceWidth = 500; // Set [Overall] WIDTH |||| minimum length=300
var ViewingAreaHeight = 160; // Set [Viewing area] HEIGHT |||| minimum length=10
var OverALLBorder = 'on'; // Set [Over All] Border 'on' or '' (blank) for off
// Image Viewer Colors [example: 'red' or '#FF0000']
var OverALLBorderColor = 'gray'; // Set color of [Over All] Border
var ControlsBGColor = 'gray'; // Set color of [Control Area] Background |||| use '' = no color
var ControlsFontColor = 'black'; // Set color of [Control Area] Font
var ViewAreaBGColor = '333333'; // Set color of [Viewing Area] Background |||| use '' = no color
var ImageBorderColor = 'white'; // Set color of [Image] Border
var ButtonBGColor = 'white'; // Set color of [Button] Background
var ButtonFontColor = 'black'; // Set color of [Button] Font
var ButtonBorderColor = 'black'; // Set color of [Button] border
// Image Alignment
var ImageValignment = 'bottom'; // Set vertical alignment within viewer (options: top, bottom. middle)Here you are given control over many display properties for the viewer.
Each setting has a description provided so please pay careful attention to what each setting does and note any limitations that are placed on them.
Dimensions
When changing dimension values please keep in mind that the values are NOT to be placed in quotes. They are numbers. The numbers represent pixels. However, "px" is NOT required. The script will do that for you.The first two dimension settings allow you to locate the viewer on your webpage. By changing the value of PagePositionLEFT for example you can locate the viewer with respect to the LEFT hand side of the webpage. This is also true for PagePositionTOP except you are locating with respect to the top of the page.
InterFaceWidth allows you to set the overall width of the viewer (again in pixels).
ViewingAreaHeight allows you to set the viewing area height.
Notice that you can not change the "control area size".Another Setting
Next, OverALLBorder allows you to turn the Overall border "on". Leave this blank if you do not want a border around your viewer. Otherwise, to show the border you MUST give this a value of 'on' (YES QUOTES INCLUDED)Now onto the color settings!
It is not necessary to go through each of these however it is important to remember that all colors MUST be an acceptable color name such as 'red' or a HEX value that represents the color you wish. It is a good idea to include the # sign before each of the HEX values entered however this will function either way. Another important point is to remember that ALL color selections MUST have quotes around them.
One final setting
ImageValignment allows you to select how the thumbnail images are aligned in the viewing area: bottom, middle, or top. In the above screen shot the images are aligned 'bottom' (YES QUOTES INCLUDED).
- Enter filenames of images
The second half of the file the "EditMeBLACK.js" file is as follows:
var ImageArray = new Array
(
// |||||||||||||||||||||||||||
// | Define Images Here |
// |||||||||||||||||||||||||||
// Thumbnail image filenames MUST be the SAME as the full sized image (to be popped)
// Therefore, here you are ONLY providing that ONE filename.
// All the thumbnail images are to be placed in the folder "Thumbnails"
// All full sized images are to be placed in the folder "Images"
// 1) Place single quotes around each filename
// 2) Place a comma after each filename EXCEPT for the LAST filename
'MichaelFalatineBlueMetalHorse.jpg',
'MichaelFalatineColdCalmPeace.jpg',
'MichaelFalatineDecision.jpg',
'MichaelFalatineHyroEye.jpg',
'MichaelFalatineRealizingTheConnection.jpg',
'MikeFalatineNest.jpg'
// Do not edit below this line
)Here is where you will tell the viewer what your filenames are.
You may place as many image filenames as you wish here, BUT each filename MUST have an image available for BOTH the thumbnail AND full sized image. That is, if you place the image filename here the respective images MUST be located in the folders.
Again, it is important to remember that the file names of the thumbnails MUST match the filenames of the full sized image.
Another important note is that the order in which you place the image filenames in this list will also be the order in which they appear in the viewer.
Finally, there are two syntax rules to placing the image filenames:
1) Place single quotes around each filename
2) Place a comma after each filename EXCEPT for the LAST filename
- Set Position, Dimensions And
Color
- Change setup controls
- Attached two files in <HEAD> of
base webpage
- The final installation requirement is to add the references of the
two .js files to the HEAD of the webpage that you wish the embed the
viewer into.
- If you leave the two files in the same directory that the
webpage is in (using our example) the following would be added to
the <HEAD> of the webpage:
<script type="text/javascript" language="JavaScript" src="DHTMLImageViewer.js"></script>
<script type="text/javascript" language="JavaScript" src="EditMeBLACK.js"></script>
- If you leave the two files in the same directory that the
webpage is in (using our example) the following would be added to
the <HEAD> of the webpage:
A final note
This script is provided free for two primary reasons:
One, to help those out that want such a feature on their website.
Two, to help out other developers learn and contribute.
As such, if your primary goal is to install the feature then please do NOT do anything to DHTMLImageViewer.js.
On the other hand, if you are a developer and on the path to learning more about DHTML or JavaScript then I would encourage you to go through the code, take it apart, add features if you like. If you do add any features then please contact 4thorder(TM) through our website and we will post the additions with credit to you. - The final installation requirement is to add the references of the
two .js files to the HEAD of the webpage that you wish the embed the
viewer into.