0

私はtwitterのブートストラップカルーセルで作業しており、画像がウィンドウサイズに比例してサイズ変更されるように、独自の画像サイズ変更関数を作成しました。また、画像の遅延読み込みを実装して、アクティブな現在のスライドのときにのみ画像が読み込まれるようにしました。だから私の問題は、サイズ変更機能がアクティブになったときに各カルーセル項目にどのようにバインドするのですか?

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

私はこれを試しましたが、メソッドは呼び出されませんでした

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

私もこれを試しましたが、アイテム2、3がアクティブなアイテムになった後に表示されず、幅が0に設定されているため、カルーセルが壊れました

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

1 に答える 1

0

エラーがあります

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

それで

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

そしてここ

$(window).load(function(){
   $('#item1, #item2, item3').imagefit(); // #item3
});
于 2013-03-09T01:47:44.170 に答える