This document is intended for Advanced Users who have a good grasp of HTML. The Image Viewer can be fully configured and added to a page by using the Configurator Tool without any understanding of the following information. We recommend that the vast majority of users use this tool to add this function to their pages.

Use the Online Configurator here »

There are two blocks of HTML which need to be added to a page. The first is just a script tag which should be placed where you wish the viewer to appear. The second block of code should be placed at the very end of a page, ideally just before the </body> tag. This second block of code contains the main script tag and , the configuration parameters. Below are the two blocks of code. Add these to a page and adjust the parameter values to meet your requirements. (see table below for the function of each parameter).

Add the following code where you would like the Image Viewer to appear in your page
<script src="jpimageviewerhere.js.js" language="JavaScript"></script>

Add all of the following HTML towards the end of your page, ideally just before the </body> tag
<!-- image viewer parameters --> <div id="JPIMAGEVIEWER_parameters" style="visibility:hidden; height: 1px; width: 1px; overflow:hidden;"> <div id="JPIMAGEVIEWER_width">250</div> <div id="JPIMAGEVIEWER_height">250</div> <div id="JPIMAGEVIEWER_thumbwidth">50</div> <div id="JPIMAGEVIEWER_thumbheight">50</div> <div id="JPIMAGEVIEWER_bgcolor">#EEEEEE</div> <div id="JPIMAGEVIEWER_borderwidth">1</div> <div id="JPIMAGEVIEWER_bordergap">4</div> <div id="JPIMAGEVIEWER_bordercolor">#0000FF</div> <!-- repeat these four parameters for each image you wish to add to the viewer --> <div id="JPIMAGEVIEWER_image1">./images/img1.gif</div> <div id="JPIMAGEVIEWER_link1">http://www.jpowered.com/index.htm</div> <div id="JPIMAGEVIEWER_target1">_self</div> <div id="JPIMAGEVIEWER_text1">text for image 1</div> </div> <script src="jpimageviewer.js" language="JavaScript"></script>

Finally place the two files 'jpimageviewer.js' and 'jpimageviewerhere.js' in the same directory as the web page

These two files are contained in the download package here »

Alternatively right click on the following links and select "Save Target As..." to download these files independently:-

jpimageviewer.js

jpimageviewerhere.js

Parameter Name	Description	Range of Values
JPIMAGEVIEWER_width	The width in pixels of the full size image display area	Any positive valid integer value eg. 200
JPIMAGEVIEWER_height	The height in pixels of the full size image display area	Any positive valid integer value eg. 200
JPIMAGEVIEWER_thumbwidth	The width in pixels of the thumbnail images	Any positive valid integer value eg. 50
JPIMAGEVIEWER_thumbheight	The height in pixels of the thumbnail images	Any positive valid integer value eg. 50
JPIMAGEVIEWER_bgcolor	The background color	Any valid HTML color specification eg. #FFFFFF
JPIMAGEVIEWER_bordercolor	The border color	Any valid HTML color specification eg. #8C8C8C
JPIMAGEVIEWER_borderwidth	The width of the border in pixels	Any positive valid integer value eg. 1
JPIMAGEVIEWER_bordergap	Gap between the border and the image content in pixels	Any positive valid integer value eg. 5
JPIMAGEVIEWER_lkey	If the licensed version is being used then the license key should be supplied with this parameter	A valid license key

The following four parameters should be repeated for each image you wish to add to the viewer. The parameter names should increase by 1 for each additional image. The names below are for the first image, the second image would have names

• JPIMAGEVIEWER_image2
• JPIMAGEVIEWER_link2
• JPIMAGEVIEWER_target2
• JPIMAGEVIEWER_text2

and the third would be

• JPIMAGEVIEWER_image3
• JPIMAGEVIEWER_link3
• JPIMAGEVIEWER_target3
• JPIMAGEVIEWER_text3

and so on for each image

Parameter Name	Description	Range of Values
JPIMAGEVIEWER_image1	The URL of the image file
JPIMAGEVIEWER_link1	A URL that this image should link to.	Any valid URL
JPIMAGEVIEWER_target1	The target frame or window in which the link should open. To open in the current window set this to a value of _self	_self, _blank, _top or any valid frame or window name
JPIMAGEVIEWER_text1	This is the text that will be set as the alternative text (the ALT attribute) for this image.	Plain Text

If at any stage you require assistance, help or advice then please feel free contact us via our support pages at:-

JPowered Support »