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アップデートを呼び出すために画像が読み込まれるのを待とうとしましたが、何も起こりません。
スライダーを別の方法で更新する必要がありますか、それともバグですか?
ありがとう !