2

resizeContents:falseオプションを使用してAnythingSliderを設定したため、コンテンツはスライダー内で通常のサイズになります。これは、ページの読み込みからのコンテンツでうまく機能します(コンテンツは画像とテキストフィールドがdivにラップされています)。しかし、Javascriptでスライドのコンテンツを更新しようとすると、サイズが変更されません。

JSパート:

$('#media-slider').anythingSlider({
    buildStartStop: false,
    infiniteSlides: false,
    hashTags: false,
    resizeContents: false,
    enableKeyboard: false,
    stopAtEnd: true
});
$('#add-button').click(function() {
    var current_index = $('#media-slider').data('AnythingSlider').currentPage;
    $('#media-slider li:nth-child(' + current_index + ')').removeClass('empty-slide-item');
    $('#media-slider li:nth-child(' + current_index + ') .slide-picture img').unbind('load').load(function() {
        $('#media-slider').anythingSlider();
    });
    $('#media-slider li:nth-child(' + current_index + ') .slide-picture img').attr('height', 320).attr('src', 'http://dummyimage.com/350x320');
});​

HTML部分:

<link rel="Stylesheet" type="text/css" href="http://css-tricks.com/examples/AnythingSlider/css/anythingslider.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" src="http://css-tricks.com/examples/AnythingSlider/js/jquery.anythingslider.js"></script>

<ul id="media-slider">
  <li class="media-slide empty-slide-item">
    <div class="empty-slide"> 
      <input type="button" id="add-button" value="Set image" />
    </div>
    <div class="slide-content">
      <div class="slide-picture">
        <img width="350" height="" src="" />
      </div>
      <div class="slide-text">
        <input type="text" value="new image" />
      </div>
    </div>
  </li>
  <li>
    <div class="slide-content">
      <div class="slide-picture">
        <img width="350" height="420" src="http://dummyimage.com/350x420" />
      </div>
      <div class="slide-text">
        <input type="text" value="image 1" />
      </div>
    </div>
  </li>
  <li>
    <div class="slide-content">
      <div class="slide-picture">
        <img width="350" height="280" src="http://dummyimage.com/350x280" />
      </div>
      <div class="slide-text">
        <input type="text" value="image 2" />
      </div>
    </div>
  </li>
</ul>​

CSS部分:

.media-slide .slide-content{display:block;}
.media-slide .empty-slide{display:none;}
.media-slide.empty-slide-item{height:230px;}
.media-slide.empty-slide-item .slide-content{display:none;}
.media-slide.empty-slide-item .empty-slide{display:block; width:300px; height:200px;}​

それを説明するためにjsfiddleをセットアップしました:http://jsfiddle.net/YEmM5/

スライド2と3はOKです。

スライド1では、ボタンをクリックすると、画像のアップロードが偽造され、スライドに画像が配置されます(また、画像のサイズでサーバーの応答が偽造されるため、明示的に設定されます)、他の画像のようにサイズ変更されません。

AnythingSliderアップデートを呼び出すために画像が読み込まれるのを待とうとしましたが、何も起こりません。

スライダーを別の方法で更新する必要がありますか、それともバグですか?

ありがとう !

4

1 に答える 1

1

ドキュメント(多くはjsFiddleデモのようです)によると、AnythingSliderの高さを内部のドロップダウンでサイズ変更できます。デモでは、別の関数を使用して高さを再計算する方法を示しています。

したがって、この関数をデモに追加します。

adjustHt = function(tar) {
    // animate the slider height to match the accordion height
    var panel = tar.closest('.panel'),
        newHt = 0,
        // target page index
        num = panel.index(),
        // calculate height of all visibile panel contents
        hts = panel.children().children(':visible').map(function(i, e) {
            return (newHt += $(e).outerHeight(true));
        }).get();
    // change height for plugin to prevent height jumping when changing slides
    $('#media-slider').data('AnythingSlider').panelSize[num][3] = newHt;
    // animate height of slider and panel
    $('.anythingSlider, .panel:eq(' + num + ')').animate({
        height: newHt
    }, 600);
};

unbind/load(AnythingSliderを不必要に再初期化していた)を削除し、代わりに高さ調整関数を呼び出すことによって、クリックハンドラーを適応させます

$('#add-button').click(function() {
    var current_index = $('#media-slider').data('AnythingSlider').currentPage;
    $('#media-slider li:nth-child(' + current_index + ')').removeClass('empty-slide-item');
    $('#media-slider li:nth-child(' + current_index + ') .slide-picture img').attr('height', 320).attr('src', 'http://dummyimage.com/350x320');
    adjustHt($('.empty-slide'));
    return false;
});​

目的の効果を作成します-デモを参照してください。

于 2012-11-15T14:12:13.530 に答える