Call function on image load

JavaScript
1

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>