So I have been trying to get a good solution regarding resizing of an image based on the size of the browser. Andrey (Mindlessboss) has been great trying to help and I've found several different solutions but seem to have a common issue. Based on the code below, when the browser loads it is .7 of the screenheight and screenwidth. When the browser gets smaller it still maintains the .7. Simple right!
Problem I'm having is the .7 ratio is fine if you are on a typical laptop with a screen size of 1366 x 768, but when you're on a 27inch imac 2650 x 1440 the image is too big and even when you are on an iphone it shrinks too much.
So the question is how would or could I adapt the code to prevent the image from expanding beyond 1366 and prevent it from shrinking too much on an iphone?
I've tried different bits of code, but using if statements with stagewidth GT 800 etc.. creates other problems.
Thanks in advance for your help!
Robert
<info_box_settings infobox2screen_ratio="0.7" /> <!-- 0.7 = seventy percent of screenheight or screenwidth -->
<events name="infobox_events" keep="true"
onresize="infobox_image_adapt();"
onnewpano="close_info_box();"/>
<style name="pichotspot"
distorted="false" capture="false" zorder="1"
onclick="show_info_box();" url="skin/info2.png"
onloaded="if(ismobile,set(scale,1));" zoom="false" scale="0.4"
onhover="showtext(Click for more information,thumbtext3)"/>
<plugin name="infobox_image"
url="" align="center" keep="true"
alpha="1" scale="0" handcursor="false"
scalechildren="true" visible="true"
onloaded="set(infobox_image_loaded,true);
set(infobox_image_w,get(plugin[infobox_image].imagewidth));
set(infobox_image_h,get(plugin[infobox_image].imageheight));
infobox_image_adapt();" x="0" y="0" zorder="5" onhover="" onclick="" />
<plugin name="info_box_x"
url="images/close_btn.png" parent="infobox_image"
align="topright" keep="true" alpha="1" scale="1.5"
handcursor="true" visible="true" x="15" y="10" zorder="6" onhover=""
onclick="action(close_info_box);"/>
<action name="close_info_box">
tween(plugin[infobox_image].scale,0);
</action>
<action name="show_info_box">
set(plugin[infobox_image].scale,0);
txtadd(infobox_image_file_name,'images/',get(name),'.png');
set(plugin[infobox_image].url,get(infobox_image_file_name));
delayedcall(0.5,tween(plugin[infobox_image].scale,0.7););
</action>
<action name="infobox_image_adapt">
div(infobox_image_expected_aspect,get(infobox_image_w),get(infobox_image_h));
div(screen_expected_aspect,stagewidth,stageheight);
fix_infobox_aspectresize(infobox_image_expected_aspect,screen_expected_aspect);
</action>
<action name="fix_infobox_aspectresize">
if(%2 LE %1,mul(new_infobox_image_width,stagewidth,info_box_settings.infobox2screen_ratio);
set(plugin[infobox_image].width,get(new_infobox_image_width));
set(plugin[infobox_image].height,prop);
,
mul(new_infobox_image_height,stageheight,info_box_settings.infobox2screen_ratio);
set(plugin[infobox_image].height,get(new_infobox_image_height));
set(plugin[infobox_image].width,prop););
</action>
Display More