Zoomify Image Viewer Parameters |
 |
The Zoomify Image Viewer supports many parameters as inputs to the Viewer in a web page. Additional parameters are supported that are specific to toolbar skins in the skinFiles.xml file in each Skins folder.* |
 |
Simplest Use - Viewer Defaults Example |

|
The following lines are all that is needed to use the Zoomify Image Viewer in any web page:
<head>
<script type="text/javascript" src="ZoomifyImageViewer.js"></script>
<style type="text/css"> #myContainer { width: 900px; height: 550px } </style>
<script type="text/javascript"> Z.showImage("myContainer", "ZoomifyImageExample"); </script>
</head>
<body>
<div id="myContainer"></div>
</body>
The first script line tells the web page to include the Viewer script file: "ZoomifyImageViewer.js".
The second script line creates the container element for the Viewer to exist in: "myContainer".
The third script line creates the Viewer and tells it what container element to exist in ("myContainer"), what image to display ("ZoomifyImageExample")
Together, the above lines create the Viewer, place it in the page, and tell it what image to show - that's all you need!
|
 |
Custom Use - Optional Parameters Example |

|
The third script line in the example above can optionally include a string of parameters to change how the Viewer looks or behaves. Such a string will look like this (note the use of '&' symbols to join multiple parameters together):
"zInitialX=1125&zInitialY=1385&zInitialZoom=100"
As used in a web page in the third script line above, the string will look like this:
<script type="text/javascript"> Z.showImage("myContainer", "ZoomifyImageExample", "zInitialX=1125&zInitialY=1385&zInitialZoom=100"); </script>
Note that the three parts of the third line are separate strings. They must be separate strings. Only the first two, however, are required. The third string that states the parameters is optional. |
 |
HTML Parameter Lists |

|
A complete parameter list follows, including parameter names, value ranges, and value defaults. |

|
 |
Zoomify HTML5 (standard version, common use): |

|
zInitialX |
Initial view horizontal position in pixels from left edge of image, null to center (default) |
zInitialY |
Initial view vertical position in pixels from top edge of image, null to center (default) |
zInitialZoom |
1 to 100 recommended range**, default is null (zoom-to-fit view area) |
zMinZoom |
1 to 100 recommended range**, default is null (zoom-to-fit view area) |
zMaxZoom |
1 to 100 recommended range**, default is null (zoom-to-fit view area) |
zNavigatorVisible |
0=hide, 1=show, 2= initially show then hide on mouse-out (default), 3=initially hide then show when mouse over, 4 and 5=same as 2 and 3 but minimize rather than hiding*** |
zToolbarVisible |
0=hide, 1=show, 2= initially show then hide on mouse-out (default), 3=initially hide then show when mouse over, 4 and 5=same as 2 and 3 but minimize rather than hiding*** |
zSliderVisible |
0=false, 1=true (default) |
zLogoVisible |
0=hide, 1=show (default) |
zFullPageVisible |
0=false, 1=true (default) |
zFullPageInitial |
Sets Viewer's initial state: 0=false (default), 1=true |
zProgressVisible |
0=false, 1=true (default) |
zTooltipsVisible |
0=hide, 1=show (default) |
zSkinPath |
URL for toolbar skin graphic files, default is Assets/Skins/Default |
|

|
 |
Zoomify HTML5 Developer (more powerful options): |

|
zLogoCustomPath |
URL path to graphic file for custom logo |
zWatermarkPath |
URL path to graphic file for watermark (example: Assets/Watermarks/watermark.png) |
zCopyrightPath |
URL path to xml file for copyright text (example: Assets/Copyrights/copyrightText.xml) |
zHotspotPath |
URL path to hotspot folder - NOT to the hotspots.xml file (differs from Flash-based viewer). Detailed hotspot XML parameter information follows below. |
zHotspotListTitle |
Name to present at top of Hotspot choicelist as first item. Default title is "Hotspots". |
zNavigatorWidth |
Size in pixels, default is 150, useful max is thumbnail width |
zNavigatorHeight |
Size in pixels, default is 100, useful max is thumbnail height |
zNavigatorLeft |
Horizontal position within view area in pixels, default is 0 |
zNavigatorTop |
Vertical position within view area in pixels, default is 0 |
zNavigatorFit |
0=fit navigator aspect ratio to match viewer, 1=fit navigator aspect ratio to match image |
zToolbarPosition |
0=top of viewer, 1=bottom of viewer (default) |
zZoomSpeed |
1=slow to 10=fast, default is 5 |
zPanSpeed |
1=slow to 10=fast, default is 5 |
zFadeInSpeed |
1=slow to 10=fast, default is 5 |
zConstrainPan |
0=false, 1=true |
zClickZoom |
0=disable, 1=enable (default) |
zClickPan |
0=disable, 1=enable (default) |
zMousePan |
0=disable, 1=enable (default) |
zKeys |
0=disable, 1=enable (default) |
zCanvas |
0=disable, 1=enable (default). Auto-disable will override enablement if browser support not present |
zImageProperties |
Enables cross-domain image folder access. Use ImageProperties.xml contents with single quotes.
See example web page 18-ViewCrossDomain.htm for sample use. |
zDebug |
0=disable (default), 1=enable debug panel, 2=enable debug panel as well as tile name displays and tile tracing |
|
 |
 |
Zoomify HTML5 Enterprise (annotation and storage options****): |

|
zAnnotationPath |
URL path to annotation folder - NOT to the annotations.xml file (differs from Flash-based viewer). Detailed annotation XML parameter information follows below. |
zServerIP |
IP address or domain of Zoomify Servlet |
zServerPort |
Port of Zoomify Servlet |
zTileHandlerPath |
Tile handler name. Typically: zTileHandlerPath=/servlet/zoomifyservlet.ZoomifyServlet |
|
 |
XML Parameter Lists |
 |
Hotspot XML Parameters (Developer and Enterprise products) |

|
The Zoomify Image Viewer included in the Zoomify HTML5 Developer and Zoomify HTML5 Enterprise product supports the display of hotspots including graphics (JPG, GIF, PNG) at specified X, Y, and Zoom coordinates, with or without captions and/or tooltips. The Viewer does this by loading the information in the hotspots.xml file found at the URL location provided by the zHotspotPath. This XML file supports numerous parameters. See the example hotspots.xml file in the folder Assets/Hotspots/Default for sample use.
The Hotspots parameters supported by the hotspots XML file include: |

|
|
HOTSPOTSETUP |
|
LISTSOURCE |
Source for list elements, options NAME, CAPTION, TOOLTIP |
INITIALVISIBILITY |
0 hides hotspots on load, 1 shows (default) |
MINSCALE |
Minimum scale permitted for icons during zoom-out |
MAXSCALE |
Maximum scale permitted for icons during zoom-in |
CHOICELIST |
Text for initial choicelist title |
LISTTITLE |
Choicelist position over Viewer: 0 hides, 1 is top-left, 2 is top-right 3 is bottom-right, and 4 is bottom-left. This parameter is new in the HTML5-based Zoomify Image Viewer and is not supported by the Flash-based Hotspots Viewer. |

|
|
HOTSPOT |
|
ID |
Unique identifier for hotspot (integer recommended). The Zoomify Image Viewer also creates its own unique identifier for internal use. |
NAME |
Title to display in hotspot choicelist (unless listsource is set to CAPTION or TOOLTIP) |
MEDIATYPE |
Type of label: 'url' if external graphics file, 'symbol' if library element (supported by Flash-based viewer) |
MEDIA |
URL for JPG, GIF, or PNG to display as label graphic (if instead of a URL the name of an internal symbol is provided as supported in Flash-based Viewer, will be ignored) |
X |
Horizontal coordinate for hotspot, pixels from left edge of image. May also use 'center'. |
Y |
Vertical coordinate for hotspot, pixels from top edge of image. May also use 'center'. |
ZOOM |
Zoom percentage (typically 1 < zoom < 100) , -1 for level of zoom-to-fit display |
XSCALE |
Optional factor to resize hotspot graphic (default: 1) |
YSCALE |
Optional factor to resize hotspot graphic (default: 1) |
URL |
Optional path for hotspot click effect |
URLTARGET |
Optional target for hotspot click effect (default: '_self', alternatives '_blank', etc.) |
ROLLOVER |
Optional parameter to hide hotspot until mouse-over (default: 0, option: 1) |
CAPTION |
Optional text to display below hotspot |
TOOLTIP |
Optional text to display on hotspot mouse-over |
|
 |
 |
Annotation XML Parameters (Enterprise product) |

|
The Zoomify Image Viewer included in the Zoomify HTML5 Enterprise product supports the display of annotations including graphics (JPG, GIF, PNG) at specified X, Y, and Zoom coordinates, with or without captions and/or tooltips. The Viewer also displays an Annotations Panel that includes choicelists for Points of Interest (groups of hotspots), Labels (hotspots), and Notes. The Viewer does this by loading the information in the annotations.xml file found at the URL location provided by the zAnnotationPath. This XML file supports numerous parameters. See the example annotations.xml file in the folder Assets/Annotations for sample use.
The following coverage focuses on the values these parameters can be set to, their ranges, and their defaults. For detailed coverage of the use of the Flash-based Zoomify Annotation Viewer in the Zoomify Enteprise product to create annotations see the Zoomify Enterprise product's User's Guide section titled "Creating and viewing annotations".
The Annotations parameters supported by the annotations XML file include: |

|
|
LABELSETUP |
|
INITIALVISIBILITY |
0 hides labels on load, 1 shows (default) |
MINSCALE |
Minimum scale permitted for icons during zoom-out |
MAXSCALE |
Maximum scale permitted for icons during zoom-in |
PANELPOSITION |
Annotation panel position over Viewer: 0 hides, 1 is top-left, 2 is top-right, 3 is bottom-right, and 4 is bottom-left. This parameter is new in the HTML5-based Viewer and will not be present in annotations.xml files created using the Flash-based Annotation Viewer. It can be manually added to the XML if desired. |

|
|
POI |
|
ID |
Identifier for designer/developer use (recommended: integer). The Annotation Viewer also creates its own unique internal identifier. |
NAME |
Title to display in Annotation Panel's POI choicelist |
X |
Horizontal coordinate for POI, pixels from left edge of image. May also use 'center'. |
Y |
Vertical coordinate for POI, pixels from top edge of image. May also use 'center'. |
ZOOM |
Zoom percentage (typically 1 < zoom < 100), -1 for level of zoom-to-fit display |

|
|
NOTE |
|
ID |
Identifier for designer/developer use (recommended: integer). The Annotation Viewer also creates its own unique internal identifier. |
NAME |
Title to display in Annotation Panel's Note choicelist |
TEXT |
Text for Note (see note below regarding inserting special characters) |

|
|
LABEL (hotspot) |
|
ID |
Unique identifier for annotation (integer recommended). The Annotation Viewer also creates its own unique identifier for internal use. |
NAME |
Title to display in Annotation Panel's Label choicelist. |
MEDIATYPE |
Type of label: 'url' if external graphics file, 'symbol' if library element (supported by Flash-based viewer) |
MEDIA |
URL for JPG, GIF, or PNG to display as label graphic (if instead of a URL the name of an internal symbol is provided as supported in Flash-based Viewer, will be auto-replaced with external file) |
X |
Horizontal coordinate for label, pixels from left edge of image. May also use 'center'. |
Y |
Vertical coordinate for label, pixels from top edge of image. May also use 'center'. |
ZOOM |
Zoom percentage (typically 1 < zoom < 100),, -1 for level of zoom-to-fit display |
XSCALE |
Optional factor to resize label graphic (default: 1) |
YSCALE |
Optional factor to resize label graphic (default: 1) |
URL |
Optional path for label click effect |
URLTARGET |
Optional target for label click effect (default: '_self', alternatives '_blank', etc.) |
ROLLOVER |
Optional parameter to hide label until mouse-over (default: 0, option: 1) |
CAPTION |
Optional text to display below label |
TOOLTIP |
Optional text to display on label mouse-over |

