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.