BarsClubsCoffee/CafeContact UsDevonshire QuarterHomeHotelsLeopold SquareMenusPhotosPubsRestaurantsSportTheatres etc.TransportWeatherWest Street
Dreamweaver - Inserting a Zoomify panorama on a Web Page

If you have followed the previous instructions in parts 1 and 2, you should see two files in your new desktop folder.

The folder (here, xyz_img) contains the 'tiles' that have been generated from your image and the second file is a .html page.  Next, right-click on this new folder and copy it.


Finally, go to 'My Computer', navigate to the root folder of your website and paste the file there.  Under 'Files' in Dreamweaver, double-click on the 'panorama' folder:

Panorama files
Image 1

The File on the bottom-left is the .htlm page. (Mine shows as a Firefox document as that is my default browser - if yours is IE, Safari etc. it will appear differently).  Double-click on the file to the left (xyz_img.)

Panorama files (2)
Image 2

The five folders (TileGroup0 to TileGroup4) contain all the individual tiles that will make up your image - in this particular image, an incredible 1097 tiles!).  ImageProperties is an .xml file which we can ignore for this tutorial and zoomifyViewer is the .swf (Flash) file which is where we will see our image.  Use the 'Up' arrow (shown in red above) to go back to the next file structure up (Image 1).

Double-click on the .html file and it will open in Dreamweaver:  (You may get the following dialogue box.  Just press OK).

.swf warning dialog

Zoomify on web page

When this page opens in Dreamweaver, you should get an image as above - a blank web page (remember where we set 'white' as a background template colour here?)  The grey box with the Flash logo (f) is our movie.  Click on it once to select it and click the Play button in the Properties Inspector.

Play Properties

The Flash movie will not 'play' - as in display animation but the panorama image will appear.

If all is well, got to FILE...Save As... and make sure your new html page is saved into the folder containing the other elements of the Zoomify image.

Make sure all files are uploaded to your server and make sure that you have a simple way to navigate to this page, as it will have a convoluted file path.

Want more information about Zoomify?  We strongly recommend that, for a small fee ($29 at present), you can upgrade to Zoomify Design.  This will give you a host of features such as full-screen image, the ability to change skins etc. etc.