Solution: Pager and Progressive Loading

[EricM81]

I was looking for a solution for using a pager with a progressive loader and came across this post:

#111

I adapted it from there. This implements a custom progressive loader. You set up cycle2 with your pager as normal, except that for every image after the first two, you set the src for the image to tiniest.gif and the data-src for the image to the actual URI.

https://gist.github.com/EricM81/6674048

I modified the jquery.cycle2.js to add 2 snippets:

1. When you click on a pager, it checks to see if the src is set to tiniest.gif. If so, it replaces the src with data-src and removes the data-src node.

https://gist.github.com/EricM81/6674066

2. After the slide finishes the transition, it looks ahead at the next image to see if it needs to preload the next one.

https://gist.github.com/EricM81/6674098

You can see it in action on my site, JohnPaulsJewelers.com/Gallery.html

You can find the gif, modified jquery.cycle2.js, and jquery.cycle2.min.js on my site as well:
JohnPaulsJewelers.com/js/CustomCycle2.7z

Hope this helps!

[sallaberry]

Hey

Thanks for this, but I have a slight problem with the Next and Prev button, if I use a pager to goto a slide and then use the next or prev button I have to slide X number of blank pages, X being the number of positions skipped when I clicked on the pager...

I tried to edit your script but no luck.

edit / it's actually only the previous button with the bug

[ssuess]

Would there be anyway to make something like this work if the slides are not images, but blocks of html (with whatever, images/text mixed)?

[panablue]

Can those two snippets (or the look ahead plugin itself) be modified to work for URL hash/bookmarkable slides?

I have the look ahead plugin (from issue #111 and the demo) working great, but without hash support.

Is there a way so that when you land on the slideshow from a hash/bookmark link (a) the image for the current slide loads and (b) the image for the previous slide loads as well?

(Loading the previous slide's image would be needed if the "prev" button is clicked and/or "data-cycle-wrap" is set to true. As is, when landing on a hash link, only the next slide's image loads.)

[kamov]

For me this work pretty well. Thanks. Why @malsup not integrate this?