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,

 

zInitialX=970 zInitialY=1630 zInitialZoom=50 zMinZoom=-1 zMaxZoom=150 zNavigatorVisible=1 zToolbarVisible=1 zLogoVisible=1 zMinimizeVisible=1 zSliderVisible=1 zPanButtonsVisible=1 zResetVisible=1 zNavigatorRectangleColor=ff00ff zFullScreenVisible=1 zFullPageVisible=0 zInitialFullPage=1 zProgressVisible=1 zSkinPath=Assets/Skins/Default zTooltipsVisible=1 zHelpVisible=1 zLogoCustomPath=Assets/LogoCustom/toolbarLogoCustom.png zRotationVisible=1 zInitialRotation=90 zVirtualPointerVisible=1 zCrosshairsVisible=1 zRulerVisible=1 zRulerListType=1 zUnits=mm zUnitsPerImage=11.5 zSourceMagnification=40 zRulerWidth=150 zRulerHeight=40 zRulerLeft=80 zRulerTop=10 zMeasureVisible=1 zWatermarkPath=Assets/Watermarks/watermark.png zCopyrightPath=Assets/Copyrights/copyrightText.xml zHotspotPath=Assets/Hotspots/Hotspots1 zHotspotListTitle=Example Hotspots zCoordinatesVisible=1 zCaptionBoxes=0 zNavigatorWidth=100 zNavigatorHeight=80 zNavigatorLeft=10 zNavigatorTop=10 zNavigatorFit=1 zToolbarPosition=1 zZoomSpeed=5 zPanSpeed=5 zFadeInSpeed=5 zConstrainPan=1 zClickZoom=1 zClickPan=1 zMousePan=1 zKeys=1 zCanvas=1 zTilesPNG=1 zDebug=2 zSmoothPan=1 zSmoothPanEasing=3 zSmoothPanGlide=3