Navigating through multimedia content - Build Windows 8 Apps with HTML5 and JavaScript - page 163

Manipulating the image
The slider features a handler for the onchange event. Such a handler is required to give you a chance
to do some work whenever the selection on the slider changes. In particular, you might want to
update the text near the Zoom level label, and zoom the image accordingly. The code required is
added to the gallery.js file:
GalleryApp.zoomImage = function () {
var container = document.getElementById("zoomable-image-container");
var slider = document.getElementById("zoom-slider");
var img = document.getElementById("zoomable-image");
var label = document.getElementById("zoom-level");
// Do some calculation
var w = container.clientWidth;
var h = container.clientHeight;
var zoom = slider.value;
var offset = ((w * zoom) - w) / 2;
// Refresh the user interface
img.style.zoom = zoom;
container.scrollLeft = offset;
container.scrollTop = offset;
label.innerHTML = zoom;
}
The zoomable image lives in a DIV container, as styled below. The style should be added to default.css .
#zoomable-image-container {
width: 250px;
height: 250px;
border: solid 1px #fff;
position: relative;
overflow: scroll;
}
The value of the zoom level is saved to the zoom variable and used to calculate the offset for the
container's content. The offset is half the difference between the current width (and height) of the
container and the effective size of the image with updated level of zoom. In general, you need to
have both a horizontal and vertical offset. As in this example, images are assumed to be square so
you only need to calculate one offset. Figure 7-10 explains the logic behind the calculation.