Call function on image load

**ttmt** · 05-13-2012 08:54 AM

Call function on image load

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

Code:

  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.

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;
    }
  </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>

Thread: Call function on image load

Thread Tools

Display

Call function on image load

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions