Programmatic iframe html slideshow

Page: 1

Author Post
siberian
Guest
First off, WOW. This is great and exactly what I am looking for, thanks..

Question: I am dynamically creating my page links and I can get them to floatbox using the programmatic method but I do not understand the following:

1) Can iframe floatbox items be slideshow enabled?
2) Is there an example of how to this programmatically?

I'll keep digging and report back if I solve it as well, tx!

John-
Administrator
Registered: Aug 2008
Posts: 3382
Floatbox galleries can consist of any content type, or mix of content types. Any gallery can be shown as a slideshow by using a variation of the rel attribute "slideshow" to do the gallery grouping, or by setting the option doSlideshow to true. To answer question #1 directly: yes, you can do a slideshow of iframe items.

The easiest way to programmatically setup and invoke such a slideshow is through html markup. This is just the usual drill of setting up an anchor element for each item in the gallery collection. What people often overlook about these anchors is that they don't need to have displayable/clickable content. They can be empty anchor elements.

So maybe on your page you will have something like:
<a id="startSlide" href="item1.html" rel="floatbox.group1" rev="doSlideshow:true width:xx height:yy"></a>
<a href="item2.html" rel="floatbox.group1" rev="width:xx height:yy"></a>


Note that we put an arbitrary but unique id on the first anchor and set doSlideshow to true in its rev attribute. Now we can invoke this slideshow with a javascript call:
fb.start(document.getElementById('startSlide'));

You mentioned dynamically creating your page links. I assume you can create these links with server side script (php, asp, etc.) to result in something like that described above. But note that if the links are not present when the page is first loaded (perhaps they are added via AJAX later), the new anchors need to be registered with floatbox after they are added to the page. Prior to calling the fb.start() function, you would register the new anchors with:
fb.tagAnchors(document.body);
(It's better to put your anchors in a div with an id and use that div in place of document.body. See the docs for details.)

If you are using javascript to dynamically create your links, you would use DOM calls to build a div containing anchors like those described above (createElement, setAttribute, appendChild). The div you would construct to hold your new anchors does not need to be attached to your current document. It can just remain free-floating. You would pass that div to the fb.tagAnchors() function while one of the contained anchor elements would be passed as the parameter to fb.start().
siberian
Guest
Ahh tagAnchors is the magic sauce. Sorry I did not understand that directly.

I will give this a try tomorrow, thanks!

John-

Page: 1