Hello, first of all - this is a great script, thanks for making it.

I've set up two text links on my site: one opens up an image gallery, and the one under it opens a video gallery. Both work beautifully. The only problem is that due to the fact that they are DIV's, they force a line break and I simply can't find a solution to stop them from doing this. So, instead of looking like this:

HEADING
Link 1
Link 2

...it looks like this:

HEADING

Link 1

Link 2

I've done everything from editing my theme's style.css, to editing floatbox.css so that it has "display:inline" for the div. No matter what I do, it won't work and it keeps stubbornly forcing the line break.

I guess my question is -- where on earth is DIV class="floatbox" pulling its DIV data from, and what edit can I make to stop it from forcing a line break?

Thanks

The floatbox class doesn't add any styling. Style your divs however you want them to appear. Maybe you don't want divs at that place on your page. A div is a block element so will typically stack vertically with other divs. Perhaps you are using those divs as a containing element for your floatboxed links, and having the links (<a> elements) inside "inherit" the floatbox class. That's one way to do it. Another way is to not have a containing element and just put the floatbox class directly on the <a> elements that you want to associate with Floatbox behaviour.

Floatbox does not provide, nor interfere with, the structure and layout of the pages it is used on. Management of these things must be done by the page author. The task is identical whether Floatbox is present or not.

My guess is that you've placed your links inside their own divs. Floatbox doesn't need that. It is concerned only with <a> and <area> elements.

Thanks for the reply - I think I see what you mean. If you don't mind, please take a quick look at the code I'm using (modified for example purposes) -

Quote

<div style="display:inline" class="floatbox" data-fb-options="group:1 doSlideshow:false"><a href="http://www.mysite.com/image1.jpg" title="This is image 1.">An example image gallery</a>
<a href="http://www.mysite.com/image2.jpg" title="This is image 2."></a>
<a href="http://www.mysite.com/image3.jpg" title="This is image 3."></a></div> <div style="display:inline" class="floatbox" data-fb-options="group:2 doSlideshow:false"><a href="http://www.mysite.com/example.mov" data-fb-options="width:640 height:496" title="This is video 1.">An example video gallery</a> <a href="http://www.mysite.com/example2.mov" data-fb-options="width:180 height:250" title="This is video 2."></a>
<a href="http://www.mysite.com/example3.mov" title="This is video 3."></a></div>

I've added the "inline" modification to my DIVs in the wordpress theme css, but it did nothing. There's something preventing it....with that being said, I don't have a lot of time to fool around with whatever is governing the DIV, but am looking for some alternative to setting this up without them entirely.

What other way could I get this done without the DIV's? I tried both SPAN and P as well, but they also force a line break.

Thanks!

Don't put your links in a div if you don't want a div. Put the floatbox class and options on the links.

A simple gallery can be defined as follows

<a href="image1.jpg" class="floatbox" data-fb-options="group:1">click me</a>
<a href="image2.jpg" class="floatbox" data-fb-options="group:1"></a>

with no div anywhere to be seen.