terrymun/Fluidbox

Update max-width

Closed this issue · 7 comments

bennyb commented

Thanks for the super quick fix on data-fluidbox-max-width issue.

I want to amend the max width depending on browser width. So i'm adjusting the data-fluidbox-max-width value on resize but fluidbox uses the old values. Any way to refresh and use the new-max-width values.

terrymun commented

Is there any reason why you want to do that? Fluidbox already attempt to fit the image to the viewport dimensions—there is no need to dynamically adjust the data-fluidbox-max-width property. Also, the property is only read when Fluidbox initialises and it's stored internally within each instance, and there is so far no API to modify that.

You might want to try looking at the viewportFill setting instead, which dictates the maximum fill ratio along the shorter axis.

bennyb commented

I'm inserting some caption text to right of the image so need to make sure there's enough space for this.

terrymun commented

The only way you can do it for now is to destroy the Fluidbox instance, and re-initialize it when the data-fluidbox-max-width attribute has been updated. But this is likely to be extremely unperformant if you're updating this attribute on the fly at every tick of the window/viewport resize event.

Alternatively you can settle for a percentage-based width for the caption, but I don't think this is what you want in the end.

bennyb commented

Yeah i was thinking that was going to be the only way. I'll add some throttling on the resize so it's not called and i'll probably only amend the max width on certain break points.

Thanks for the quick responses, much appreciated.

mr-aleks commented

I have a question how to do that by clicking the image to scale it up to 100% rather than to the maximum width / height of the window?

terrymun commented

@bennyb You can probably hack the plugin the way you want. Instead of relying on merged settings, you can change the lines in this code block so that instead of referring to fb.settings.maxWidth, you can check for $fb.attr('data-fluidbox-max-width') instead. Note that if this is the case, you will have to enforce a default fallback to 0 yourself.

@mr-aleks That is not possible with the current setup of the plugin. You will have to hack your way through the logic around this code block. This part of the code ensures that blown up image will always fit within the viewport. In this case, imgScaleX, imgScaleY, and imgScaleMin will be identical, since you simply want to scale to 100% without restrictions. Something like this will probably work:

imgScaleX = imgNatW / imgW;
imgScaleY = imgScaleX;
imgScaleMin = imgScaleX;
mr-aleks commented

@terrymun I have one more question, I can not understand why not working JS fluidbox
But I found an example on sodepen Fluidbox (v1.3)
By copying JS the script from there it worked, and if connected via a link or downloaded file does not work at all. I'm not good at JS
Once I have copied from there JS and connected as in the example jquery.imagesloaded.min.js it work !!!
Yes, I'm not good at JS
I can not understand what's the Problem?

I'm sorry, I write your questions in this thread, I do not want to create a new on minor issues.