flexible loadarea

[papaver]

1) Script Title: Thumbnailviewer2

2) Script URL (on DD):

3) Describe problem: flexible loadarea-div

I need a flexible loadarea-div (max-width: 800px, max-height: 600px)

The loadarea is currently set to 600px. Images that are wider than 600 pixels overlay the next div (Info thumbnailtext). How can I adjust the Thumbnail Viewer, which displays the image (only) in the loadarea-div (possibly be cut)


<div class="image_50_50">
<?php
$images = rwmb_meta( 'metabox_screenshot2', 'type=plupload_image' );
foreach ( $images as $image )
{
echo "<a class='fancybox' rel='enlargeimage' rev='targetdiv:loadarea,trigger:mouseover' href='{$image['full_url']}' }'><img src='{$image['url']}' width='50' height='50' alt='{$image['alt']}' /></a>";
}
?>
</div><!--*image_50_50-->

<div class="image_cat">
<div id="loadarea" style="max-width: 600px;"></div>
<br class="clearfix" />
</div><!--*image_cat-->

Thanks so much!
petra

[papaver]

Please I need your help.
Info: It is a cms-page and the customer will upload full-size images.
Therefore, I need a solution if the uploaded images are larger than 700px x 600px.
(the full-size image are overlay everything – that is not good. The image should only be displayed inside the thumbnailviewer2-div (loadarea))
I have already tried a lot - nothing works.
What's the best way to solve my problem - perhaps to change the thumbnailviewer2.js ?

Thanks so much
petra

[Beverleyh]

Im not 100% sure but I think you should be able to target the img inside the div with CSS and use this fix: http://stackoverflow.com/questions/3751565/css-100-width-or-height-while-keeping-aspect-ratio

[papaver]

Many thanks for your reply! They put me on the right way.
It works with

#loadarea img { max-width: 700px; max-height: 600px; }