Hi,

I?m implementing your script (great one) using Asp.net and Ajax. I have a product details page when i show a main picture and alternate views.

My problem is when i change product color and refresh the main and alternate pictures using ajax (update panel) i call a function when the postaback is done (fb.tagAnchors(document);) until here everything is all right, the problem begins when i open a picture the gallery keeps me the images from the past product (color).

How can i avoid this or what im doing wrong??

I hope you can help me...

Thanks.

Well, I don't really understand the details but I've formed my own picture of what you are doing by filling in some assumptions. As with most problem situations, it would be so much easier to be able to see an online example.

When you refresh the main and alternate pictures on your page, do you also refresh the href in the links that load your new images into floatbox? If the href is not altered prior to calling tagAnchors then the link will of course open the same images as before.

Ok, thank you for your interest, you can see an online demo [url=http://www.pragaurban.com/productdetails.aspx?id=637
]here[/url]

To see what im talking about follow this steps:

1. Click on the main picture and you will see a gallery of 2 pictures (main and alternate view)

2. Change in the dropdownlist (Talla/Color ) to another size and color, for example choose the last one (12|azul)

The main picture and alternate views will change with a new product (blue)

3. Click again in any of the pictures and navigate throw all the gallery, you will see there will be 6 images and there only should be 4 , (just the blue ones)


pd. sorry for my english, i try to explain the best i can ..

and again thanks a lot !.

Now I see what you mean.

The page loads and tagAnchors does its thing by inventorying all floatbox items on the page. Then the user selects a different item to view and ajax adds/modifies links with new images and anchors for the newly selected item. After the ajax page modifications happen, tagAnchors is run again to inventory and tag the new anchors. Those new anchors have the same rel tag as the previous ones, namely "floatbox.group". So, they are added to the existing group of floatboxed anchors. Now when the floated images of the newly selected product are shown, both sets of images for the old and the new product are included in the group, but you want only the new product to be in there.

Well, the behaviour you're seeing really is reasonable behaviour. Because all those links have been inventoried with the matching rel attribute of floatbox.group, the floatbox code can only assume that you want them all in the same grouping. The way to seperate them out into their individual groupings is to give them group names (rel attributes) unique to each product grouping. Instead of using rel=floatbox.group for everything, you should be using rel=floatbox.productID, where productID is a unique identifier that reflects the true grouping you are trying to achieve. For example, on the page you reference, you could group the set of images for the black shoes with a rel attribute of rel=floatbox.negro and use rel=floatbox.azul to group the blue images.

Floatbox will group the items however you tell it to based on matching rel attributes, and right now you're telling it that all the product views are in the same group.

It may also work for you to clear the list of already inventoried anchors immediately prior to calling fb.tagAnchors(document);. Do this with fb.anchors.length = 0;

Hi, You save me at least 1 or 2 nigths trying to figure this out.

I change my code like you said adding the productID to the floatbox group and now i got the result i was expecting.

Im really appreciate your help!!.

Thanks you very much.

Thanks for this. Floatbox is fantastic, and "fb.anchors.length = 0;" has solved a similar problem I was having.