First of all, congratulations, floatbox is very nice and well documented.

I have a paged gallery with 20 thumbnails per page and I was wondering what would be the best way to have the slide show started on a page, continuing with the other pages of the set automatically without exiting the floatbox and taking advantage of pre-loading as much as possible.

Here is an example page.

Right now, there is an individual slide show for each page of the set and I would like the slide shows to continue automatically with the other pages if they are not stopped.

The ideal flow of event I would like is:

Start the slide show with the first 20 images pre-loaded.
Pre-load the next page and continue the show
...

Or do I have to pre-load all images when the slide show is started?

Also can I extend the slide show just in JS, or do I have to create hidden anchors on the main document?

Thanks

The only way I can think to do this is to have anchors for all images in the desired gallery/slideshow on each page. You're using the indexLinks navigation feature with popup thumbnails, so this means you need the thumbnail images inside each anchor.

If you weren't using indexLinks with thumbs, you could just put empty anchors like <a href="/client-files/27/7731.jpg" title="Yearling team" rel="floatbox.set" rev="info:#info_div_7731 infoOptions:`width:400 height:300`"></a>

But since you need the thumbs in every anchor, you'll need to wrap the ones you don't want displayed in a hidden div.

If preloadAll is true, preloading will load each href'd image one at a time, including the ones on the floatboxed anchors in the hidden div, and will start tearing through them as soon as the page is loaded. If preloadAll is false, the next image in numeric sequence will start preloading as soon as the preceding image is fully displayed.

Thank you, I was wondering since some people who open one page are not really interested in the slide show at all, it might be a waist to pull the whole set out of the DB and create the anchor tags on the main page.

How would it work to have next to the pager, a link to the complete slide show, similar to the example you have for the APOD Slideshow or have that link fill a hidden div with the anchor tags of the whole set through and AJAX call and start the slide show from there.

Yeah, the "slideshow" link might be a good way to go. You would need all the anchors to be setup on the page and grouped with something like rel=floatbox.slide. And you would still need the thumbnail images included in those anchors if you wanted to display those popup imageLinks in the slideshow. Check out the "View as Slideshow" example on the demo page.

If you pull in all these hidden anchors via ajax on the click, you would need to manage launching floatbox by code and not put a floatbox rel on the slideshow link (because at click time there will be no anchors in floatbox's collection to create a slideshow out of).

The ajaxed slideshow anchor div might look this:

<div id="mySlides" style="display:none;">
<a id="slide1" href="image1.jpg" rel="floatbox.slides" rev="whatever slideshow specific options you want to use"><img src="thumb1.jpg" /></a>
<a href="image2.jpg" rel="floatbox.slides"><img src="thumb2.jpg" /></a>
<a href=...
...

Then the onclick action for the slideshow link would fetch the ajax content, and on successful completion of that fetch, run something like:

fb.tagAnchors(document.getElementById('mySlides'));
fb.start(document.getElementById('slide1));

In my opinion, it's easier to just include all the hidden anchors on the base page at load time, add rel="floatbox.slides" to the slideshow link, and let floatbox take it from there.

Thanks, I used the Ajax approach.
The first time the slide show link is clicked, the anchors are loaded and the show is started, subsequent clicks only start the show:

See the page

I limited the indexLinks to 40 and I see your pager has the first or last link when the total is more than 40, nice, thank you.