Pimp Your Photoshop Zoomify with OpenZoom
Part of my passion for OpenZoom is the promotion of the beauty of large photos on the web and giving people the right tools to publish them. Enabling people to publish their images means building tools that support and enhance the workflow they're already familiar with.
You might know that since version CS3 Adobe Photoshop has a great built-in feature for exporting high-resolution images with Zoomify. The feature works really great. Although it took my machine a couple of minutes, I've managed to export a beautiful 86400×43200 pixel version of the NASA Blue Marble images. The feature would be perfect if it wasn't for the not so perfect, not so smooth Zoomify viewer that is used to view the exported image.
Scratching Your Own Itch
Therefore, while enjoying the calm of the holidays, I sat down and developed an OpenZoom viewer that you can use as an drop-in replacement for the built-in Zoomify viewer in Adobe Photoshop.
Demo: OpenZoom Viewer for Adobe Photoshop
New and improved viewer built with the OpenZoom SDK:
Features
- Fullscreen support
- Mouse navigation (click to zoom in and Shift-click to zoom out)
- Mouse wheel support in all browsers (scroll to zoom)
- Keyboard navigation (Pan with W, S, A, D or arrow keys, Zoom with + / – or I and O, Show All with H, Fullscreen with F.)
- Context Menu support
- Standards-compliant Flash embed through SWFObject
- 6 templates — Normal / Fullscreen: black, gray and white.
- Just 40KB — 100% Flash, no Flex.
- 100% Open Source. No branding.
Demo: Zoomify Viewer for Adobe Photoshop
For comparison, this is the old Zoomify viewer in Photoshop:
Download
- Download OpenZoom Viewer Templates
for Adobe Photoshop CS3/CS4 (ZIP – 86KB).- For installation and tutorials, read the instructions in README.txt
- Enjoy and let me know what you come up with!
Update — March 25, 2009
The OpenZoom Viewer Templates received an update in the form of a 0.3 release and are now known as OpenZoom Tango.
Update — August 9, 2009
With the 0.5.2 release, OpenZoom Tango has moved from Google Code to GitHub. Additionally, OpenZoom Tango is now licensed under the MPL 1.1/GPL 3/LGPL 3 licenses.
P.S. To get started, check out this great tutorial called Zoomify High Resolution Images With Photoshop CS3.
02.01.2009
21:46
Hi,
I’ve installed the viewer in
\Adobe\Adobe Photoshop CS3\Presets\Zoomify\and exported my photograph but get a blank screen when I view the page. It works properly if I export as a Zoomify image. I’ve attached the source of the the generated page and the .swf and .js paths are correct. Any ideas? Is there a limit on file size? My image is 20000 x 20000 pixels. Thanks, Simon.02.01.2009
21:55
Hello Simon
Don’t worry, this is not your fault. A blank screen probably means that there’s a Flash Player security sandbox violation as described in What is Flash Player Security for Local Content. File size shouldn’t be an issue.
First of all, when you upload your file to a server or run on it on a local server, everything should work fine: Basically, as soon as the address starts with
http, you’re fine. To get rid of the blank screen when testing locally, add your output folder to the list of trusted locations through the Adobe Flash Global Security Settings Panel.Try to run your example on a server or follow the instructions with the Security Panel and let me know if this solves the problem.
Regards,
Daniel
03.01.2009
0:45
Hi,
Yes, setting it to a trusted file fixed the problem.
Thanks a lot for your help,
Simon.
03.01.2009
0:50
Simon,
Glad I could help. If anyone has an idea how to ideally publish SWF files that should be local-trusted offline but network-enabled online, please leave a comment.
Cheers,
Daniel
15.01.2009
23:27
The one aspect that I like about Silverlight Deep Zoom and Seadragon is that it keeps panning the viewport when the mouse is over some other part of the page. Is it possible to accomplish this with the OpenZoom component? Is this AS3 or AS2 Flash Code?
Otherwise its fantastic.
20.02.2009
8:41
G’day Daniel,
You have done a brilliant thing in piggy backing on zoomify in photoshop. Using the info you have here I had my first demo running in a few minutes.
This won’t be online for long but here it is anyway:
http://panedia.biz/5499.htm
I’ll be integrating the openzoom viewer with my large panoramic prints on this site http://vicfires.panedia.com to allow viewers to check out in detail what they ‘might’ be buying.
Thanks again,
Aaron Spence.
20.02.2009
12:20
Here’s a proper demo at much higher resolution:
http://panedia.biz/4837.htm
Is there a method to limit the zoom in? Once a user is at 1:1 or 100% there is no value in zooming in more, but I don’t know if flash can figure the image pixel to screen pixel ratio?
Thanks, Aaron.
20.02.2009
13:52
Aaron,
Thanks for posting, it’s a nice demo. There’s actually already a built-in zoom limit. It’s set for a 400% magnification of the original image.
http://code.google.com/p/open-zoom/source/browse/trunk/src/main/flash/OpenZoomViewer.as?r=169
Cheers,
Daniel
21.02.2009
1:19
OK cool. So we can limit the view to 100%. I know everyone else seems to do it (ie zoom past 100%) but what is the value? There is no more information to be gained beyond 100% of the image… in fact I’d say there is less.
When I’m zooming around my images using the mouse wheel (which is great) I’m constantly zooming in too far and seeing pixelation and jpg artifacts, rather than the image as it was intended to be seen, then zooming out a little trying to view the image pixel for pixel ie 100%.
I’m not criticizing you at all, just wondering why all the ZUI systems like to zoom in way beyond 100% by default.
Thanks, Aaron.
19.03.2009
12:41
Any idea why the AS3 character codes do not render on all systems? I’ve tried 3 machines her in the office and only one of them renders the characters properly in the right-click menu.
19.03.2009
20:26
Malc,
Unfortunately, I don’t know either what causes this bug or how it can be worked around. At least on Mac OS X, the tab control characters are rendered correctly in the context menu.
Let me know if you find out more. I’d love to fix this once and for all!
Cheers,
Daniel
20.03.2009
0:46
Aaron,
I’ve just released an update to the OpenZoom Viewer Templates for Adobe Photoshop, now known as OpenZoom Tango. By default, the magnification is set to 100% for super-crisp high-resolution image rendering.
Thanks for your feedback!
Cheers,
Daniel
24.03.2009
9:03
Fantastic, thanks Daniel,
I read about the update via your twitter feed, I’m flat out at the moment, but will get stuck into this soon
Thanks again,
Aaron.
13.04.2009
16:57
[...] sure you click on the OpenZoom links to get to that site, or read more about Daniel’s motivations on his blog. Great job man.. way to swing for the fences [...]
21.04.2009
19:37
[...] y su proyecto OpenZoom han mejorado este visor de Zoomify, es el llamado OpenZoom [...]
15.05.2009
0:14
Lovely work on Tango, Daniel. Very easy to use. I’ve just put together a couple of examples at http://blog.mindbrix.co.uk/2009/05/14/panoramarific/
Looking forward to learning the code when I get some more time.
All the best,
Nigel.
15.05.2009
10:14
[...] The individual images were shot with a Canon S70 in RAW, converted to JPEG with Aperture, blended with Adobe Photoshop CS3 Photomerge and then exported for Zoomify using the OpenZoom Tango viewer. [...]
07.07.2009
17:13
I really like Tango. It has the nicest image rendering I’ve ever seen but I can’t work out a solution to the context menu strangeness. Can I disable the context menu altogether?
07.07.2009
17:20
Malc,
Glad you like OpenZoom Tango! Sure, you can disable the context menu but you’ll have to adjust the source code and build your own viewer. Though remember that no matter what you’ll always have a minimal context menu since this solution relies on the Adobe Flash Player.
–Daniel
07.07.2009
19:25
That great. I refreshed everything by svn as I hadn’t looked at it in a while and just couldn’t pinpoint exactly where I’d disable it. Seems a bit clearer now
07.07.2009
19:33
Malc,
Actually, I’ve realized that the URL to the source I gave you is slightly outdated. I’ve updated the post with the following source URL:
http://code.google.com/p/open-zoom/source/browse/openzoom/nano/trunk/src/OpenZoomViewer.as?r=387
–Daniel
08.07.2009
12:48
Having trouble with this line:
import org.openzoom.nano.assets.Sad;
23.07.2009
23:06
Hi Daniel,
Great job. I love OpenZoom.
For some reason I can’t get Fullscreen mode to work. It was working at one point, and I think it might have something to do with Flash 10? Are you aware of anyone else having this problem?
Thanks for the great tool.
Will
24.07.2009
12:58
Will,
Glad you like it!
The only reason I can think of why fullscreen shouldn’t work is a missing attribute
allowFullScreen=truein your HTML:http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
Other than that, remember that fullscreen can only be launched after a user interaction, meaning keyboard stroke or mouse click.
Cheers,
Daniel
03.10.2009
13:22
Hi Daniel,
I somehow overlooked this feature. It’s fantastic. It installed and worked smoothly for me on my CS4.
I’d love to have a viewer with the spinning loading icon and zoom in/out buttons, like I saw you built on another page. I tried to create one myself but I’m still having a rough time getting used to AS3.
Thanks for creating this awesome tool.
Michael
07.10.2009
3:51
Michael,
Glad you found OpenZoom Tango. The source code for the viewer with spinner can be found at http://github.com/openzoom/nano/. If you don’t want to mess with code you should try to simply replace your OpenZoomViewer.swf with one from the example you saw, e.g. http://gasi.ch/examples/2009/04/08/inline-multiscale-image-replacement/nytimes/OpenZoomViewer.swf
Cheers,
Daniel
19.10.2009
21:36
Hello Daniel.
Im a photographer who has had a sudden interest in Openzoom.
Im really impressed with your Openzoom for CS4 , its so much better than Zoomify.
While your templates are great I would like to use the nano code to make a few changes.
I have access to both Flash and Flex but am not really familiar with them.
I want to adjust the source code and build my own, but how?
Are there any instructions for a beginner who is keen to learn?
Forgive my ignorance.
Keep up the good work
Best wishes.
Jason
19.10.2009
22:40
Jason,
Glad you found OpenZoom Tango. You can grab the source files for OpenZoom Nano over here:
http://github.com/openzoom/nano and a discussion about how to customize it on our OpenZoom community: http://getsatisfaction.com/openzoom/topics/how_to_modify_the_openzoom_viewer
Feel free to post any questions over at Get Satisfaction.
Cheers,
Daniel
03.11.2009
19:19
Just a belated thank you for answering my question — changing the flashvars to allow fullscreen did indeed work. Thanks again.
20.01.2010
22:04
Hi Daniel. I’ve just put together a nice zoomable gallery using your tech at http://blog.mindbrix.co.uk/2010/01/20/zoomable-gallery/
Enjoy the holiday!