1

jquery サイクルに javascript のサイズ変更を実装しようとしましたが、次のスライドに移動してブラウザー ウィンドウのサイズを変更すると、画像の幅が失われ、すべてがうまくいきません。次に何をすべきかわからない...

これがJavaScriptです：

jQuery(function($) {
function resizeImage() {
var slideImageHeight = $(window).height()-110,
    slideImageWidth = $('#slideshow img').width(),
    slideShowImageHeight = $(window).height()-123;

    $('.gallery_item').css('height', slideImageHeight);
    $('#slideshow img').attr('height', slideImageHeight);

    $('#slideshow').css('height', slideShowImageHeight);
    $('#slideshow img').attr('height', slideShowImageHeight);

    $('.pgwrap').css('width',slideImageWidth);
};
$(window).resize(function(){
     resizeImage();
}).trigger('resize');

$(window).load(function(){
     resizeImage();
});

$('#slideshow').cycle({
    fx:     'scrollHorz', 
    speed: 200, 
    prev:   '#prev', 
    next:   '#next', 
    timeout: 0 
});

});

ここでも実行されていることがわかります。http://stoorage.com/index2.html

4

1 に答える 1

1

ここにいくつかの問題があります。

1) #slideshow には複数の画像があるため、'#slideshow img' は離散的ではありません。2) サイズ変更関数自体は、ウィンドウの読み込みとサイズ変更で呼び出されますが、画像の循環後では呼び出されません。

大雑把な調査では、プラグインが「after」パラメーターを介してコールバックをサポートしていることを示しているため、これを試してください。

$('#slideshow').cycle({
  fx:     'scrollHorz', 
  speed: 200, 
  prev:   '#prev', 
  next:   '#next', 
  timeout: 0,
  after: resizeImage 
});

次のようにセレクターを拡張することで、問題 1) を軽減できると思います。

slideImageWidth = $('#slideshow img:visible').width()
于 2011-01-10T17:17:42.837 に答える