Hi @j9design
The issue here is that the first row of three images in the “Interieuradvies Vries” category are wrapped in a DIV with a class of gallery on it. The way FooBox initializes itself is that it simply loops through a list of CSS selectors and builds the required lightbox(es). The first selector in this list is .gallery so what is happening currently is that FooBox is initializing in the page, it finds the DIV.gallery containing the first three images and constructs a lightbox for them. While building the initial lightbox for these three images it sees that they are using the rel=gallery attribute and so it then queries the page for any other elements with rel=gallery and includes them into the lightbox in the order they are found. This is why your large image is appearing as image number four and not image number one.
Unfortunately in the free version there is no option to change the selectors or the order in which they are executed. That said there are a couple options to work around the issue:
1. You could remove or change the name of the gallery class which has been added to the DIV containing the first three images.
2. Or you could try adding the gallery class to the DIV container around the large primary image. FooBox works from the top of the DOM down to the bottom so adding the gallery CSS class to the primary image container should force FooBox to initialize on it first and then include the rest of the rel=gallery items in the page in the order they are found.
Thanks
Steve
