slider-pro in a fancybox - problem if parent has css 'display: none'

[hm291195]

i want to have a slider-pro in a fancyBox which opens by clicking an link. the DIV for the fancybox has to be set to display: none but if thats the case the slider is not displayed properly.

<div style="display: none;" id="hidden-content">
  <div class="slider-pro" id ="my-slider">
    <div class="sp-slides">[here comes the slides]</div>'
  </div>
</div>        

<a data-fancybox data-src="#hidden-content" href="javascript:;">Trigger the fancybox<a>

when i resize the window, the slider seems to get a new intialisation and works fine...

so how can i (re)initialize the slider after the fancyBox pops up ?

[wpexplorer]

Your code may look something like this:

$(document).on('afterShow.fb', function( e, instance, slide ) {
    $('.your-sider').sliderPro( 'update' );`
});