加載後調整圖片大小功能

我一直在使用twitter bootstrap旋轉木馬，並且我寫了自己的圖片大小調整功能，以便圖像按比例調整到窗口大小。我還實現了圖像的延遲加載，以便圖像僅在其當前活動幻燈片加載時加載。所以我的問題是，如何將我的調整大小功能綁定到每個旋轉木馬項目時，它變得活躍？加載後調整圖片大小功能

HTML：

<div id="myCarousel" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item" id="item1"> 
     <img src="img1.jpg"> 
    </div> 
    <div class="item" id="item2"> 
     <img lazy-src="img2"> 
    </div> 
     <div class="item" id="item3"> 
     <img lazy-src="img3"> 
    </div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div>

我的形象調整JS：

$.fn.imagefit = function(options) { 
    var fit = { 
     all : function(imgs){ 
      imgs.each(function(){ 
       fit.one(this); 
       }) 
      }, 
     one : function(img){ 
      var winRatio = parseInt($(window).width())/parseInt($(window).height()); 
      var imgRatio = parseInt($(img).width())/parseInt($(img).height()); 

      //If imgRatio > winRatio, image is proportionally wider than the resolution ratio for window 
      if(imgRatio > winRatio){ 
       // Fit to width 
       $(img).width($(window).width()); 
       $(img).height(parseInt($(img).width())/imgRatio); 
      } else { 
       // Fit to height 
       $(img).height($(window).height()); 
       $(img).width(parseInt($(img).height())*imgRatio); 

      } 
     } 
    }; 

    this.each(function(){ 
      var container = this; 

      // store list of contained images (excluding those in tables) 
      var imgs = $('img', container).not($("table img")); 

      // store initial dimensions on each image 
      imgs.each(function(){ 
       $(this).attr('startwidth', $(this).width()) 
        .attr('startheight', $(this).height()) 
        .css('max-width', $(this).attr('startwidth')+"px"); 

       fit.one(this); 
      }); 
      // Re-adjust when window width is changed 
      $(window).bind('resize', function(){ 
       fit.all(imgs); 
      }); 
     }); 
    return this; 
};

我試過這個，但該方法wan'st甚至調用

$("#item1").bind("load", function(){ 
    ("#item1").imagefit(); 
    });

我也是試過，但它打破了轉盤的item2,3不會成爲活動項目，它們的寬度設置爲0

$(window).load(function(){ 
    $('#item1, #item2, item3').imagefit(); 
    });

來源

2013-03-09 Chris Wang

後顯示您有錯誤

$("#item1").bind("load", function(){ 
    ("#item1").imagefit(); // no $ 
});

所以

$("#item1").bind("load", function(){ 
    $(this).imagefit(); 
});

和這裏

$(window).load(function(){ 
    $('#item1, #item2, item3').imagefit(); // #item3 
});

來源

2013-03-09 01:47:44 kidwon

加載後調整圖片大小功能

回答

相關問題