Sie sind nicht angemeldet.

"Fit within" / auto-resize?

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

floz

Schüler

  • »floz« ist der Autor dieses Themas

Beiträge: 109

Wohnort: Uppsala, Sweden

  • Nachricht senden

1

Dienstag, 18. Dezember 2012, 09:50

"Fit within" / auto-resize?

Is there any easy way to fit an image/plugin within the viewer window?

As in, say, I want the image to resize proportionally, maintaining a certain prescribed minim amount of margin from each of the four viewer boundaries. Or, alternatively, say I want the image to be either 80% wide and/or 80% high, always resizing proportionally, and maintaining these conditions even if the window is resized?

I don't think I do a good job of explaining what I mean, but I hope you get the idea. So Basically a "fit within" / "auto resizing" within prescribed area, but maintaining aspect ratio, and supporting dynamic resizing of the viewer window.

Cheers,

Florian
Pano website | Panoramic photography tutorials | 360cities profile

floz

Schüler

  • »floz« ist der Autor dieses Themas

Beiträge: 109

Wohnort: Uppsala, Sweden

  • Nachricht senden

2

Dienstag, 18. Dezember 2012, 10:47

Ok, found a solution with onresize event and a bunch of condition statements. However, is there an easier way that I simply missed? Cheers!
Pano website | Panoramic photography tutorials | 360cities profile

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

3

Dienstag, 18. Dezember 2012, 15:35

No that's about right. Here's what I use.

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

if(plugin[photo].visible == true,
				push(plugin[%1].width);
				push(plugin[%1].height);
				plugin[%1].resetsize(); 
				pop(plugin[%1].height);
				pop(plugin[%1].width);
				set(imgwidth, get(plugin[%1].imagewidth));
				set(imgheight, get(plugin[%1].imageheight));
				set(maxwidth, get(stagewidth));
				if (ishtml5,sub(maxwidth, maxwidth, 50);
				,
				sub(maxwidth, maxwidth, 25);
				);
				set(maxheight, get(stageheight));
				if (ishtml5,sub(maxheight, maxheight, 50);
				,
				sub(maxheight, maxheight, 35);
				);
				if(imgwidth GT maxwidth,
					mul(imgheight, imgheight, maxwidth);
					div(imgheight, imgheight, imgwidth);
					copy(imgwidth, maxwidth);
				);
				if(imgheight GT maxheight,
					mul(imgwidth, imgwidth, maxheight);
					div(imgwidth, imgwidth, imgheight);
					copy(imgheight, maxheight);
				);
				tween(plugin[%1].width,  get(imgwidth),,easeOutQuad);
				tween(plugin[%1].height, get(imgheight),,easeOutQuad);
			);
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

4

Dienstag, 18. Dezember 2012, 19:43

Hi,

here some example code:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<layer name="bg" url="test.jpg" align="center" ... onloaded="bg_automatic_fit_inside()" />

<events name="bg_scale" onresize="bg_automatic_fit_inside();" />

<action name="bg_automatic_fit_inside">
    if(layer[bg].loaded,
        div(screenaspect, stagewidth, stageheight);
        div(imageaspect, layer[bg].imagewidth, layer[bg].imageheight);
        if(imageaspect GT screenaspect,
            set(layer[bg].width,80%); set(layer[bg].height,prop);
          ,
            set(layer[bg].width,prop); set(layer[bg].height,80%);
         );
      );
</action>


Best regards,
Klaus

floz

Schüler

  • »floz« ist der Autor dieses Themas

Beiträge: 109

Wohnort: Uppsala, Sweden

  • Nachricht senden

5

Dienstag, 18. Dezember 2012, 21:49

Thanks Sacha, and thanks Klaus for making me feel (momentarily) as clever as you -- this is quite exactly how I had implemented it last night:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<plugin name="img_container_img" url="%SWFPATH%/images/S5.jpg" parent="img_container" width="80%" height="prop" align="center" oy="-4%" keep="true" onloaded="div(plugin[img_container_img].ir,get(imagewidth),get(imageheight)); update_img();" zorder="1001" />
<events onresize="update_img()" />
<action name="update_img">
	ifnot(get(plugin[img_container_img].ir),
		trace("NOT");
	,
		div(sr,stagewidth,stageheight);
		if(sr LT plugin[img_container_img].ir,
			set(plugin[img_container_img].width,80%);
			set(plugin[img_container_img].height,prop);
		,
			set(plugin[img_container_img].height,80%);
			set(plugin[img_container_img].width,prop);			
		);
	);
</action>


*smile* *smile*
Pano website | Panoramic photography tutorials | 360cities profile

izoneguy

Anfänger

Beiträge: 36

  • Nachricht senden

6

Samstag, 5. Januar 2013, 01:56

image resize

Hello

I am trying to do the same thing….
I added another thumbnail that loads a blank pano….
I used the code to overlay the image and it works fine on desktop.

I added keep="false" because I want the image to go away when I load another pano….


Problem is - the image comes in a little big for iPhone/ipad and then it stays when
I click for a new pano???
*wacko*

Ähnliche Themen