Floatbox on a Responsive Layout

Page: 1

Author Post
Member
Registered: Jan 2012
Posts: 98
I am developing a website with a responsive layout, that includes floatbox to pop-up images from thumbnails.

The difficulty I have is that the floatbox is appearing overlarge on a mobile screen. The image appears to autoResize to suit the screen but it leaves big left and right margins so the whole thing has to be scrolled sideways to view the image.

Each thumbnail link consists of something like
<div id="title1" style="display:none">TitleText</div>
<div id="info1" style="display:none; padding:6px">CaptionText</div>
<div class="pic p1"><a href="images/cos/folder/image.jpg" class="floatbox" data-fb-options="className:upload, caption:#title1, info:#info1, group:1"><img src="images/cos/folder/image.jpg"></a></div>

and the options.js file contains
globalOptions: {
licenseKey: "",
endTask: "loop",
disableScroll:true,
showNavOverlay: "once",
shadowType: "hybrid",
boxCornerRadius: 6,
slideInterval: 3.5,
doSlideshow: true,
minBoxHeight: 200,
minBoxWidth: 520,
strongTextColor: "#333333",
overlayColor: "white",
boxColor: "white",
transitionDuration: 5,
resizeDuration: 5,
overlayOpacity: 40,
padding: 12,
outerBorder: 0,
showIE6EndOfLife: true
},

classOptions: {
upload: {
infoOptions:"width:280, minBoxHeight: 80, minBoxWidth: 260, boxColor:#fefefe|#e5e5e5, contentBackgroundColor:#f8f8f8, boxTopAdjust:10000",
infoText: "More info...",
captionPos: "tc"
},

},


I have tested this on a LG G3 running Android 5 and an iPhone 3 running a very old iOS and the same thing happens. It all works fine on a PC with a normal screen width, but exhibits the same problem when the window is squeezed down to simulate a mobile phone screen. Even the nag screen (no licence yet) exhibits the same problem.

A sample page to see the problem is
http://www.made-in-england.info/company.php?co_id=1

In passing, I have noticed something with Info Boxes that seems a bit odd. By default, the info box appears very high on the screen so I tried to lower it with boxTopAdjust. It sort-of works, but seems resistant to lowering the box more than about 100 pixels from the default position, regardless of what value is given to boxTopAdjust.
Administrator
Registered: Aug 2008
Posts: 3382
minBoxWidth and minBoxHeight are set in the globalOptions. The box is respecting that request and not getting smaller than that, while the image scales to the screen due to the autoFit request. I think if you remove those two settings you'll get the better fit you're looking for. Those two options aren't very useful. The only use I've seen for them is to set their values to a large percentage of the screen, say 90% or so, and have the frame fill the screen while the image can be quite a bit smaller in the center of the frame. To put a hard px value on those options will instruct them to be larger than the screen if the screen is smaller than the px value.

I don't know what's up with info... box position. They're opening up pretty much centered vertically and somewhat to the left for me. I see a large value of 10000px on the boxTopAdjust option. Floatbox won't let you do that. It won't display outside of the screen limits. It figures if you're opening something up in a floatbox, you want people to be able to see it, and thus it always repositions odd requests back into the screen boundaries.

That version is getting pretty long in the tooth. Consider upgrading. There's lots of quirks that get ironed out with each new release, and my first response to odd behaviour in old versions is, "does it behave in the most recent version"? If yes, we're done.
Member
Registered: Jan 2012
Posts: 98
So simple! minBoxWidth and minBoxHeight were leftovers from stuff I copied over from another instance of Floatbox. It seemed like the easiest way of getting up and running quickly, but obviously it has traps for the foolish and unwary.

The 10000 setting on boxTopAdjust was deliberately OTT. Setting it to 100 moves the box down a bit from the default, but I need more. 200 doesn't seem any different to 100. On the face of it, 500 should be about 2/3 of my screen but only moves it a little bit further. 1000 is not noticeably different. It seems as if the "pixels" are "micropixels" and the whole thing runs out of puff when it would go off the screen if it was working with real pixels. As long as it continues to work consistently, I won't worry about it too much.

I'm aware that I'm on an old version of Floatbox, but when I looked at version 6 before, there seemed to be quite a lot of changes to be made to makee it behave like version 5. It didn't seem worth the trouble at the time.

Page: 1