No convenient API to resize slider

[wichert]

I am trying to do lazy image loading for a slider. My markup is quite minimal:

<div class="carousel">
  <img data-src-"...." />
  <img data-src-"...." />
  <img data-src-"...." />
</div>

to implement the lazy loading I have a simple helper function which is called in the onInitialized and onSlideInit event handlers as well as onSlideComplete to pre-load the next slider:

_loadPanelImages: function(slider, page) {
    var $lazy = slider.$items.eq(page).find("img").andSelf().filter("[data-src]");
    $lazy.each(function() {
        var $img=$(this);
        this.src=$img.attr("data-src");
        $img.removeAttr("data-src");
    });
},

unfortunately this has one problem: when the slider is created (with resizeContents=false and expand=false) it measures the panels, but since the images have no src at this point they are not measured correctly, which results in very tiny images being shown.

Your lazy loading demo does not suffer from this since it fixes the size of the slider, and your other demos with flexible content manually measure a panels height and update CSS manually. It would be nice if there was an API one could use to tell the slider to re-measure everything. I initially thought that I could do this by calling slider.updateSlider() or even just slider.setDimensions() at the end of _loadPanelImages, but that had no noticeable effect.

I tried to reproduce our situation in a jsfiddle and ended up with this demo. In this case you see that the panels should get a size of 320x200, but instead they end up being 700px wide. If you look at the patterns lib website and click on the "View slides" button you see the same error in another direction: the slides end up being too narrow there.

[Mottie]

Hi wichert!

I'll look into this issue soon... busy today!

[Mottie]

In version 1.8.7, the slider should now recalculate its width and height when the update method is used.