Hi,
Firstly, a big thank you for your floatbox.

Secondly, as I have some problems, I submitted a file for testing at:
http://isap29.free.fr/test/arizona/05_tucson.html

I begin an images gallery with the last photo of this html page ("startup image", not an image of the galery).I want to display thumbnails when hovering indexes (on top right).

Thumbnails are in a different directory with and without (duplicated) an _thm at the end of the name (same name as images). Also, for testing, in the same directory of images, with _thm.

If I put indexThumbSource on the div, I never see any thumbnail; if I don't put it, I only have a thumbnail on the first index, but it's the "startup image", not the thumbnail of the first image (I hope to be clear).

Can you explain to me where is(are) my mistake(s)?

Thirdly, is it possible to have the label "Info" (GPS for me) at the right of ItemNumber?
If not possible, is it possible to always have ItemNumber at the same place in the galery, even if the image has a "info" or not?

Fourthly, if you look at the secondary box (GPS), the background color is red (for testing); how can I put this color upon the 2 others white parts? I put this color on a class "gps" which include the text (inside a hidden div, which contains all the GPS infos for the group).

Fifthly, if you compare the test page with my first one :
http://isap29.free.fr/test/arizona/05_tucson.html
it seems to me that "transition" between pictures isn't the same but I don't find where (or what) is the difference; can you help me!

A last question, after uploading. The corners of the first box are rounded and the close button is the outer while, in the option.js file, it's only for the childOptions (GPS box for me) and this is the case on my computer (local files).

Best regards.

PS : I beg your pardon for mistakes, english isn't my native language.

1. Thanks. Cheers!

2. The indexThumbSource you have set is "./05_tucson_fichiers/joshua/thm". That's not an image, so it cannot be a thumbnail source. Further, indexThumbSource is set on a containing div element which means it will be applied to each floatboxed link within that div. It does not make sense to use this option in this way as you don't want the same thumbnail to appear for each index link. Place the indexThumbSource option on each link individually, and set its value to the path of the thumbnail image that you want to use.

3. The placement of the "Info..." link and the "image x of y" text is determined by the infoLinkPos and itemNumberPos options. These both default to "bl", which means the bottom-left corner. When both these things are in the same corner, they will appear side-by-side with the "Info..." link placed closest to the outside of the box. If both these things are in the same corner on the left side of the box, the order will be infoLink on the left and itemNumber on the right. If they are both placed in the same corner on the right side of the box, the order will be reversed with itemNumber on the left and infoLink on the right. Probably the best way to make sure the infoLink does not displace the itemNumber would be to separate the two into different corners. You can move everything in the frame area around with the *Pos options. Find a layout you like, perhaps by moving the info link to "tl" or "tc", or any other of a multitude of possibilities.

4. The red and white areas in the GPS "info" box are in the content that is being shown in the box. It's up to you to author (and style) the content. Make the white areas red by assigning a red background color to them. But, Floatbox can help if you like. Right now, those "white" areas are actually transparent. You can use the Floatbox option "backgroundColor:red" to put a red backdrop behind your content which will show through those transparent areas.

5. The link to the first page referenced in the "Secondly" paragraph is exactly the same link as in the "Fithly" paragraph. Being the same page, it of course has the same transitions as itself, which in this case is no transitions at all. Use the imageTransition and transitionDuration options to setup whatever transitions you prefer.

6. There are no round corners nor outerClose button on the initial image floatboxes on that test page. Perhaps you need to flush your browser cache.

7. Thank you for not posting a #7.

Hi Byron,

and many thanks for your so quick response.

2. On indexThumbSource, I misunderstood ; I believed it was a directory (img filePath in your doc), not a file. I have corrected it and it's ok.

3. OK

4. I tried background-color in childOptions in option.js => floatbox is dead .
I tried background-color in
<div class="gps" id="joshua2_isa88" style="background-color:#00ff00;">
but with the same effect than red before (background-color:#00ff00; in class gps in custom css).
I tried background-color in
<div class="floatbox" data-fb-options="group:joshua2 infoOptions:`width:500 height:70`" style="background-color:#ffffe7;">
I even try contentBackgroundColor:green in data-fb-options
I don't understand on which item put the background-color property.

6. I don't understand what happened.

Best regards.

The Floatbox option name is backgroundColor, not background-color. In javascript, 'background-color' is an arithmetic expression and the interpreter will try to subtract the value of the variable named 'color' from the value of the variable named 'background'. Neither of these variables exist and so the interpreter stops on an error, options.js does not finish executing and floatbox does not run. There are no hyphens or minus signs in any Floatbox option names.

Hi Byron,

I apologize for my mistakes . All is OK now.

Many thanks and best regards.