JavaScript CSS Image Viewer

JavaScript CSS Image Viewer - Documentation

Image Gallery[ Home ] [ Products ] [ Downloads ] [ Purchase ] [ Support ]

Documentation and Full Parameter Reference

Overview
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 »

Adding the Image Viewer to a Web Page by hand
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

Add all of the following HTML towards the end of your page, ideally just before the </body> tag

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

Full Parameter Reference
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
Support

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

JPowered Support »

JavaScript CSS Image Gallery