4images Forum & Community

4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started by: x23piracy on November 22, 2010, 05:25:21 PM

Title: [MOD] Scale Images proportional to fit browser in width and heigth
Post by: x23piracy on November 22, 2010, 05:25:21 PM

Hi,

based on the existing MOD: [MOD] Scale Images to fit in browser/ Bilder dem Browser anpassen (http://www.4homepages.de/forum/index.php?topic=15680.0)
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 (http://www.xup.in/tn/2010_11/67565582.jpeg) (http://www.xup.in/dl,67565582/temp.jpg/)

1024x768 (http://www.xup.in/tn/2010_11/29780482.jpeg) (http://www.xup.in/dl,29780482/temp2.jpg/)

800x600 (http://www.xup.in/tn/2010_11/11054487.jpeg) (http://www.xup.in/dl,11054487/temp3.jpg/)

Greetz X23

Title: Re: [MOD] Scale Images proportional to fit browser in width and heigth
Post by: khansahib on December 03, 2010, 05:37:37 PM

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

Title: Re: [MOD] Scale Images proportional to fit browser in width and heigth
Post by: x23piracy on December 03, 2010, 06:28:18 PM

Quote from: khansahib on December 03, 2010, 05:37:37 PM

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 (http://www.4homepages.de/forum/index.php?topic=26815.0)
and expando.js: http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm  (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

Title: Re: [MOD] Scale Images proportional to fit browser in width and heigth
Post by: khansahib on December 03, 2010, 07:05:24 PM

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

Title: Re: [MOD] Scale Images proportional to fit browser in width and heigth
Post by: bergblume on January 13, 2014, 07:07:03 PM

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 />