Here's an idea. What if you change the contents of the collection pages for each level of detail? What if you want the collection of images to look different when you are zoomed out vs when you are zoomed in? There are many scenarios I can imagine this being useful for.

Think you want to show a large collection of posters (as I do below). Each single poster is designned to "pop", to stand out in a crowd. Now if you want to display hundreds of these together, they all want to "pop" and stand out. The result? A vegetable, meatball, fish, egg noodle, broccoli soup. It doesn't go together well if every (tiny) item on screen is meantt to stand out from every other imagee on screen.

Or, as a designer friend of mine once said, emphasize everytthing and you end up emphasizing nothing. Well that may not be bad (you don't want to emphasize everything) but the resulting image doesn't look pleasing either.

So I decided to give it a whirl. I created a collection and tweaked the jpg files at each level of detail progressively with Photoshop to make them more blurry, black and white, and edge de-emphasized.


So you zoom out - and you see a black and white pool of things, but as you zoom in the posters become more obvious as the posters they are supposed to be (BTW - I scraped these from IMDB, thanks IMDB!). It's a very subtle effect, but it can be useful to give your web experience that subtle fine touch.

All I had to do was change the content of the JPGs in the collection at every level of detail. Deep Zoom handles all of the blending between levels to make the transitions look really smooth. I think for these types of effect, very subtle, small content changes between levels of detail work best. In my experience completely changing the contents between levels doesn't usually produce a good effect. Or, as Blaise always says - the movements have to be continuous. You can't just change things up dramatically as you move around, but you may very well make continuous changes. My favorite usability engineer (hey Sharma) once said: the only important question to ask is: does the user understand what just happened? If you stick to continuous changes from frame to frame, no doubt they will.

How was this done? Well, if you look at the collection structure:

+ 0
+ 1
+ 8

There is a tile for each level of detail (from 1x1 pixels up to 512x512 pixels) in the folders under the collection_files folder. I made some small tweaks to the collection to make editing in Photoshop easier, for example I changed the collection tile size to 1024 (you can do this with sparseimagetool quite easily), and I changed the level of the collection to 10, so all of the images would fit into the collection without the need to make additional changes to the individual images at each level.

You can also see how Deep Zoom nicely stores all of the images in a collection in a texture atlas at each level. This is the basis for the collection optimization, we only need to load one image tile for a bunch of images that are displayed together. Also nice because it makes it easy to change things around manually with Photoshop or any other tool.