When I started redesigning my site, I decided that I wanted the picture at the top to randomly rotate through a set of images in a specific folder. Once I got the dimensions right with a placer image, I popped in the script and got it going.
The problem is that when I put the script in to do the rotating, there is a gap between the bottom of the image and the top of the rest of the layout. When I take the script away and just have one static image, there is no gap, which is how it should be.
Does anyone know what caused this gap and how to get rid of it so that I can get my images to rotate through like I want while maintaining my tight layout?
Last edited by eday2010 on Sat Oct 28, 2006 10:13 pm; edited 1 time in total
we would be able to help you better if you could provide a screenshot (with and without the gaps) and the sourcecode too of the site.
Okie Dokie, here is how it's supposed to look:
http://www.wnstudios.ca/layout/nogap.jpg
The source code is simple:
| Code: |
<tr>
<td valign="top" colspan="3"><img src="content/includes/layout/random/33.jpg" alt=" " width="627" height="164" /></td>
</tr> |
And here is how it looks when I use the Javascript/PHP random image rotator:
http://www.wnstudios.ca/layout/gap.jpg
Source code:
| Code: |
<?php
$path_to_images = "content/includes/layout/random/";
$num_to_rotate = "ALL";
// returns string to echo into JavaScript images array
function getJSRandomized($path, $list, $num) {
$str = '"';
mt_srand( (double)microtime() * 1000000 );
shuffle($list);
if ( $num == "ALL" ) $num = count($list);
for ($i=0; $i<$num; $i++) {
$str .= $path . $list[$i] . '", "';
}
// remove last comma and space
$str = substr($str, 0, -3);
return $str;
}
function getImagesList($path) {
$ctr = 0;
if ( $img_dir = @opendir($path) ) {
while ( false !== ($img_file = readdir($img_dir)) ) {
// add checks for other image file types here, if you like
if ( preg_match("/(\.gif|\.jpg)$/", $img_file) ) {
$images[$ctr] = $img_file;
$ctr++;
}
}
closedir($img_dir);
return $images;
} else {
return false;
}
}
?>
<?php if ( $image_list = getImagesList($path_to_images) ) : ?>
<script type="text/javascript">
/*************************************************************************
This code is from Dynamic Web Coding at dyn-web.com
Copyright 2001-5 by Sharon Paine
See Terms of Use at dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
See full source code at dyn-web.com/scripts/rotate-rand/
*************************************************************************/
var imgList = [
<?php echo getJSRandomized($path_to_images, $image_list, $num_to_rotate); ?>
];
var rotator1 = new dw_RandRotator(10000); // rotation speed
// images array, width and height of images, transition filter (boolean)
rotator1.setUpImage(imgList, 627, 162, true);
</script>
<?php else : ?>
<!-- image to display if directory listing fails -->
<img src="images/smile.gif" width="625" height="122" alt="">
<script type="text/javascript">dw_Rotator.start = function() {};</script>
<?php endif; ?> |
And here is the source code for the whole page without the random rotator script:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WN Studios {Version 9.0}</title>
<link type="text/css" rel="stylesheet" href="designtb.css"></link>
<!--<script src="dw_rotator.js" type="text/javascript"></script>
<script src="dw_random.js" type="text/javascript"></script>-->
</head>
<body>
<!--<body onload="dw_Rotator.start()">-->
<table border="0" width="895" cellpadding="0" cellspacing="0">
<tr>
<td class="leftbg" style="width:135px; height:987px; vertical-align:top;" rowspan="5"></td>
<td class="top" style="width:627px; height:137px; vertical-align:top;" colspan="3"></td>
<td class="rightbg" style="width:135px; height:987px; vertical-align:top;" rowspan="5"></td>
</tr>
<tr>
<td style="height:162px;" colspan="3"><img src="content/includes/layout/random/15.jpg" /></td>
</tr> <tr>
<td class="wnleft" style="width:90px; height:606px; vertical-align:top;" rowspan="2"></td>
<td style="vertical-align:top; width:537px; height:85px;" align="left" colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="537" height="85" title="Menu">
<param name="movie" value="content/includes/layout/menu.swf" />
<param name="quality" value="high" />
<embed src="layout/menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="537" height="85"></embed>
</object></td>
</tr>
<tr>
<td width="456" height="519" valign="top" bgcolor="#FFFFFF"><iframe marginheight="0" marginwidth="0" height="510" width="445" name="content" align="center" frameborder="0"></iframe></td>
<td class="wnright" width="81" height="519" align="right" valign="top"></td>
</tr>
<tr>
<td style="height:84px;" class="bgbottom1" colspan="2"></td>
<td style="height:85px;" width="81"><img src="content/includes/layout/bgbottom2-3.jpg" alt="Legal" width="81" height="82" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="0,0,88,18" href="content/legal.php" target="content" /></map></td>
</tr>
</table>
</body>
</html> |
Any ideas? (not wanting to sort through reams of code) could you repost that, sans-php?
since its obviously just an html problem
Just ignore the second chunk of code. The first chunk is just the table where the image is, and the third chunk is the whole page with no PHP. From my experience, PHP leaves gaps like that with divs, which is one reason I did the layout with tables for now. It might require some CSS styling work to correct the gap, but i havent been able to get it right yet.
