SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery imagesloaded plugin

    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>

  2. #2
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I nearly have it working now.

    http://www.ttmt.org.uk/gallerytest/

    The imagesLoaded plugin resizes the first image when it loads and then I use

    Code:
      $('#slideshow').cycle({ 
          fx:     'fade', 
          speed:  'fast', 
          timeout: 0, 
          pager:  '#thumbs', 
          after: resizeImg,
        
          pagerAnchorBuilder: function(idx, slide) { 
              return '<li><a href="#"><img src="' + slide.src + '" width="auto" height="50" /></a></li>'; 
          } 
      });
    in the cycle function to call the resize function after the image has loaded.

    The problem I'm left with is the jump in image size when the resizeImg function is called after the image has loaded.

    Can anyone see a way around this jump in size - maybe a way of hiding the image till it's been resized.


    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>
        <script type="text/javascript" src="js/jquery.imagesloaded.min.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() { 
    
            $('#slideshow img').imagesLoaded( function( $images, $proper, $broken ) {
              resizeImg(); 
            });
    
            /*
            ---cycle
            */
            $('#slideshow').cycle({ 
                fx:     'fade', 
                speed:  'fast', 
                timeout: 0, 
                pager:  '#thumbs', 
                after: 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);         
            });
            /*
            ---resizeImg
            */
            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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •