Zoomable view scale

[Kevin]

I just started using the zoomable view to display an image. It works great but I have one major complaint. It always starts with the full size image (most of it is off the screen) and you have to "zoom out" to see the whole image. This is counterintuitive, how can i make it start "zoomed out" so the user only has to zoom in if they wish?

[Zdravko]

Hi Kevin,

Thanks for contacting us.
I believe you can achieve your goal with some CSS in order to set specific size for your content. Here is a link with some more information.

Regards,
Zdravko
Telerik

[Kevin]

Setting the height / width won't interfere with the functionality of the pinch to zoom functionality? I will play around with it, I just assumed it would not be that simple.

Thanks

[Kevin]

That worked perfectly!

In the view's show event i simply do a .css("width", "100%") on the zoomable image element. Problem solved!

[Kevin]

After toying with this in more detail it would appear it's not a complete solution. It worked when you first show the view. But in the case of a re-usable view. (Image viewer in my case) if you are zoomed in then leave the view then return to view another image it stays on your last zoom settings despite the width 100%. i tracked it down to the parent container a div with the class of km-scroll-container. I found if I target that container and set the webkit-transform "scale" to 1 it does exactly what i want.

$("#viewer div.km-scroll-container").css("-webkit-transform", "translate3d(0px, 0px, 0px) scale(1)");