Adaptive Zoom

From MegaZine3
Jump to navigation Jump to search

Adaptive Zoom allows you to use different jpegs for different levels of zoom. You can make various levels of readable text, or even change the content at different zoom levels ("Zoom in for detailed graphs!").

Enable Adaptive Zoom

The following is a method to get adaptive zoom working for you, there's not a whole lot of documentation available for adaptive zoom at the moment, so play with various features to see if you can improve this setup.

Prepping your jpegs

An important aspect of Adaptive zoom is choosing the version you want users to see by default. Figure that out first.

Before you start, you should have jpegs at each of the resolutions you want to use. You should also know what factor of scaling you used for each size.

For instance, you might produce these resolutions:

250x250 (Scaling factor 0.5)
500x500 (Scaling factor 1.0)
750x750 (Scaling factor 1.5)
1000x1000 (Scaling factor 2.0)

It's easier if your scaling factors are all the same distance apart (in this example, 0.5).

Changes to the Book element for Adaptive Zoom

In your book element, you should set your pagewidth and pageheight to the default size you want to display. For example: pagewidth="500" pageheight="500"

Your maxscale should be set to at least the largest scaling factor your jpegs use. If you set it higher, it will rely on Megazine's zooming ability to increase the size of your highest resolution image. Most people will want it to match the largest scaling factor. For example: maxscale="2.0"

Your minscale should match your smallest scaling factor. If you set it higher, it will rely on megazine's zooming ability to decrease the size of your lowest resolution image. Most people will want it to match your smallest scaling factor. For example: minscale="0.5"

Your zoominit should match the scaling factor of the default version you want users to see. For example, zoominit="1.0". zoominit is an optional setting, you can leave it out to enable Liquid Scaling.

Your zoomstep is best set to the distance between your scaling factors. If you make it smaller, each scaling that doesn't have a jpeg that matches it will rely on Megazine's zooming ability.

In version 2.0.6, if you want your jpeg's to remain in their native resolution all your scaling factors must match zoominit plus or minus some number of zoomsteps (zoominit + X * zoomstep, where X is any integer). If you include an image that is a scaling factor of 1.3 and your zoominit is 1.0 and your zoomstep is 0.5, your image will never be displayed at it's native resolution.

However, in future versions (including the code currently in trunk), you'll be able to set zoomsnap to values that will be displayed whenever you zoom past them. For example, if you wrote "zoomsnap="0.7, 1.7" with zoominit="0.5" and zoomstep="0.5", as you zoomed out after starting the book, you'd display zooms 0.5 followed by 0.7, then 1.0, then 1.5, and finally 1.7.

Changes to page elements

You must use the <src> tags to include images in your pages. <src> tags must be in <img> tags. Note that <src> tags are not an attribute of <img>. Also, don't forget to close your <src> tags with </src>.

Your <img> tag should specify the width and height attributes that match your book's pagewidth and pageheight. This will prevent Megazine's zoom from scaling them by the zoom factor when you zoom in. (You might think of this as turning off zooming on the img in question, so we can override the zoom with our source images)

Each jpeg needs it's own <src> tag, with the scale attribute set to the image's scaling factor. Here's an example:

	<img width="500" height="500">
		<src scale=".5">../Path/To/250x250/My.jpg</src>
		<src scale="1.0">../Path/To/500x500/My.jpg</src>
		<src scale="1.5">../Path/To/750x750/My.jpg</src>
		<src scale="2.0">../Path/To/1000x1000/My.jpg</src>

Two pages which face each other should have matching width and height attributes, or undesirable side effects may occur. (Maybe src elements too?)

Links And Demos,_tricks_and_hints/post/How_to_achieve_best_qualities_with_JPG_files/,543.0.html