Additional Product Images Layout , Specifically Width?

[wussyib]

Hi Everyone. I'm very new to Zen Cart, this is my first experience with it. So far loving it (especially compared to the mess that is Magento).

I'm at my first wall. EVERY question I had to date has been answered by a quick google/forum search except this one. I can't for the life of me figure out how to access the width of the div that encapsulates the additional product images. It's hardcoded somewhere as an inline style at width=50%, and it's making it impossible to actually put 3 in a row like it's dictated in the admin>config.

Here's the page.

http://www.shopgoldenpony.com/index....products_id=33

As you can see, I set the class .additionalImages background to black so it illustrates my point. If you view the source, there's an inline style in there forcing it to 50% (which the black also seems to confirm, since it looks like half the main column). This makes it impossible for the images to go in a single row. Floating doesn't seem to solve anything.

Where is this inline style coming from? I did source search in the chain of tpl files additional images require, and there's nothing to be found.

Thanks in advance!

[schoolboy]

In admin >>> images

what is your setting for:
Product Info - Number of Additional Images per Row?

[wussyib]

It's set to 3. Just to eliminate that as the issue, I've tried 2,3,4, and 5.

I'm convinced that it's because something is inserting that width="50%" inline style that I can't override. Looking in the php code, it seems to be drawing that style dynamically from somewhere, but I don't know where the actual value is set. Can't find it anywhere in the admin, and it seems uncharacteristic for Zen cart to use a hardcoded inline style.

[wussyib]

Nevermind. I figured it out.

I changed the layout of the product info page, causing the #productAdditionalImages div, which wraps outside of the .additionalimages div, to get pushed up next to my main product image. This prevented the additional images from being "spread out" because it assumes it's going the full span, left to right, of the main column.

When I put the additional images right next to the main product image, the main product image was essentially squishing the additional images and robbing it of space, forcing it to stack on top of each other, instead of side by side.

This was all fixed easily, by adding an ID to the style sheet

#productAdditionalImages {
clear:both;
}

This ensures that the additional images get put below any other product info element, and they don't get squished.

For future reference, that inline style width=50% i was asking about, is NOT dynamically created by the admin > config > additional images in a row. Even if you set that to 3 (which should logically make the inline style width 33% for each image div), it doesn't. Zen Cart sets the image width AFTER you actually populate each allowable slot. So once you actually have 3 additional images, it'll dynamically set the width to 33%. If you have it set to 3, but only have 2 images, it'll still set it at 50%, which is what I had going on.