0

Cycle2 スライドショーで現在のスライドの画像サイズを取得するために jQuery を使用しようとしています。

これは、.overlay.hover() に表示されるオーバーレイ div () のサイズを設定できるようにするためです。このfiddleでわかるように、最初の画像からサイズを取得しているだけです。画像もレスポンシブになるため.overlay、ウィンドウのサイズ変更に基づいてサイズを更新する必要もあります。

フィドルのリンクと完全なコードは次のとおりです。

var imgwidth = $('.cycle-slide img').width();
var imgheight = $('.cycle-slide img').height();

$('.cycle-slide').hover(function () {        
    $('.overlay', this).css('width', imgwidth).css('height', imgheight).fadeIn();
    }, function() {
    $('.overlay', this).fadeOut();
});

.overlay各スライドの画像サイズを一致させるにはどうすればよいですか?

よろしくお願いします。

4

1 に答える 1

1

幅を設定するには、おそらくcycle-afterイベントにフックする必要があります..これに似たもの：

$('.cycle-slideshow').on('cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $('.overlay', this).css({'width':$('img',incomingSlideEl).css('width'), 'height': $('img',incomingSlideEl).css('height')});
});


$('.cycle-slide').hover(function () {        
    $('.overlay', this).show();
    }, function() {
    $('.overlay', this).fadeOut();
});

あなたがしなければならない唯一のことは、イベントの外側の最初のオーバーレイの幅と高さを設定することです。最初のスライドで発生するとは思わないからです。

于 2013-04-08T18:22:37.070 に答える