Tengo una galería de imagenes y mi problemaes el siguiente:
Cuando tengo imágenes largas, estas se topan con la parte inferior del footer donde esta el "Copyright © 2013"
Como puedo hacer para que automáticamente el table se re dimensione en la parte inferior para que no tope con el mismo y permita ver bien las imágenes.
Código HTML:
<script type='text/javascript'>
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
</script>
<style type='text/css'>
#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-size: cover; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 20px; left: 200px; display: none; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
</style> Código PHP:
<table style="background:#ffffff; width: 1000px; height:0px; position: relative; margin-left: auto; margin-right: auto;
-moz-border-radius: 5px; -webkit-border-radius: 5px; behavior:url(border-radius.htc);">
<tr><td>
<ul id="gallery">
<?php
$query=sprintf("SELECT * FROM imagen WHERE anuncio = '%s' ", mysql_real_escape_string($codigo));
$result = mysql_query($query, $con);
while($row1 = mysql_fetch_array($result))
{
$foto = $row1['foto'];
echo "<li><a href=\"fotos/$foto\" rel=\"lightbox[roadtrip]\"><img src=\"fotos/$foto\" alt=\"$foto\"></a></li>";
}
?>
</ul>
</td></tr>
</table>
<table style="background:#D8D8D8; width: 1000px; height:0px; position: relative; margin-left: auto; margin-right: auto;
-moz-border-radius: 5px; -webkit-border-radius: 5px; behavior:url(border-radius.htc);">
<tr><td>
<p class="footer" align="center">Copyright © 2013</p>
</td></tr>
</table>