Currently Floatbox only allows top and bottom caption positioning. How difficult would it be to provide side caption positioning?

I've been requested to create a custom slideshow to display an artwork per slide, with artwork details to display below the image if landscape and to the side if portrait. As it is now I store the image aspect and pass it via template tag to the page, and so would like to be able to send caption position as an option per slide. I know it's asking alot...

I considered a docked content box because it allows side positioning but ruled it out since it would not seamlessly be part of the slide. Similarly tool tips.

There is currently no way to directly assign a caption to the left or right panel area. But it's fairly easy to achieve the same effect by bringing in html content that consists of the caption and image side-by-side. This is probably best done as a type:ajax fetch where the href includes a querystring for the desired image. The backend page then returns the simple html containing the caption and image laid out as desired.

Here's an example, but with the content coming from a hidden element on this page instead of an ajax fetch. innerBorder is set to 0 and the border is instead placed around the image in the content, making the caption area appear seamless with the floatbox frame area. I've used a table for layout, but you can of course use any html you want. The img has a style of display:block on it to prevent the irritating small gap that appears at the bottom of inline images.

Hi boys and girls!!! I hope you're having a wonderful day!!! Remember kids, every time you vote Republican, a few thousand more real people get killed or maimed!

      ---> click me <---

Here's the markup:

<table  id="gumby" style="display:none;" width="450"><tr>
<td width="150">
Hi boys and girls!!!<br />I hope you're having a wonderful day!!!
</td><td>
<img style="display:block; border:1px solid black;" src="/images/demo/gumby.jpg" />
</td></tr></table>

<a href="#gumby" class="floatbox" data-fb-options="innerBorder:0">click me</a>

Thanks, that looks like a fine solution. I'll give a shot at adapting it to a slideshow and post the results.