Proportional scale images on window resize?

**ttmt** · 04-24-2012 10:21 AM

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.

Code:

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

**WolfShade** · 04-24-2012 11:58 AM

Look up bgstretcher.js. You can use it to resize a background image, or set an image as the background of a div and have it resize with the div.

**ttmt** · 04-24-2012 03:23 PM

Thanks for that WolfShade, I'll look into it.

Thread: Proportional scale images on window resize?

Thread Tools

Display

Proportional scale images on window resize?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions