What is the best way to add panoramic or high resolution photos in WordPress? How can I add Zoomify to my website?

Zoomify lets you add big images in a small area. It allows people to zoom in to see a detail and move around. It loads very fast and if you use the HTML5 version it works on iOS Devices (iPhone, iPad, iPod Touch) too.

Chapter 1: Zoomify HTML5 (Recommended)
Chapter 2: Zoomify Flash

Chapter 1: Zoomify HTML5

1) Go to Zoomify.com, buy the HTML5 version ($29.00 at the time I wrote these instructions) and download it.
2) Make a new folder and name it Zoomify5
3) In the Zoomify5 folder add...
- ZoomifyImageViewer.js file you find in the files you downloaded from Zoomify
- Assets folder you find in the files you downloaded from Zoomify
- Add a folder named images
4) Open Zoomify Converter and drop your image in the appropriate box
5) You will get a folder named after the name of your image. Rename the folder to Panorama01 (rename future folders Panorama02, Panorama03, Panorama04, …)
6) Take the folder and drop it into the images folder you created in the Zoomify5 folder (upload future folders into this folder on your server)
7) Upload the Zoomify5 folder to the root of your server
8) Use the following code to implement the picture into your website:

<script type="text/javascript" src="/Zoomify5/ZoomifyImageViewer.js"></script>
<style type="text/css"> #Panorama01 { width: 650px; height: 500px } </style>
<script type="text/javascript"> Z.showImage("Panorama01", "/Zoomify5/images/Panorama01", "zSkinPath=/Zoomify5/Assets/Skins/Default", "zLogoVisible=0"); </script>

<div id="Panorama01"></div>

Adapt width and height in the code to fit your needs
Change Panorama01 in the code to Panorama02, Panorama03, … for future images

9) That's it.


Chapter 2: Zoomify Flash

If you're not a friend of HTML5 here are the instructions for using Flash:

1. Make a folder on your Desktop and name it zoomify3
2. In that folder add the image you want to zoomify and name the image zoomify3.jpg
3. Download and open the Zoomify Converter, choose the zoomify3.jpg image as the file to open

Zoomify will create another zoomify3 folder inside the zoomify 3 folder you created

4. Drop the ZoomifyViewer.swf file you find in the folder which downloaded when you downloaded the Zoomify Converter into the zoomify3 folder you created on your Desktop
5. Upload the zoomify3 folder you created to the root of your server (What is the root of a server/website?)
6. Use the following code to embed the zoomify into your website:

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="750" HEIGHT="450" ID="theMovie">
<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=/zoomify3/zoomify3/">
<PARAM NAME="SRC" VALUE="/zoomify3/ZoomifyViewer.swf">
<EMBED FlashVars="zoomifyImagePath=/zoomify3/zoomify3/" SRC="/zoomify3/ZoomifyViewer.swf" MENU="false" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" WIDTH="750" HEIGHT="450" NAME="theMovie"></EMBED>

7. Change width and height to better match your picture's ratio (optional)
8. Paste the code into your post or page where you want the zoomify to appear.

If you want to have multiple zoomify on your website just follow the tutorial again and replace all zoomify3 you find in the tutorial and in the code with zoomify4, zoomify5, zoomify6, ...


This FAQ is also discussed in my WPFAQ.org E-Book (sample)

© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com
Thank you for visiting and supporting my website,
- Cédric -

Now share it…


Comments are closed.