This is a follow-up to my post from last week ("Client demands absolute positioning").

Your suggestion of setting autoFitImages:false worked for absolute positioning of a slideshow in all situations but one-- when the client browser is maximised but the screen size is too small to fit the full height of an image. In that one case, the first image in the slideshow positions correctly, allowing its lower bound to dip below the content pane, but subsequent images float up above the page header. I'm hoping that one of the parameters I pass is overriding the intended behavior and can be changed.

The setup: I'm auto-starting a slideshow and passing it parameters via the anchor, then applying an anchor to each image via a js location.replace call.

<div class="floatbox" rev="group:1 titleAsCaption:false endTask:loop navType:none
 colorTheme:white roundCorners:none autoEndVideo:false modal:false cyclePauseOnHover:true
 contextCloseOnClick:false showPlayPause:false doSlideshow:true randomOrder:false
 pipIndexThumbs:false showIndexThumbs:false showItemNumber:false outsideClickCloses:false
 showNewWindowIcon:false showClose:false stickyDragResize:false enableImageResize:false
 splitResize:true startAtClick:false panelPadding:0 padding:0 outerBorder:0 autoStart:true
 imageFadeDuration:4 resizeDuration:5 autoFitImages:false boxTop:100">
            {% for img in imgs %}
            <a href="{{ img.image.url }}" rev="afterItemStart:`fb.fbContent.onclick =
 function() { location.replace(&#039;{% url views.artist img.artist.id %}&#039;); }`"></a>
            {% endfor %}

(django template...)

I've evaluated each setting but can't spot a conflict. Any chance you spot one?
Thanks in advance for any help you can give.

I think we're looking at a case of a round peg and square hole here. Floatbox does not integrate its content with the underlying base page, nor position itself in relation to elements on that base page. The whole point of Floatbox is that it covers or overlays the base page in its presentation of the content. Its frame of reference is the browser viewport, and the floatbox will be positioned as best it can to ensure that the content is visible within that viewport.

It sounds like you want to integrate the slideshow at a particular location on the base page - in effect, embedding the slide show on the page. Floatbox doesn't do that and might not be the right tool for your purposes. You could consider some tricks such as inserting an iframe at the desired location in your base page and showing a Floatbox slideshow inside that iframe. Or perhaps there is another tool that integrates slideshows with the base page rather than overlaying them.

Again, the whole point of Floatbox is that it overlays the main page content. This is precisely the behaviour you say you don't want. Floatbox's playground is the browser viewport, it will take steps to position its content within that viewport, and it has no consideration or interest in the main page elements or their locations.

You're right, I did feel bad about trying to remove the float from floatbox! I just went in a different direction and changed:

autoFitImages:false boxTop:100"

to:

autoFitImages:true autoFitSpace:75

which prevents the images from intruding across my 68px high header. This has the added bonus of sidestepping potential issues with that page in mobile, which I haven't tackled yet.

As always, thanks for the quick reply.

Ah yes, autoFitSpace. What impresses me about this solution is that it shows you have read the docs. Thanks!

Still, be aware that the "Float" in "Floatbox" is all relative to the screen and if the underlying page is scrolled down at all, your careful positioning relative to elements on that page will be out of whack.