|
|
Special Characters in Annotation XML Parameters
The use of special characters is supported in annotation fields including POI Name, Note Name, Note Text, Label Name, Label Caption, and Label Tooltip. Useful special characters include those listed below: |

|
|
apostrophe |
%27 example: NAME="First POI%27s first label" |
carriage return |
%0D example: CAPTION="First line%0DSecond line" |
ampersand |
%26 example: TOOLTIP="Here%26there" |
tab |
The tab character (URL encoded with %09) is not supported in annotation Name, Note, and other values as it is reserved for switching focus between form fields. |

|
|
Unused Annotation XML Parameters
The following XML parameters are supported by the Flash-based Zoomify Annotation Viewer but are not yet supported by the HTML5-based Zoomify Image Viewer: |

|
|
USER
DATE |
The parameters are created during editing using the Flash-based Annotation Viewer to track the editor and time of the last modification to an annotation. These fields are not displayed in the HTML5 Viewer's Annotation Panel. They are therefore simply ignored. |
CAPTION
TOOLTIP |
These sub-parameters support HTML code inclusion in captions and tooltips in the Flash-based Annotation Viewer. The HTML5-based Viewer does not implement support for HTML parsing and drawing within captions and tooltips. These fields are therefore ignored. |
POINT |
Polygonal labels (hotspots) require control point coordinates sub-parameters. The HTML5-based Viewer does yet not implement support for polygonal labels. These fields are therefore ignored. |
TEXTCOLOR
BACKCOLOR
LINECOLOR
FILLCOLOR
TEXTVISIBLE
BACKVISIBLE
LINEVISIBLE
FILLVISIBLE |
The parameters are used by the Flash-based Annotation Viewer to modify the display of annotations created using vector based graphics stored internally to the Viewer 'swf' file. The HTML5-based Viewer is simply a JavaScript text file without any 'internal' area to store vector graphics. While these could be generated using JavaScript, this is not a feature that has yet been implemented. These fields are therefore ignored. |

|
|
|
 |
Notes |

|
*Additional parameters specific to toolbar skin look and layout are supported in the files (as well in any custom skin sets you may create).
Assets | Skins | Default | skinFiles.xml
Assets | Skins | Dark | skinFiles.xml
Assets | Skins | Light | skinFiles.xml
**Internally in Zoomify Image Viewer JavaScript code zoom range is represented as 0.1 to 1.
***On mobile devices behavior is forced from 2 and 3 to 4 and 5.
****When using the Zoomify Image File single-file (PFF) storage option, the zImagePath parameter must include a '.pff' extention. For example: zImagePath=ZoomifyImageExample.pff.
Additionally, the skinFiles.xml file will contain two button size sets: SIZESSTANDARD and
SIZESLARGE. Selection between these is controlled by the XML value SKINMODE.
0 = auto-select folder based on mobile device detection (default); 1 = always use
SIZESSTANDARD values and the FOLDERSTANDARD files; 2 = always use SIZESLARGE
values and the FOLDERLARGE files.
If using a toolbar in the web page - external to the Zoomify Image Viewer - to toggle into full page view, a Cancel button will be presented in the bottom right corner of the view area. This is necessary as the in-page toolbar will be hidden behind the viewer display when it is expanded to fill the web page.
Additional Annotation Feature Notes: The HTML5-based Zoomify Image Viewer supports many but not all of the annotation features of the Flash-based Zoomify Annotation Viewer. Features not yet implemented include Edit Mode, the Ruler Panel, the Open image list, Print and Save To File features, the Virtual Pointer, Polygonal labels, color and visibility settings for label lines, text, and backfill, time/date stamps display, local/UTC time switching, and HTML code in captions and tooltips, |