Hi -
I'd like to show a page of thumbsnails, and when one is clicked a floatbox window appears. When the "next" button is clicked another image related to that thumb will appear, and so on. So a group of images can be viewed relating to that thumbnail

All the thumbnails will each have a group of images relating to its self.

Is this possible?

I know rel="floatboxGroup" will group images, but will it work for my purpose if I use floatboxGroup1, floatboxGroup2, floatboxGroup3 and so on?

Any help will be much appreciated!

Rob
http://www.astro-logix.com/

Yes, that's exactly how grouping works. The grouping strings are arbitrary strings. You just need to match them across each item you want in the group. You can have multiple groups using different group names on the same page.

The rel syntax you quoted works just fine. Version 3.50 also has a "group" option you can use instead. (Described in the docs).

Unrelated, but to give you a heads-up.
I see you have an xml prolog of <?xml version="1.0" encoding="iso-8859-1"?> on your pages before the doc type. If you are planning on implementing floatbox, please note that that xml prolog will prevent floatbox from working on IE6. Anything before the doc type declaration will put IE6 into quirks mode, and floatbox won't run on quirks mode pages. text/html pages shouldn't really have that prolog anyway. You may want to remove it.

Cheers...

Hi admin -
Thanks, I'll change the doc type.

I've tried grouping the images like this: rev="group:pix" and rev="group:photos". I turned the autogallery to true. Yet all the images are shown as one group.

What am I doing wrong?

I also want to group photos that are not shown as links/thumbs on the page. So one thumb will show a gallery of other images that aren't visible on the page.

Cheers,
Rob

Hi again -
I just read an answer to another user's previous question, which answers one of mine:

>>I also want to group photos that are not shown as links/thumbs on the page. So one thumb will show a gallery of other images that aren't visible on the page.<<
The answer is to not have an image tag between the <a href> & </a> tags. Obvious once you know!!

All I need to know now is how to have separate groups....

Cheers,
Rob

Turn off autoGallery. That's for creating a big gallery set of every image on a page without adding any floatbox markup to the anchors that link to those images.

Hi -
Still no luck. I have 5 thumbs on a test page. I have used this code for 2 of them:
<a href="images/......JPG" rel="floatbox" title="......" rev="group:pics"></a>

and this code for 3 of them:
<a href="images/......JPG" rel="floatbox" title="......" rev="group:photos"></a>

If I click on any of the thumbs, the pop-up doesn't appear grouped with the other images, eg there are no "previous/next" links.

Cheers,
Rob

Oh, you're probably using an older version of floatbox. Prior to version 3.50, put your grouping string in the rel attributes.

Like this:
rel="floatbox.photos"
rel="floatbox.pics"

Just a general comment to all readers: if at all possible, please provide a link to a page that exhibits your problem. With that, we can usually get your questions answered or problems solved right away.

Cheers...

Hello - DON'T LAUGH -
I'm trying to group images with one thumbnail showing and 3 others hidden under neath so that when a users selects the image it shows there are 4 images and they can next/prev and view them. is this the correct way to do this? or is there a much simpler method? You'll see that after the first image I just changed the width/height to 1px so they are hidden.

<div id="html1" style="position:absolute; overflow:hidden; left:29px; top:76px; width:322px; height:585px; z-index:0">
<a href="photos/bellevue1.jpg" rel="floatbox.bell" title="Bellevue" rev="showPrint:false info:bellevue.pdf infoOptions: showPrint:false printCSS:/includes/main.css`"><img src="thumbs/bellevue1.jpg" alt="" /></a>
</div>
<div id="html1" style="position:absolute; overflow:hidden; left:29px; top:76px; width:1px; height:1px; z-index:0">
<a href="photos/bellevue2.jpg" rel="floatbox.bell" title="Bellevue" rev="showPrint:false info:bellevue.pdf infoOptions: showPrint:false printCSS:/includes/main.css`"><img src="thumbs/bellevue2.jpg" alt="" /></a>
</div>
<div id="html1" style="position:absolute; overflow:hidden; left:29px; top:76px; width:1px; height:1px; z-index:0">
<a href="photos/bellevue3.jpg" rel="floatbox.bell" title="Bellevue" rev="showPrint:false info:bellevue.pdf infoOptions: showPrint:false printCSS:/includes/main.css`"><img src="thumbs/bellevue3.jpg" alt="" /></a>
</div>
<div id="html1" style="position:absolute; overflow:hidden; left:29px; top:76px; width:1px; height:1px; z-index:0">
<a href="photos/bellevue4.jpg" rel="floatbox.bell" title="Bellevue" rev="showPrint:false info:bellevue.pdf infoOptions: showPrint:false printCSS:/includes/main.css`"><img src="thumbs/bellevue4.jpg" alt="" /></a>
</div>

It works but I think I'm doing this not correct...

Hi -
I reduced the images down to zero.

Here's a link to a page on my site http://www.astro-logix.com/prices_uk.html . Scroll down to the bottom of the page, then click the colourful thumb. An image will popup, which will show other hidden ones (like how you describe).

This is an excellent script!

Cheers,
Rob

www.astro-logix.com

Thank you Rob - Just wanted to know if I was on the right track....

See posting #3 in this thread.