size of images depending on the size of the internet browser size

[gestalterin]

hi there,

is it possible in the expositio options to let the images rezise automaticlly?
i first choosed the imagesizes depending on the generell size of a laptop screen,
but if you are opening the site on a big screen, than the images are getting lost
in a big white space.

thanks a lot.

[abbas.s786]

Hi,

For this you will have to write custom JavaScript to resize the image accordingly.

[strezair]

anyone get this working??

[salsakungen]

This is a big issue for me too. Does anyone use such a JavaScript?

[AlexandrKa]

My english vary bad, but maby i help u.

Header.php

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.ae.image.resize.js"></script>
<script>
$(function() {
$( ".resizeme" ).aeImageResize({ height: window.innerHeight });
});


function doSomething() {
$( ".resizeme" ).aeImageResize({ height: window.innerHeight });
};

var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doSomething, 100);
});

</script>

tmpl_signle.php on line 46

$strResultGallery .= '<td>'.'<img class="resizeme" alt="'.

jquery.ae.image.resize.js

(function( $ ) {

$.fn.aeImageResize = function( params ) {

var aspectRatio = 0
// Nasty I know but it's done only once, so not too bad I guess
// Alternate suggestions welcome :)
, isIE6 = $.browser.msie && (6 == ~~ $.browser.version)
;

// We cannot do much unless we have one of these
if ( !params.height && !params.width ) {
return this;
}

// Calculate aspect ratio now, if possible
if ( params.height && params.width ) {
aspectRatio = params.width / params.height;
}

// Attach handler to load
// Handler is executed just once per element
// Load event required for Webkit browsers
return this.one( "load", function() {

// Remove all attributes and CSS rules
this.removeAttribute( "height" );

this.style.height = "";

var imgHeight = this.height
, imgWidth = this.width
, imgAspectRatio = imgWidth / imgHeight
, bxHeight = params.height
, bxWidth = params.width
, bxAspectRatio = aspectRatio;

// Work the magic!
// If one parameter is missing, we just force calculate it
if ( !bxAspectRatio ) {
if ( bxHeight ) {
bxAspectRatio = imgAspectRatio + 1;
} else {
bxAspectRatio = imgAspectRatio - 1;
}
}

// Only resize the images that need resizing


if ( imgAspectRatio > bxAspectRatio ) {
bxHeight = ~~ ( imgHeight / imgWidth * bxWidth );
} else {
bxWidth = ~~ ( imgWidth / imgHeight * bxHeight );
}

this.height = bxHeight-18;

})
.each(function() {

// Trigger load event (for Gecko and MSIE)
if ( this.complete || isIE6 ) {
$( this ).trigger( "load" );
}
});
};
})( jQuery );

[salsakungen]

Great! Thank you! Where do I find the file "jquery.ae.image.resize.js"? Can't find it in the file structure on my FTP.

Any ideas?

[guillaume]

@salsakungen you have to create it and upload it to your ftp, just copy the content of jquery.ae.image.resize.js in a file and name it jquery.ae.image.resize.js :) .

[guillaume]

@AlexandrKa thanks you!

[salsakungen]

@guillaume of course! Perfect. Thank you!

[strezair]

where should the text be added to the header.php