mercredi 2 décembre 2015

Wordpress Meta Slider - get height once the first slide displays

I need to get the height of a Meta Slider container once it is displayed. The slider has a width of 100% and keeps the defined aspect ratio, hence the height is dynamic. You can however assume that all individual slides will have the same height.

On jQuerys $(document).ready() $('.slider_wrapper').height() still returns 0.

Attaching $('.slider_wrapper img').on('load', function() { ... }) on .ready() is not triggering consistently for me. And even if it does, it's still just before the element updates it's height. I could simply use setTimeout but it's never nice to rely on timing.

I'm looking for a simple clean solution that will trigger as soon as the element has it's final height.

Example markup for slider:

<div style="width: 100%;" class="metaslider metaslider-nivo metaslider-356 ml-slider">
    <div id="metaslider_container_356">
        <div class='slider-wrapper theme-default'>
            <div class='ribbon'></div>
            <div id='metaslider_356' class='nivoSlider'>
                <img src="slide1-1910x560.jpg" height="560" width="1910" alt="" class="slider-356 slide-512" />
                <img src="slide2-1910x560.jpg" height="560" width="1910" alt="" class="slider-356 slide-491" />
                <!-- etc. -->
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var metaslider_356 = function($) {
            $('#metaslider_356').nivoSlider({ 
                // options...
            });
        };
        var timer_metaslider_356 = function() {
            var slider = !window.jQuery ? window.setTimeout(timer_metaslider_356, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_356, 1) : metaslider_356(window.jQuery);
        };
        timer_metaslider_356();
    </script>
</div>



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire