Hi.

My original image size is 1000 x 1000 pixels.

But i want a smaller floatbox of 500 x 500 pixels.

<div class="floatbox" data-fb-options="width:500 height:500">

Now the image scales to fit the 500 x 500 floatbox as I want but what can I add to my html code or options.js file so that the user will be able to use the resize magnifying tool in the middle of the image to expand the floatbox to 1000 x 1000 or reduce back to 500 x 500 pixels.

This type of functionality exists when the browser window is smaller than the floatbox but i would like this functionality to also expand or reduce between the specified floatbox window size and the original image size or some secondary floatbox size.

Can you suggest some way,
Thanks, Dave D

Don't set width and height. That will fix the "native" size of the image. Set maxContentHeight to 500. The floatbox won't open any larger than this, the image will be scaled proportionally (so you don't have to set maxContentWidth too), and the native size will be unmodified thus allowing the image to be resized up to that native size.

<div class="floatbox" data-fb-options="maxContentHeight:500">

Thanks this works great.

However once the image has been expanded to the image size of 1000 the reduce tool only appears when the browser window is smaller than the image size.

Also when clicking next image can I have the current floatbox size applied to the next image similar to stickyAutoFit: "true" functionality.

Thanks, Dave D

Sort of, and no.

To resize the box to an arbitrary size (i.e., not native size and not screen size), you would need to use the API fb.resize() function by putting a little clickable widget into a caption that calls resize when clicked. Not quite what you're looking for.

I can't think of any way to carry an arbitrary floatbox size over from one gallery set member to another.

Dam,
I really like the functionality of the maxConentHeight

But im not sure why after an image has been expanded to its original size that the reduce size tool is not provided when the browser window is larger than the original image size but is provided when the browser window is smaller than the original image size.

Do you know what i mean? I would like the reduce size tool for the full image size regardless of the browser window size.

Secondly, if would be great to have a stickysize functionality to work with the maxContentHeight.

I understand you have said my request is not really possible im jsut double checking you know what i mean and is this something we might see in future releases.

Thanks alot for your time. I will just be using the maxConentHeight feature as is for now. It is nice. Just would like a reduce tool and sticky resize with it. Dave D

The resize tool (either clicking on the image or on the optional magnify glass at the top left) toggles the image size between full native size and scaled down to fit the screen. It will always work that way.

If you want the user to be able to resize the image to some other dimensions, consider setting enableDragResize and allowing the image to be dragged to any size with the little hash-marked widget in the bottom right corner.

Hi I have an example here:

http://www.lotrarts.com/test

The magnify glass that appears in the middle of the image will not toggle between enlarging and reducing the floatbox it will only enlarge one time if the browser window is bigger than the image. However the magnify glass will toggle back and forth between enlarging and reducing only when the browser window is smaller than the image.

Do I have some options setting preventing what I want?
Hope you understand, Thanks

The resizer - either clicking the image with the mouse's magnify cursor or clicking the magnifier image in the top left corner if it's there - toggles the image either larger to its full native size or smaller to fit the screen. If full native size fits the screen, then there is no resizing down from native size that needs to be done to fit the screen. I think you're missing the point that the resizing down is to screen size. Again, if it's already at or less than screen size, then no shrinking is necessary or done. It does not shrink down to what might be set by maxContentHeight or maxContentWidth. It shrinks down to fit the screen.

All the options are described in the Options Reference. There is no built-in option or widget that will automatically size the image down to below what is necessary to fit the screen on mouse click. You could build such a widget using the API fb.resize() function, or you could set enableDragResize to allow users to drag the image smaller with mouse drags, but not clicks.

Ok cool thanks for the replies if its not possible atm then its not possible.

For my situation its not only about whether the full native size fits the screen and thats the end of the story. Its also about allowing the visitor to choose what size they want to view the images.

For example the thumbnails are a mini gallery, the floatbox maxContentHeight is close to the real life scale of a sketch card and the full native size is a 2xblowup.

I would prefer the visitor can toggle between the real life scale and the 2xblowup regardless of wether the 2xblowup fits in their browser screen along with a stickysize for previous and next images also.

Maybe this can come in a future release, Thanks Dave D

Sorry back again,

I have one other related issue.

I have:

Portrait Images: 1000 height 500 width
I want floatbox to display them 50% smaller: 500 height 250 width
ContentHeight:500 works and then allows the image to be magnified.

Landscape Images: 500 height 1000 width
ContentHeight:250 works for this too.

The Problem is when I have a gallery with both Portrait and Landscape if ContentHeight is set to 500 then the Landscape images will appear out of ratio etc.

Is it possible to set ContentHeight:50% or ContentScale:50% "width:50% height:50%" or something like that to achieve the result I want.

My only solution at the moment is to make separate galleries for Portrait and Landscape Images but this is not ideal visually for the way my thumbnail galleries must be displayed each on a new line its too many separations

Any advice appreciated thanks, Dave D

I can only suggest that you work with the Floatbox tool, and not against it. It won't be productive to imagine how you wish it might work with your atypical sizing requirements and then search for ways to force Floatbox to be something it is not.

You can check the Options Reference to see what the options can do. There is no option that sets the displayed image size to be a specified portion of the original image's native size.

For custom sizing requirements such as yours, you would need to get your hands dirty with custom code. The API function "fb.resize" may be of help to you here. You may be able to accomplish something using server side image manipulation in PHP code. Check out the "server-side image rotater" example on the Hi-Tech tab of the Floatbox demo page. This is serving up rotated copies of images, but the same general approach could serve up resized copies as well.

Good luck...