Hi there,

first of all: Congrats to your great work! This is the best kind of Lightbox I've tested so far (and I tested nearly all ). A Multi-License will follow soon.

I'm curious if you are open-minded for feature-requests. Mainly, there are two things I'm still missing (I'm hosting an artist-board whith many pictures):

1.) Some kind of incremental Zoom within the box would be great. Now, there's "only" scaling the box or enlarging the whole image to max-size. Maybe you already know it or want to take a look at the "Lightbox Plus" (http://serennz.sakura.ne.jp/toybox/lightbox/), it has a really cool zooming-feature.

2.) Having the possibility to rotate pictures would be a nice feature, too (like in Clearbox 3, http://www.clearbox.hu/index_en.html).

Do you see any chance for implementing such things?

Many thanks in advance for getting into this,
Jan

Thanks. I'm VERY interested in hearing what people would like to see in Floatbox. The best advances in the package have come from people reporting what they need in order for their sites to work the way they want.

The resizing capability you are describing in #1 has been part of Floatbox since day one.

The default setting for the resizeImages option is true. This works in conjunction with autoFitImages. When an image is too large to appear at its native size and still fit within the browser viewport, and has been scaled down to fit by autoFitImages, it can be toggled between full size and screen size with mouse clicks.

A companion setting, resizeTool determines what visual indicator is used for the resizing. The default setting of 'cursor' will change the mouse cursor to a '+' magnifying glass if the image is currently smaller than its native size and to a '-' magnifying glass if the image is larger than the screen. resizeTool can be set to 'topleft' to show an always present translucent magnifying glass in the top left corner of the image that can be clicked to do the resizing. (Note that Opera and most browsers on the Mac will always use the 'topleft' widget because they cannot show custom cursors.)

Semi-related is the enableDragResize option which, if set to true, will show a small resize area at the bottom right of the floatbox that can be mouse-dragged to proportionally resize the box to any dimension.

Check out the wide image at the top of the demo page to see the click-to-resize behaviour in action. (You may have to narrow your browser to make it smaller than the native image.) While you're on the demo page, use the "Set Options" link up at the top left to set resizeTool to 'topleft' and to check the enableDragResize check-box to see the effect of those two settings.

As for #2, the ability to rotate images 90 degrees one way or the other, I don't have any interest in implementing that. It strikes me as a fairly useless gimmick and I don't see any value in bloating up Floatbox's code and options with that capability. Photos should be presented in their proper orientation.

Thanks for your quick response!

Most likely I haven't explain the reasons too well (due to English is not my native language), but I'll give it a try

admin wrote

The resizing capability you are describing in #1 has been part of Floatbox since day one.

You're right, of course, this is exactly what I meant when I tried to describe the existing possibilities of Floatbox. Now there exist two major possibilities: Either fit the image someway on the visible screen (scaled, resized, fitted, etc.), OR make a maximum ZOOM. If you have large image, you can easily imagine that you need to scroll a lot with the browser, never knowing where exactly you are on the picture. It is impossible at the moment to zoom to a specific point within the existing view (somewhat like Google-maps - don't show the whole earth at once , instead keep the actual window-size and zoom into the picture (by mousewheel, doubleclick, and dragging the picture within the viewport). Please take a look at the specific solution with "Lightbox Plus", it would be a great benefit to have such a zoom-function, especially for high-resolution images.

admin wrote

As for #2, the ability to rotate images 90 degrees one way or the other, I don't have any interest in implementing that. It strikes me as a fairly useless gimmick and I don't see any value in bloating up Floatbox's code and options with that capability. Photos should be presented in their proper orientation.

I agree that this is unnecessary for most images, especially photos. But also imagine special images, that are no photographies: E.g. maps, architectural blueprints, designs, or shots with no special orientation (Sky, Planet, Star-constellations, Zodiacs, or top-view earth-images, etc). There are plenty of examples where it would be very useful to have such a direct rotation possibility. In my special interest, it's paintings: We have many artists who like to rotate pictures, mostly abstractive paintings, but also portrait-specialist for comparing-reasons and so on.

If these are too special requests, I can live with that

At this point, the incremental zoom that Jan is describing is probably the only thing I can think of that I would want added to Floatbox. Although the application as written is the best I have used, incremental zoom would make it even better.

Ok folks, someone is going to have to explain "incremental zoom" to me very slowly and patiently as if I'm a moron. What kind of zoom is that that Floatbox isn't doing already?

I do see the ability to drag the over-sized image around with the mouse, but you can already do this in Floatbox too. The only thing I saw on the linked page that Floatbox doesn't have is the little map of rectangles that shows an outline of what portion of the image is currently on screen. But this isn't what we're talking about is it???

Are we talking about the ability to use the mousewheel to resize instead of dragging on the resizer widget at the bottom right (when it's enabled)?

OK, I'll give it a try to precise it more technically and practically:

First, take a veeeeery large picture , e.g. 3.000 x 2000 px (much wider than an average flatscreen).
Then use the current zoom-function - whoops, it's showing its full size (like expected), but that means you currently see only the upper left part of the picture on your screen, the rest is hidden somewhere in the extended scrollarea of the browser. Also to mention, that dragging is now not possible on the picture when you're in gallery-mode, since the complete left third of the picture is a link to the previous image (handling-problem).

Now to a possible solution, and what I understand under "incremental":
- Make an extra selectable zoom-option for keeping the actual or maximum screen-fit size (!) of the Floatbox when zoom is triggered. Don't make the Floatbox wider than the screen is.
- Instead of resizing the complete Floatbox, just show the visible part of the zoomed image within this fully-visible Floatbox.
- Make the picture draggable INSIDE the Floatbox, not the Floatbox itself.
- Best would be to make the zoomfactor "incremental". So not only "fit to screen" or "full-zoom" (like it's now), but with several zoom-steps (let the user decide how deep he wants to zoom in - from a little more zoom to max-zoom, without altering the size of the Floatbox).

Technically this shouldn't be too hard to accomplish, since most of the basecoding would be nearly the same. But practically it would be a great difference, looks much more professional and gives the user a better handling for large images.

A fine example is shown on the link that Jan provided http://serennz.sakura.ne.jp/toybox/lightbox/. Click on the second image (sample 2) and when the larger image appears, click on the expansion (zoom) icon in the upper left hand corner of the image. Roll the mouse wheel forward and backward to initiate a variable zoom (x1, x1.5, x2, x3, all the way up to full size.

@JK2011
Aaahhh! Thank You!

I think what threw me off from understanding was that lightbox+ that you linked to doesn't do that. Click the resize and the box resizes up with the image - same as Floatbox.

Interesting that you mention the inability to move an image by dragging on its left (or right) third (because the navigation panel is there). This evening I have released a Floatbox version update and this was one of things fixed in that release. As of 4.24 you can drag things around from any place on the image.

@SteveS
Unlike JK's estimate of the ease of implementing the alternate resize behaviour, it shouldn't be too difficult to implement mouse-wheel resizing.

Cheers, and thanks for your patience in getting this through my skull.

admin wrote

Interesting that you mention the inability to move an image by dragging on its left (or right) third (because the navigation panel is there). This evening I have released a Floatbox version update and this was one of things fixed in that release.

Hehe, just read the info - good timing

admin wrote

Cheers, and thanks for your patience in getting this through my skull.

You're welcome, and thank you very much for going into this!

Hello again,

while doing some customizations, I was wondering if something like a fullscreen overlay would be thinkable for presentation?

As far as I know, this is not (or at least not good) possible with pure javascript, is it? But a flash-based solution could already be done like in your code-examples with ActionsScript.

Maybe, there's a little chance you could implement a simple and basic fullscreen-overlay function in the package some day?