Progressive loading and using a pager

[jamesmehorter]

I've found one of those edge cases where I'm using progressive loading, and the design calls for a pager. It appears the pager only works once the slide in question has been downloaded. If I use the 'pagerTemplate': "<figure></figure>" method, each slide's pager only displays once it has been downloaded progressively. I would argue that all pagers should be displayed on initial load, and when the user clicks the pager, the chosen slide should load 'on demand', identical to the behavior seen when the slideshow is progressing normally. Hope this helps!

<section id="slideshow">
    <div class='slide'><img width="1155" height="535" src="http://localhost/wp-content/uploads/an-image.jpg" /></div>
    <div id="pager"><!-- css is used to overlay the pager on top of the slides, and to stylize the <figure>'s within -->
        <figure></figure>
        <figure></figure>
        <figure></figure>
    </div>
</section>

<script type="text/javascript">
    //Load jQuery
    (function($){
        //Homepage Slideshow 
        $('#slideshow').cycle({
            'progressive': slideshow_slides,
            'auto-height': 'calc',
            'loader': true,
            'fx': 'fade',
            'slides': '> div.slide',
            'speed': 750,
            'pager': '#pager',
            'pagerActiveClass': 'active',
            'pagerTemplate': '',
            'pauseOnHover': true
        })

        //Slideshow slides (Only includes slide #2 and on - slide #1 is added directly in markup
        var slideshow_slides = ["<div class='slide'><img width=\"1155\" height=\"535\" src=\"http:\/\/localhost\/wp-content\/uploads\/blurred-birches.jpg\" \/><\/div>","<div class='slide'><img width=\"1155\" height=\"535\" src=\"http:\/\/localhost\/wp-content\/uploads\/IMG_0601-1155x535.jpg\" \/><\/div>"];
    })(jQuery)
</script>

[drrobotnik]

+1 uproar

It's become an issue since fullscreen galleries are becoming more common.

[EricM81]

Take a look at this:

#300