Hi all,
Thanks for this amazing feature, and your support. For html begginers sites like this one are a nice move.

I'm trying to put floatbox and flowplayer together.
The site is a gallery that uses floatbox to pop-up the images.

With the videos and flowplayer I'm stuck in writting the html code to make them working together.

I was wondering if anyone had an example or any suggestions.

Thanks in advance
Manolo

There's (at least) two ways to load flash into floatbox: direct load by href'ing the .swf file directly, or by putting your flash object/embed code, or javascript flash setup code, on a standalone html page and loading that page into floatbox as an iframe.

Flowplayer's standard approach to getting flash going is the javascript setup approach. The path of least resistance to getting flowplayer into floatbox is to use flowplayer's standard approach. To do this, check out the flowplayer docs for how to put their player on a page, and do that, putting only the flowplayer instance on the page. Then load that page as an iframe in floatbox. The basic information for setting up that flowplayer page can be found here. Some details about loading this into floatbox can be found in the last paragraph of the multimedia section of the floatbox instructions. The "flash in a frame" sample on the html tab of the demo page is an iframe load of an older version of flowplayer. (The html page that the demo sample uses is not setup in the way described in the flowplayer installation docs, and the older version in use uses very different parameters.)

Here's the flowplayer sample from their docs loaded as an iframe: iframed flowplayer
The html for that anchor is:
<a href="http://randomous.com/misc/fp-sample" class="floatbox" rev="width:425 height:300 scrolling:no">iframed flowplayer</a>
View the page source of http://randomous.com/misc/fp-sample to see the iframe source page.

 

For the brave, the second approach is a direct load of flowplayer into floatbox. The reason why you have to be brave is because flowplayer uses a very complex syntax for passing its config information through flashvars or querystrings. Here's a bit of a walk-through for a working sample of a direct load flowplayer instance.

The sample on the flowplayer home page has an embed button that gives the code for a direct embed of that instance. The key parameter for us is flashvars. Remember I said flowplayer uses a complex syntax? Here's the (slightly modified) flashvars in use for that sample:

<param name="flashvars" value='config={"plugins": {"pseudo": {"url": "flowplayer.pseudostreaming-3.1.2.swf"}, "controls":{"backgroundColor":"#000000", "backgroundGradient":"low"}}, "clip":{"provider":"pseudo", "url":"http://randomous.com/misc/flowplayer.flv"}, "playlist":[{"provider":"pseudo", "url":"http://randomous.com/misc/flowplayer.flv"}]}' />

When direct-loading flash in floatbox, you put the flashvars into the href's querystring. So, based on the embed code given for that flowplayer home page example, our floatboxed anchor becomes:

<a href="http://flowplayer.org/swf/flowplayer-3.1.0.swf?0.07665250521353706&amp;config={'plugins': {'pseudo': {'url':'flowplayer.pseudostreaming-3.1.2.swf'}, 'controls':{'backgroundColor':'#000000', 'backgroundGradient':'low'}}, 'clip':{'provider':'pseudo', 'url':'http://randomous.com/misc/flowplayer.flv'}, 'playlist':[{'provider':'pseudo', 'url':'http://randomous.com/misc/flowplayer.flv'}]}" class="floatbox" rev="width:460 height:320 scrolling:no">direct-load flowplayer</a>

Try it: direct-load flowplayer