2

画像のサイズ変更と jquery サイクル プラグインの実行 ( http://www.jquery.malsup.com/cycle/ )。プリローダープラグインも使用しています。

目標

目標は、多数の画像 (cms データベースから取得) を取得し、それぞれの高さまたは幅のいずれかを (コンテナーの縦横比と比較した縦横比に応じて) サイズ変更して、コンテナー内に収まるようにし、中央に配置することです。コンテナに入れ、スライドショー (プロジェクト画像) を実行します。

問題

サイクル スライドショーは、画像が読み込まれる前に実行されます (画像が大きすぎるため、画像が表示される前に 3 つのスライドを循環できます)。iamges がロードされるまで待機させ、ロード中に gif を表示します。

これは、サイクルスライドショーをプリロード、サイズ変更、および実行するために実行しているhtmlおよびjqueryコードです。

<div id="slideshow" class="single_project_images pics">
    <img src="/components/com_sedarticles/assets/1333588925" />
    <img src="/components/com_sedarticles/assets/1333852906" />
    <img src="/components/com_sedarticles/assets/1333852914" />
 </div>

スクリプト：

$(document).ready(function() {
    $(".single_project_images img").each(function(){
        $(this).imagesLoaded(function(){
            var w = $(this).width();
            var h = $(this).height();
            if( (w/h) < 0.85){
                $(this).height("541px");
                $(this).css("margin-left", parseInt((460 - $(this).width())/2)+"px");
            }else{
                $(this).width("460px");
                $(this).css("margin-top", parseInt((541 - $(this).height())/2)+"px");
            }
        }); 
});

    $('#slideshow').cycle({
        speed:  1000,
        timeout: 5000,  
        pager:  '#nav'
    }); 
});
4

1 に答える 1

0

画像 2 と 3 が表示されない理由は、css で margin-top が 1000px に設定されており、これら 2 つの画像が js の if 条件を満たしていないために調整されていないためです。

画像がロードされる前にスライドショーが開始されないようにするには、ロードされた数を追跡し、すべて完了したらサイクルを呼び出す必要があります。

このようなもの：

var totalimages = 6, imagesloaded = 0;

$('img').each(function() {

    this.onload = function() {
       imagesloaded++;
       if(imagesloaded === totalimages){
           //call cycle plugin
       }
    }

});
于 2012-04-14T05:16:12.810 に答える