CODEWITHSUNDEEP
jqueryflexslider
byronyasgur
byronyasgur

Reputation: 4737

Detect when flexslider has loaded first slide

I am using flexslider and I am making a calculataion of the height/posn of another element via jquery something like below. The .flexslider ul li img doesnt work though. I need to make sure that the flexslider slide is fully loaded so that I can measure it's height, but I can't target it. I have proved the concept using setTimeout() but I cant know how long the image will take to load on any given server so I want to have it depend on whether or not the flexslider is at it's final dimensions. How can I make this work.

Callback (from documentation): I see from the documentation page that start: function(){} is a property which "Fires when the slider loads the first slide" but I dont now how to use it. I guess that might be a better way around it.

var resizeBackground = $('.flexslider ul li img').load(function(){

 $('.home .skin-background').css({
     'display': 'block',
     'height': $fpTop.outerHeight(true) + $quickBar.height() - 1 + 'px',
 });

});

$(window).load(resizeBackground).resize(resizeBackground);

Upvotes: 0

Views: 1338

Answers (1)

byronyasgur
byronyasgur

Reputation: 4737

What I ended up doing was a bit complicated because of the resize code that I also wanted but basically I ended up putting the above code into a function and instead of calling on the load I called it from where I instantiated flexslider like this

$('.flexslider').flexslider({

    ... etc ...

    start: function(slider){

    ... etc ...

        sizeSkin(); // This is the function that I put the code in

    }
});

Upvotes: 1

Related Questions