Currently, I am attempting to make adjustments to the Simple jQuery Slideshow created by Jonathan Raasch.
This slideshow seamlessly transitions between images with a fading effect.
If we take an example of a 350px square image within a 350px height DIV container like this: Link
In the original version, it only supports fixed-size images. My goal is to enable it to work with images that are sized based on a certain percentage of the browser window width.
The existing CSS styling for handling fixed-size images looks like this...
#slideshow {
...
height:350px;
}
#slideshow img {
...
}
To accommodate percentage-based image sizes, I made the following modifications...
#slideshow {
...
}
#slideshow img {
...
width: 50%;
}
As a result of not explicitly defining the height of the "slideshow" DIV anymore, it collapses to a height of 0. This causes the image to overlap with my text placement. The comparison can be seen here...(Link)
Below is the complete HTML file inclusive of CSS and JavaScript code...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xml:lang="en">
<head>
<title></title>
<style type="text/css">
#slideshow {
position:relative;
height:350px;
}
#slideshow img {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow img.active {
z-index:10;
}
#slideshow img.last-active {
z-index:9;
}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
</head>
<body>
<div id="slideshow">
<img src="img/img1.jpg" alt="" class="active" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
</div>
<p>Lorem ipsum ...</p>
</body>
</html>
Why is the height of my DIV smaller than its contents? How do I ensure that the DIV's height matches the height of its contents?