i’m using jquery to crossfade images… after much searching i found a script that works for me… capable of displaying images at 100% width of container (height is not set therefore remains variable to width) and remain partially overlapped by nav bar…
the only problem i face… since height is not set… the div’s below the rotator are hidden behind the images… i cannot realize how to get the text to appear below the images… here’s a look at the code… any thought’s or ideas would be greatly appreciated:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function theRotator() {
$('div.rotator ul li').css({opacity: 0.0});
$('div.rotator ul li:first').css({opacity: 1.0});
setInterval('rotate()',6000);
}
function rotate() {
var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));
if ( current.length == 0 ) current = $('div.rotator ul li:first');
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};
$(document).ready(function() {
theRotator();
$('div.rotator').fadeIn(1000);
$('div.rotator ul li').fadeIn(1000);
});
</script>
<style type="text/css">
BODY {color:#000;overflow:hidden;}
#head {position:absolute;top:20px;left:150px;padding:0;margin:0px;overflow:visible !important;z-index:700;background:blue;color:#FFF;}
#nav {overflow:visible;position:absolute;top:130px;left:25px;bottom:50px;z-index:800;white-space:nowrap;line-height:36px;font-weight:bold;z-index:90;}
#nav ul {list-style:none;padding:0;margin:0;}
#nav ul li a {list-style:none !important;padding:0px;margin:0;}
#nav a {color:#FFF;text-decoration:none;}
#nav a:hover {text-decoration:underline;}
#navcolbg {width:190px;height:100%;position:absolute;left:0px;top:0px;z-index:1; background:blue;}
.navcolbg {width:190px;height:100%;min-height:600px;}
#columnRight {overflow:auto;position:absolute;top:125px;left:150px;right:0px;bottom:25px;}
#headline {margin:0 24px 0 50px;}
#slide {width:100%;padding:12px 0;}
.slidePic {width:100%;}
#bodyCopy {margin:0 24px 0 50px;}
.clr {clear:both;}
#footer {overflow:hidden;position:absolute;bottom:0;left:0;height:25px;color:#000;z-index:1;}
/* SLIDESHOW */
div.rotator {position:relative;width:100%;display:none;}
div.rotator ul {width:100%;padding:0;margin:0;}
div.rotator ul li {float:left;position:absolute;width:100%;list-style:none;padding:0;margin:0;}
div.rotator ul li img {width:100%;padding:0;margin:0;}
div.rotator ul li.show {z-index:1;padding:0;margin:0;}
</style>
</head>
<body>
<div id="columnRight">
<div id="headline"><H2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."<br />
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</H2></div>
<div id="slide">
<div class="rotator">
<ul>
<li class="show"><img src="pics-00.jpg" class="slidePic" alt="pic1" /></li>
<li><img src="pics-01.jpg" class="slidePic" alt="pic2" /></li>
<li><img src="pics-02.jpg" class="slidePic" alt="pic3" /></li>
<li><img src="pics-03.jpg" class="slidePic" alt="pic4" /></li>
</ul></div></div>
<div class="clr"></div>
<div id="bodyCopy"><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales justo posuere eros malesuada rutrum. Phasellus tincidunt blandit lacus vitae interdum. Donec mollis mattis ipsum, et viverra erat dapibus eget. Suspendisse et leo tortor, ut tincidunt ipsum. Donec sed lacus arcu. Aliquam sed elit est. Curabitur volutpat turpis vel leo blandit ac cursus sem porta.</h3>
<p> </p>
<p>Etiam nibh felis, hendrerit a venenatis quis, elementum at nunc. Phasellus ac tortor tristique diam rhoncus mollis non non diam. Proin luctus adipiscing rutrum. Donec pharetra, nisl ac accumsan sagittis, odio odio adipiscing sem, id sodales nulla mauris sit amet tellus. In hac habitasse platea dictumst.</p>
</div>
</div>
<div id="navcolbg"></div>
<div id="nav"><ul><li><a href="">MENU ONE</a></li><li><a href="">MENU TWO</a></li><li><a href="">MENU THREE</a></li><li><a href="">MENU FOUR</a></li><li><a href="">MENU FIVE</a></li></ul></div>
<div id="footer"></div>
<div id="head"><h1>Sed posuere posuere diam eu pellentesque.</h1></div>
</body>