jQuery Anything 슬라이더 : 슬라이드 내용 업데이트 후 슬라이더 크기가 조절되지 않습니다.

Question

콘텐츠가 슬라이더 안에 정상 크기가되도록 anyizeSlider를 resizeContents : false 옵션과 함께 설정했습니다. 그것은 페이지로드 (컨텐트는 이미지와 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은 정상입니다.

슬라이드 1에서 버튼을 클릭하면 이미지 업로드가 가짜가되어 슬라이드에 이미지가 저장됩니다 (이미지의 크기에 따라 서버 응답이 가려 지므로 명시 적으로 설정 됨). 다른 사람들처럼 크기가 조정되었습니다.

AnythingSlider 업데이트를 호출하기 위해 이미지가로드 될 때까지 기다리려고했으나 아무 반응이 없습니다.

슬라이더를 다른 방식으로 업데이트해야합니까, 아니면 버그입니까?

감사합니다.

Answer 1

documentation (대다수는 jsFiddle 데모로 보임)에 따르면 안에 드롭 다운이있는 AnythingSlider 높이를 조정할 수 있습니다. demo에는 별도의 함수를 사용하여 높이를 다시 계산하는 방법이 나와 있습니다.

그래서 데모에이 기능을 추가 :

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); 
}; 

과 (불필요하게 AnythingSlider을 다시 초기화 된)을 unbind/load를 제거하여 클릭 핸들러를 적응 대신

$('#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; 
});​ 

을 높이 조정 함수를 호출 원하는 효과를 만듭니다 (demo 참조).