Proportional scale images on window resize?
Hi all
I’m trying to re-create a page like this:
http://www.ttmt.org.uk/forum/scale/flash/
this a demo of an old flash site I did years ago.
I want to recreate the window resize function with html/jQuery.
When the window is resized the thumbnails stay the same size at the
bottom of the image and the image scales proportionally.
I’ve got it sort of working here:
http://www.ttmt.org.uk/forum/scale/html/
I’m using jQuery cycle to create the slideshow and thumbnails.
When the page loads the large image is the correct size and scales when the window is resized.
When a thumbnail is clicked the images doesn’t load at the correct size. When the window is resized it
goes to the correct height but the width doesn’t change.
How can I load the image at the correct height and width when a thumbnail is clicked. And keep it proportional
when the window is resized.
Hope someone can help. Any help is greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!--jQuery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<!--CSS-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
#footer {
display:block;
height: 100px;
background:#eee;
}
#content{
width:200px;
}
div#thumbWrap {
position: relative;
height: 100px;
width: 400px;
overflow: auto;
margin:0 0 0 50px;
}
ul#thumbs {
display: block;
height: 110px;
width: 1500px;
padding: 15px 0 0 15px;
margin: 0;
background: url('navigation.png');
list-style: none;
}
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="content">
<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 id="footer">
<div id="thumbWrap">
<ul id="thumbs">
</ul>
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
//
//cycle
//
$('#content').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#thumbs',
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="auto" height="50" /></a></li>';
}
});
//
//
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);
});
//
//scalable
//
$content = $('#content');
var footerHeight = 0,
footerTop = 20,
$footer = $("#footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
$content.height($(window).height()-footerHeight);
var imgHeight = $('#content img').height();
var imgWidth = $('#content img').width();
var ratio = imgWidth/imgHeight;
$('#content img').height($content.height());
//$('#content img').width(ratio*imgWidth);
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({'position':'absolute','top':footerTop})
} else {
$footer.css('position','static')
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
</script>
</body>
</html>