jQuery Anything slider : slider not resized after slide content update

Question

I setup an AnythingSlider with the resizeContents:false option, so content is at its normal size inside the slider. It works well with content from page load (content is an image and a text field wrapped into divs). But when I try to update the content of a slide in Javascript, it is not resized.

JS part :

$('#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 part :

<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 part :

.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;}​

I setup a jsfiddle to illustrate that : http://jsfiddle.net/YEmM5/.

Slides 2 and 3 are OK.

In Slide 1, if you click on the button it fakes an image upload and places an image in the slide (it also fakes a server response with the size of the image, so it is set explicitely), it is not resized like the others.

I tried to wait for the image to be loaded to call the AnythingSlider update, but nothing happens.

Should I update the slider another way or is it a bug ?

Thanks !

Answer 1

According to the documentation (a lot of which seems to be jsFiddle demos) you can Resize AnythingSlider height with dropdowns inside. The demo shows the use of a separate function to recalculate the height.

So adding this function to your 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);
};

and adapting your click handler by removing the unbind/load (which was unnecessarily reinitializing the AnythingSlider) and calling the height adjustment function instead

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

creates the desired effect - see demo.