Log in

View Full Version : Modify image gallery style image size proportional instead of px



big-dog1965
09-19-2007, 06:29 PM
Can this be modified to size the image proportional insted of set width and height.

<style type="text/css">

.slideshow{ /*CSS for DIV containing each image*/
float: left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 16px;
}

.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 173px;
height: 127px;
}

#navlinks{ /*CSS for DIV containing the navigational links*/
width: 200px;
}

#navlinks a{ /*CSS for each navigational link*/
margin-right: 8px;
margin-bottom: 3px;
font-size: 100%;
}

#navlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>
The PHP file that goes with the above is

<?
Header("content-type: application/x-javascript");

function returnimages($dirname=".") {
$pattern="\.(jpg|jpeg|png|gif|bmp)$";
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
$filedate=date ("M d, Y", filemtime($file));
echo 'galleryarray[' . $curimage .']=["' . $file . '", "'.$filedate.'"];' . "\n";
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo "var galleryarray=new Array();" . "\n";
returnimages();
?>

djr33
09-19-2007, 06:48 PM
Yes. That's controlled here:

.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 173px;
height: 127px;
}



Hmm... note that .jpe is also a valid extension for jpegs.

big-dog1965
09-19-2007, 07:27 PM
Yes. That's controlled here:

.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 173px;
height: 127px;
}



Hmm... note that .jpe is also a valid extension for jpegs.

What I need is that to be proportional because the images are different sizes and 1 setting doesn’t work for all. So if I could set either the width or height the opposite would be proportional to that. I tryed % didnt work