Hi,
I need some serious help with a horizontal picture gallery I'm creating. The only problem is that once the gallery loads up 17 pictures, they no longer keep their css alignment property even though I've used jquery to reset the div that contains them to their total width of all the images. So there's white space left over. Under 17 pictures and the gallery works great!
I've got the code below. I've added it all! I'm new with this so any help would be fantastic! Hopefully, it's legible.
<html>
<head><title>Horizontal Pages 5</title>
<style type="text/css">
#box {
width:3000px;
}
#images img{
height:300px;
float:left;
display:inline;
}
/***** FLOAT #BOX DIVS WHICH CONTAIN THE IMAGES ******/
<?php
for ($m=1; $m<=17; $m++)
{
echo "#" . "images" . $m . " img";
echo "{height:600px; float:left; display:inline; whitespace:nowrap;}";
}
?>
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="imagesLoaded.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* TOTAL NUMBER OF IMAGES/FILES LOADED */
<?php
global $k;
$k=0;
if ($handle = opendir('IMG')) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != ".." && $file != "Thumbs.db") {
$k++;
}
}
closedir($handle);
}
$k1 = $k + 1;
/* PUT EACH IMAGE WIDTH INTO var newWidth */
for ($width=1; $width<=$k1; $width++)
{
echo "var newWidth" . $width . " = $('#images" . $width . " img').width();" . "\n";
}
?>
/* GET TOTAL WIDTH - add all newWidth variables */
var totalWidth =
<?php
for($z = 1; $z <= $k1; $z++) {
echo "newWidth" . $z;
echo " + ";
}
echo " 300";
?>;
alert(totalWidth);
$("#box").css('width', totalWidth);
});
</script>
</head>
<body>
<div id="write"></div>
<div id="box">
<?php
global $i;
$i=0;
if ($handle = opendir('IMG')) {
while (false !== ($file = readdir($handle))) {
if($file != "." && $file != ".." && $file != "Thumbs.db") {
$i++;
echo "<div id='images" . $i . "'" . " class='my_width'" . ">" . "<img src='IMG/" ."$file" . "'/>" . "</div>" . "\n";
}
}
closedir($handle);
}
?>
</div>
</body>
</html>
