Click on the thumbnail below to zoomify!
Snowshoe Fire Tower Panorama
If you’re not using wordpress, check out the panorama and then move on…the rest of this post isn’t for you.
I’ve been telling myself that I would transition my portfolio into WordPress and in the process, attempt to make it a more interesting and useful place (to me at least). To that end, it seemed like it would be cool to have a google-mapish type interface for folks to browse my portfolio. Using Zoomify and the Shadowbox JS plug-in for WordPress, now it’s a relatively simple process to display large, detailed images at high resolution.
It’s easy, looks sweet, and I didn’t spend anything except a Monday evening getting it working! Here’s how I did it…
1. Zoomify the image. Zoomify takes a large image file and converts it into tiles, then creates a supporting flash interface with pan and zoom, and a html page that you can manipulate to your liking (I added one line of spacing at the top of the page to accommodate the Shadowbox) and upload to your site. The express version is free for download here. Better yet, if you’re using Photoshop CS3 there’s an export option for it! I specified an 800×600 interface.
2. Since WordPress lives it its’ own world, I created a new sub-domain (maps.trailgraphics.com) to host the Zoomify files and pages. I uploaded the Zoomify files to the server and viola! I’m panning and zooming!
3. Shadowbox JS is a plug-in for WordPress that displays a new page (among other possibilities) within an overlay on the current page. It is triggered and properties set by adding a snippet to the html of a post. I edited the href for each thumbnail to refer to the zoomify page and added ‘rel=”shadowbox;height=680;width=840″‘ to trigger a shadowbox of the appropriate size.
Simple enough…enjoy.
I loved the pic and… It is what it is.
Ben responds:
on March 12th, 2009 at 6:31 pm
Twas another day in paradise.