Magnifying Glass not working?

Page: 1

Author Post
Member
Registered: Apr 2009
Posts: 81
On this page:

https://www.bibismv.com/23831-butterscotch-blankees-single-heart-hat

Click the thumbnail under the main photo that contains the colored blocks (this is a much larger image).

My tag looks like this:

<a class="floatbox naked" data-fb-options="caption:`Color Swatches`;maxHeight:80%;maxWidth:80%;panelPadding:10;colorTheme:white;group:main;" href="https://www.bibismv.com/scans/Bbblanketswatches.jpg" id=""><img src="https://www.bibismv.com/_thumb.asp?filename=Bbblanketswatches%2Ejpg&amp;dw=140&amp;dh=140"></a>

After the Floatbox opens, I see the magnifying glass in the upper-left corner, but clicking it doesn't enlarge the image further.

Are one of my settings causing that to not work?

Thank you.
Administrator
Registered: Aug 2008
Posts: 3382
The floatboxed links in question have the "naked" class on them, which assigns the naked class-options defined in the fbOptions.js file. These options include "inFrameResize: false", turning off the default inframe-resizing behaviour where the floatbox remains the same size and the image expands within it. Without inFrameResizing, the floatbox sizes itself up to accommodate the full image displayed at its native resolution, most likely larger than current browser display size.

However, your floatboxed links also include the directly assigned options "maxHeight:80%;maxWidth:80%;". This restricts the floatbox to a max size of 80% of the browser display, including a when a resize request is made to the box. (Perhaps it would be better if it allowed over-sizing from a resize request, but it does not.)

One approach to change the current behaviour would be to allow inFrameResize. This could be done by overriding the naked style setting by placing "inFrameResize: true" in data-fb-options. Another approach would be to remove the inFrameResize line from the options in fbOptions.js. Doing it this way has the benefit of being a single edit in a single place that will apply to all floatboxed links that use the naked class.

inFrameResize is turned off in the naked class because this style of resizing results in a somewhat awkward and non-intuitive display of a portion of the full-sized image with no floatbox frame to give it context. An alternate approach would be to leave inFrameResize disabled and allow the floatbox to grow larger than the screen if necessary by removing the maxWidth and maxHeight settings.

If the purpose of 'maxWidth' and 'maxHeight' is to prevent the floatbox from filling up too much of the browser window for aesthetic reasons, a viable alternative is to use the 'autoFitSpace' option instead. This is the minimum number of pixels to leave between the edges of an "autoFit" floatbox and the browser window edges, and it defaults to 5px. Try something like "autoFitSpace:35", or whatever, and see if the results are satisfactory.


Only partially related to the above is the observation that you have the floatbox classes and options duplicated on each of the thumbnail links on the page. This is fine, and it works, but could be simplified by placing those classes and options only once on a containing element and not have them appear at all on the contained links. In the case of your linked page, a containing element is already present: the <ul>. Make that look like the following and you can strip each of those contained links down to their basics of having only an 'href' attribute.
<ul class="addlphotos clearfix floatbox naked" data-fb-options="autoFitSpace:35;panelPadding:10;colorTheme:white;group:main;">
Member
Registered: Apr 2009
Posts: 81
Great, thanks!

Page: 1