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

Code:
        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.

Code:
        <!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>