Zoom-and-pan viewing - without Flash!
Zoomify HTML5 delivers high-quality image viewing and zoom-and-pan interactivity - without Flash! Be confident your web pages are accessible in all popular browsers on Windows and Macintosh AND NOW on iPads, iPhones and other mobile devices!

Using the Zoomify HTML5 Image Viewer on your web site is as simple as dragging any image file onto the Zoomify Converter, copying the resulting Zoomify Image Folder to your web server along with the ZoomifyImageViewer.js file, and then adding three simple lines to any web page - that's it!
 
Full featured with complete JavaScript source!
Zoomify HTML5 Developer includes all the features and functionality of Zoomify HTML5 plus extensive additional features including easy logo replacement, watermarks, copyrighting, hotspots, and more. And Zoomify HTML5 Developer includes complete editable JavaScript source files for the Zoomify Image Viewer - not minified or obfuscated files- to enable total customization control of Viewer look and functionality.

 
And don't miss the exciting new HTML5 features in Zoomify Enterprise
- including Annotation, editable polygons, single-file PFF viewing, and more!
Special Enterprise customer upgrade pricing available!
Zoomify HTML5 - Features & Benefits
 
Drag & drop image prep - works great with all your web design tools*
Totally standard publishing - just HTML, JPEGs, and one small JavaScript file!
Universal access viewing - every browser, platform, and device - no downloads or installs
HTML parameters for customizing viewer layout and more
Extensive features - initial view settings, layout control, logo hiding - see the demos!
Easy toolbar skinning with GIF, JPG, or PNG files - without any script editing
Web designer friendly - add to any web page with one file and a few simple lines of text
Extensive documentation - User's Guide, and detailed examples
Ready for private, public, and commercial use on web sites, CDs, or DVDs
No royalties or fees - your content is yours - no strings!
Zoomify HTML5 Developer - Enhanced Features & Benefits
 
All the features and benefits of Zoomify HTML5 - plus the following:
Complete JavaScript source code - not minified or obfuscated - enables total customization control.
Enhanced HTML parameters for customizing look and functionality
Enhanced features - logo replacement, watermarks, copyrighting, hotspots & more - see the demos!
Enhanced web designer support - easily accessible commands enable your own web page buttons to zoom-and-pan the Viewer
Enhanced web developer support - built-in debugging dialogs display globals variables and control Viewer states
Enhanced documentation includes HTML Parameter List, JavaScript Function List, and a dozen additional web page feature implementation examples
 
Zoomify HTML5 Includes
 
Zoomify Converter: drag-and-drop tool makes any image zoomable - includes support for image source files up to 256 megapixels in size plus batch conversion support. Converters supporting larger images are also available*
Zoomify Image Viewer: one small JavaScript file with built-in Viewport, Toolbar, Navigator birds-eye view, and more (JavaScript minified and obfuscated)
Web page examples for supported Zoomify Image Viewer features - see demos at right
Example asset files: three example toolbar skin options
Detailed User's Guide PDF
 
Zoomify HTML5 Developer Enhancements:
 
Everything included in Zoomify HTML5 - plus the following:
Complete JavaScript source files: editable source for the Zoomify Image Viewer for total customization and integration control - not minified or obfuscated!
Extended HTML parameter support - full feature access enables extensive additional control for logo replacment, watermarks, copyrighting, hotspots, toolbar replacement with your own web page buttons, and more!
Extended web page examples: fully functional web page examples for every major Zoomify Image Viewer feature - see the demos in the right sidebar!
Extended example asset files: toolbar skin options plus copyright text, and publishing options including web page layers, smart links, resizable, and cross-domain displays
Extended documentation: User's Guide PDF plus HTML Parameter List, and JavaScript Function List
Perfect for all types of high-quality images
Photos Scans
Maps Drawings
Composites Drafts
Records Evidence
Games Screenshots
Perfect for all application arenas that depend on high-resolution image content
Education & Entertainment Museum, Galleries & Image Archives
Wireless & Handhelds eStore, eCatalog, & eMarketing
Mapping, GIS, Real Estate & Travel Aerial Photos & Space Imaging
Multimedia Presentations Infrastructure Planning
Medical & Scientific Defense, Security
Auctions & Classifieds Industrial Quality Assurance
Insurance, Law Enforcement & Forensics Materials Science and Metallurgy
Prerequisites
 
