Hi ALL
I’m trying to create a simple slideshow gallery with thumbnails.
I’m using the cycle plugin to create the slideshow and the thumbnails
http://www.ttmt.org.uk/gallerytest/
The thumbnails are in a sticky footer that will stay at the bottom of the window.
I want the slideshow image to fill the rest of the window and scale when the window is resized.
I’m doing this with this function
function resizeImg() {
$('#slideshow img').css({'height':$('#wrap').height()-footerHeight,'width':'auto'});
}
At the moment this works when the window is resized but not when the image first loads.
I need to call the function when the image is loaded.
I found the imagesloaded plugin which looks like it will work - https://github.com/desandro/imagesloaded
My problem is I can’t see how to use the plugin in my code.
Could anyone explain how I might use the imagesloaded plugin to call my resizeImg function.
<!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;
}
#slideshow img { display: none }
#slideshow img.first { display: block }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
</div><!-- #header -->
<div id="slideshow">
<img src="images/plane01.jpg" alt="" class="first"/>
<img src="images/plane02.jpg" alt="" />
<img src="images/plane03.jpg" alt="" />
<img src="images/plane04.jpg" alt="" />
<img src="images/plane05.jpg" alt="" />
<img src="images/plane06.jpg" alt="" />
<img src="images/plane07.jpg" alt="" />
<img src="images/plane08.jpg" alt="" />
<img src="images/plane09.jpg" alt="" />
<img src="images/plane10.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>