Hi all
I'm using the jquery cycle plugin to create a simple slideshow with thumbnails.
http://www.ttmt.org.uk/forum/slideshow/
The thumbnails are in a sticky footer that stays at the bottom of the window.
I want the slideshow image to fill the rest of the window.
On the window resize I'm calling this function to resize the image
function resizeImg() {
$('#slideshow img').css({'height':$('#wrap').height()-footerHeight,'width':'auto'});
}
My problem is when the image first loads it doesn't fill the space and is it's original size.
How can I call the resizeImg function when the image loads.
I know this isn't a CSS forum but is it possible to resize the image with CSS instead of jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!--jQuery-->
<script type="text/javascript" src="js/jquery1.7.2.js"></script>
<script type="text/javascript" src="js/cycle.js"></script>
<!--CSS-->
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
/**/
html, body {
height:100%;
text-align:center;
}
#wrap {
margin:auto;
min-height:100%;
margin-top:-100px;
text-align:left;
}
* html #wrap {
height:100%
}
#header {
background:red;
border-top:100px solid #fff;
}
#footer {
background:#eee;
margin:auto;
height:100px;
clear:both;
}
/**/
#slideshow img{
margin:0 0 0 55px;
height:100%;
}
div#thumbWrap {
position: relative;
height: 100px;
width: 500px;
overflow: auto;
margin:0 0 0 50px;
}
ul#thumbs {
display: block;
width: 2000px;
padding: 15px 0 0 15px;
}
ul#thumbs li {
display: block;
float: left;
padding: 0 4px;
}
ul#thumbs a {
display: block;
text-decoration: none;
}
ul#thumbs img {
border: 3px #fff solid;
}
ul#thumbs a:hover img {
opacity: 0.5;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
</div><!-- #header -->
<div id="slideshow">
<img src="images/01.jpg" alt="" />
<img src="images/02.jpg" alt="" />
<img src="images/03.jpg" alt="" />
<img src="images/04.jpg" alt="" />
<img src="images/05.jpg" alt="" />
<img src="images/01.jpg" alt="" />
<img src="images/02.jpg" alt="" />
<img src="images/03.jpg" alt="" />
<img src="images/04.jpg" alt="" />
<img src="images/05.jpg" alt="" />
</div><!-- #content -->
</div><!-- #wrap -->
<div id="footer">
<div id="thumbWrap">
<ul id="thumbs">
</ul>
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
resizeImg();
/*-cycle
*/
$('#slideshow').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#thumbs',
before: resizeImg(),
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="auto" height="50" /></a></li>';
}
});
/*-thumbnailScroll
*/
var div = $('div#thumbWrap'), ul = $('ul#thumbs'), ulPadding = 15;
var divWidth = div.width();
div.css('overflow','hidden');
var lastLi = ul.find('li:last-child');
div.mousemove(function(e){
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
var footerHeight = $('#footer').height();
function resizeImg() {
$('#slideshow img').css({'height':$('#wrap').height()-footerHeight,'width':'auto'});
}
$(window)
.scroll(resizeImg)
.resize(resizeImg)
.onload(resizeImg)
});
</script>
</body>
</html>