Authoring: manual and batch image conversion are supported on Windows and Macintosh with no special setup. Additional platforms (Unix, Linux) are supported with alternative converters sold separately
Publishing: using just HTML, JPEGs, and one small JavaScript file, the Zoomify Image content can be hosted on any web server and is compatible with popular hosting, publishing, and ecommerce software
Viewing: all popular browsers are supported on all popular platforms including PCs, Macs, iOS, Android, and more without any special downloads or installs
Licensing: The Zoomify Converter is licensed per user - just like Photoshop and other imaging software. Your content is your own - no royalties, no strings. The Zoomify Image Viewer JavaScript file is freely redistributable on web sites or CDs/DVDs, as are your custom versions, provided the source is 'minified'. This does not modify the source code or provide true protection but it does discourage unauthorized copying from your web site. For detailed information please refer to the Zoomify License Agreement.
Using the Zoomify Image Viewer
 
The Zoomify Image Viewer is incredibly easy to use - add it to any web page with just a few simple lines! The information below describes this simple process.
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>
Zoomify HTML5
Demos
View Preset
(1.25GB, Microscopy)
View Full Page
(485MB, Paris Satellite)
Toolbar Skinned
(32MB, Dangerous Beauty)
Layout Simple
(1.2GB, Baghdad Satellite)
Logo Off
(257MB, Ground Zero)
Zoomify HTML5 Developer
Demos
Logo Custom
(197MB, Area 51 Satellite)
Layout Custom
(180MB, Two Dollar Bill)
Watermarks
(18MB, Split Celebration)
Copyrighting
(70MB, Great Wall)
Hotspots
(171MB, NASA Satellite)
Toolbar In Page
(62MB, Ancient Map)
Set View
(18MB, Dubrovnik Harbor)
Set Image
(18MB, 2 Images & Thumbs)
Set Image & Hotspots
(18MB, 2 Images & Thumbs)
View In Layer
(34MB, White House)
View In Link
(32MB, Dangerous Beauty)
View Resizable
(18MB, Dubrovnik Harbor)
View Cross-Domain
(70MB, Great Wall)
Interactivity Off
(5MB, US Forest Service)
Debug Options
(4MB, VW Automobile)
Image credits follow below
 
Using the Zoomify Image Viewer really is as simple as 1, 2, 3:


1. The first script line tells the web page to include the Viewer script file: "ZoomifyImageViewer.js".

2. The second script line creates the container element for the Viewer to exist in: "myContainer".

3. The third script line creates the Viewer and tells it what container element to exist in ("myContainer") and 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

In addition to the incredibly simple use described above, the Zoomify Image Viewer provides extensive options for web designer control - even without any JavaScript coding. Simple HTML parameters can be used to customize Viewer layout, what part of an image is initially displayed, and much more. Parameters are also included to allow skinning of the toolbar to make it match your web site's look and feel - you can even hide the bulit-in toolbar and put your own buttons anywhere in your web page page so your users can zoom and pan the Viewer!

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=230&zInitialY=340&zInitialZoom=100"

Numerous options are supported - a list of supported parameters follows.
Parameter Lists

A partial view of the Zoomify Image Viewer Parameter List follows below. As included in the product, the List additionally includes parameter value ranges and defaults, as well as details on toolbar skinning and automatic support options for mobile devices.
    Zoomify HTML5
zInitialX zInitialY zInitialZoom
zMinZoom zMaxZoom zNavigatorVisible
zToolbarVisible zLogoVisible zSliderVisible
zSkinPath zTooltipsVisible zProgressVisible
zFullPageVisible zFullPageInitial
   
    Zoomify HTML5 Developer additions
   
   
zWatermarkPath zCopyrightPath zHotspotPath
zLogoCustomPath zImageProperties zDebug
zNavigatorWidth zNavigatorHeight zNavigatorLeft
zNavigatorTop zNavigatorFit zToolbarPosition
zZoomSpeed zPanSpeed zFadeInSpeed
zConstrainPan zClickZoom zClickPan
zMousePan zKeys zCanvas
zImageProperties
Zoomify Image Viewer JavaScript Functions - Partial List - Developer And Enterprise Editions Only
Web designers who do not intend to deeply customize the Zoomify Image Viewer can make use of its many features by relying on the default settings of the Viewer, or making use of the simple HTML parameters described above. Web developers familiar with JavaScript will appreciate access to the following functions which provide complete control of every aspect of the Zoomify Image Viewer. Every line of JavaScript in the Zoomify Image Viewer is editable - no obfuscated or hidden files are used.
Interaction Functions
pan
zoom
reset
toggleFullPageViewExternal
setView
setImagePath
Toolbar.show
Navigator.setVisibility
Utils.showGlobals
getX
getY
getZoom
Core Functions
updateView
resetDisplays
selectBackfillTier
selectTier
selectTiles
clearDisplay
redisplayCachedTiles
loadNewTiles
loadTile
formatTilePath
makeNetRequest
displayTile
drawTileInHTML
drawTileOnCanvas
view
zoomAndPan
zoomAndPanToView
scaleTierToZoom
zoomAndPanAllStop
constrainPanByImageCoordinates
constrainPanByViewportContainer...
constrainPanByViewportDisplayCoord...
constrainZoom
toggleFullPageView
syncToolbarSlider
syncSliderToViewport
syncNavigator
syncViewport
visibility
minimize
nodeIsInViewer
convertTierScaleToZoom
convertZoomToTierScale
convertImageCoordsToViewportCoords
convertViewportCoordsToImage...
convertPageCoordsToViewportCoords
Object Functions
ZoomifyImageViewer
ZoomifyViewport
ZoomifyToolbar
ZoomifyNavigator
Tile
TileImageNetRequest
NetConnector
Button
Graphic
Point
Point3D
BoundingBoxInPixels
BoundingBoxInTiles
createContainerElement
createGraphicElement
Event Functions
buttonEventsHandler
buttonEventHandlersRemove
buttonEventHandlersReset
buttonEventHandlersUpdate
backgroundEventsHandler
buttonFPCancelHandler
navigatorMouseDownHandler
navigatorMouseMoveHandler
navigatorMouseUpHandler
navigatorTouchStartHandler
navigatorTouchMoveHandler
navigatorTouchEndHandler
navigatorTouchCancelHandler
sliderSlideStart
sliderMouseMoveHandler
sliderTouchMoveHandler
sliderSlide
sliderSlideEnd
sliderSnap
viewerDisplayMouseOverHandler
viewportDisplayMouseDownHandler
viewerDisplayMouseMoveHandler
viewerDisplayMouseUpHandler
viewerDisplayMouseOutHandler
viewerDisplayTouchStartHandler
viewerDisplayTouchMoveHandler
viewerDisplayTouchEndHandler
viewerDisplayTouchCancelHandler
viewerDisplayGestureStartHandler
viewerDisplayGestureChangeHandler
viewerDisplayGestureEndHandler
zoomGesture
keyDownHandler
keyUpHandler
fadeInIntervalHandler
orientationChangeHandler
     
 
Product Comparison Notes
 
*
Zoomify Converter Details: The Zoomify Converter included in the Zoomify HTML5 and Zoomify HTML5 Developer products is able to convert source images up to 256 megapixels in size, in TIF, BMP, JPEG, and PNG formats. The Zoomify Enterprise Converter included in the Zoomify HTML5 Enterprise Upgrade product is able to convert source images up to 768 megapixels in size. Additional Zoomify Converters are available for larger images, additional image formats, and platforms other than Windows and Macintosh including multiple flavors of Unix and Linux. For additional information, contact Zoomify Support using the email link below!
!
In order to ensure a quality product release focused on the most-used features of the Zoomify Viewers, it has been necessary to alter, remove, or delay support for features currently available in our Flash-based viewing solutions. We do anticipate adding rotation, slideshow, and other features however we have not yet set a timeline for release.
Image credits: Medical image provided by Center for Comparative Medicine at UC Davis. Dimensions: 20,892 x 20,400 pixels, 1.25 gigabytes (uncompressed). Created under the auspices of the National Cancer Institute with funding from the National Institute of Health. Defense image provided by GeoEye, Inc. Dimensions: 18,000 x 12,223 pixels, 1.2 gigabytes (uncompressed). Baghdad, Iraq, captured by IKONOS satellite.
Have questions about Zoomify products? Ask us!

<

Copyright © 1999-2012 Zoomify, Inc.
All Rights Reserved