Fatal编程技术网
  • jquery/
  • jQuery imagesloaded插件

jQuery imagesloaded插件

jquery

jQuery imagesloaded插件,jquery,Jquery,jQuery imagesloaded插件 大家好 我正在尝试创建一个带有缩略图的简单幻灯片库 我正在使用cycle插件创建幻灯片和缩略图 缩略图位于一个粘性的页脚中，该页脚将停留在窗口底部 我希望幻灯片图像填充窗口的其余部分，并在调整窗口大小时进行缩放 我用这个函数做这个 function resizeImg() { $('#slideshow img').css({'height':$('#wrap').height()-footerHeight,'width':'au

jQuery imagesloaded插件

大家好

我正在尝试创建一个带有缩略图的简单幻灯片库

我正在使用cycle插件创建幻灯片和缩略图

缩略图位于一个粘性的页脚中，该页脚将停留在窗口底部

我希望幻灯片图像填充窗口的其余部分，并在调整窗口大小时进行缩放

我用这个函数做这个

    function resizeImg() {
      $('#slideshow img').css({'height':$('#wrap').height()-footerHeight,'width':'auto'});
    }
此时，在调整窗口大小时，此功能起作用，但在首次加载图像时则不起作用

我需要在加载图像时调用该函数

我找到了imagesloaded插件，它看起来可以工作-

我的问题是我看不到如何在我的代码中使用插件

有人能解释一下我如何使用imagesloaded插件调用我的resizeImg函数吗

    <!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>
在cycle函数中，在加载图像后调用resize函数

我留下的问题是在加载图像后调用resizeImg函数时图像大小的跳跃

任何人都能找到一种方法来解决这种大小跳跃的问题吗？

您可以尝试这样做（将此代码添加到$（window.load（…）事件处理程序中）-->

$（“#幻灯片”）.imagesLoaded（函数（$images，$property，$breaked）{
//回调提供了三个参数：
//$images：包含所有图像的jQuery对象
//$PROPERT:具有正确加载的图像的jQuery对象
//$BREAKED:具有损坏图像的jQuery对象
//`this`是容器的jQuery对象
console.log（$images.length+'images总计已加载到'+this中）；
log（$property.length+‘正确加载的图像’）；
log（$breaked.length+'breaked images'）；

resizeImg（）；//在resizeImg中，首先尝试使用window而不是“#wrap”，以获得图像缩放到的最大高度：


function resizeImg() {
    $('#slideshow img').css({'height':$(window).height()-footerHeight,'width':'auto'});
}


要使用imagesLoaded插件，在将脚本添加到头部之后，可以在窗口滚动、调整大小和加载处理程序之后尝试这一行：


$('#slideshow img').imagesLoaded(resizeImg);



谢谢chrisM-我已经试过了，但它不起作用，应该把它放在我的post.rt2800中-当页面加载和第一张图像调整大小时，它起作用，但当幻灯片开始或我点击缩略图时，图像会恢复到正常大小。好的，我想图像加载后会调用imagesLoaded函数（页面加载完成时）-当我单击缩略图时，图像已经加载，因此imagesLoaded函数不会运行-当我单击缩略图时，如何调用我的resizeImg函数。

function resizeImg() {
    $('#slideshow img').css({'height':$(window).height()-footerHeight,'width':'auto'});
}



$('#slideshow img').imagesLoaded(resizeImg);