[MOD] Scale Images proportional to fit browser in width and heigth

[x23piracy]

Hi,

based on the existing MOD: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen
i added heigth support to the scaling because it was important for my site to keep scrollbars away.

This only works with javascript enabled browser!

This is my code in template/media/jpg.html:

Code: [Select]

<script language="javascript">
var savewidth = 0;

function scaleImg(what){
what = document.getElementById(what);
 if (navigator.appName=="Netscape")
  winW = window.innerwidth;
 if (navigator.appName.indexOf("Microsoft")!=-1)
  winW = document.body.offsetwidth;
 if (what.width>(720) || savewidth>(720)) {
  if (what.width==(720))
   what.width=savewidth;

else
 {
 savewidth = what.width;
 what.style.cursor = "pointer";
 what.width=(720);
 }

}
}
</script>

<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
        <table border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
            <tr>
                <td align="center" valign="middle">

<script language="JavaScript">
var graphicHeight = window.innerHeight*0.7;
document.write("<img id='picture' alt='Highslide JS'  {limit_var}='{new_limit}' usemap='#navi' onClick='scaleImg('picture')' onLoad='scaleImg('picture')' src='{media_src}' height="+graphicHeight+">");
</script>

</td>
            </tr>
        </table>
    </td>
  </tr>
</table>



Adjusting the Image height:

Edit the following line: var graphicHeight = window.innerHeight*0.7;
(where 0.7 is the percentage from inner height of the browser window.)


Note:

This script can be much more simple in future i'll change it and remove the based on MOD code.
There must be also a solution for none enabled javascript browser, maybe just displaying the pic in original size.
The best solution should be some php stuff.

If you have suggestions post them here.


How it looks like:

1280x800

1024x768

800x600

Greetz X23

[khansahib]

Thanks works good for me..
can i know, what u've done for full preview???

[x23piracy]

Thanks works good for me..
can i know, what u've done for full preview???

Hi,

i use Highslide : http://www.4homepages.de/forum/index.php?topic=26815.0
and expando.js: http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm

Highslide is used if i click on the image, then it presented in fullsize with a dimmed background (dark).
Expando.js is for showing fullsize when the mouse hovers over the scaled picture.

If someone has flash disabled or not installed expando is doing its job.


Greetz X23

[khansahib]

thanks once again..
highslide will be good for my site..
Thanks

[bergblume]

here is also another solution:

use in your CSS-file

Code: [Select]

div.imageresize img {
max-width:100%; max-height:100%;
}
and in your jpg.html use:

Code: [Select]

<!-- Template file for JPG Files -->
<div class="imageresize"><img src="{media_src}" border="1" alt="{image_name}" /></div><br />