This is a migrated thread and some comments may be shown as answers.

Zoomable view scale

4 Answers 28 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 07 Feb 2014, 05:00 PM
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?

4 Answers, 1 is accepted

Sort by
0
Accepted
Zdravko
Telerik team
answered on 12 Feb 2014, 10:08 AM
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
Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
0
Kevin
Top achievements
Rank 1
answered on 13 Feb 2014, 04:20 AM
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
0
Kevin
Top achievements
Rank 1
answered on 13 Feb 2014, 04:28 AM
That worked perfectly!

In the view's show event i simply do a .css("width", "100%") on the zoomable image element. Problem solved!
0
Kevin
Top achievements
Rank 1
answered on 20 Feb 2014, 12:07 AM
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)");
Tags
General Discussions
Asked by
Kevin
Top achievements
Rank 1
Answers by
Zdravko
Telerik team
Kevin
Top achievements
Rank 1
Share this question
or