How to put Attribute Images into Columns?

[beyre]

This is a slightly different question from my original concerning LOTS of attributes per product.

Refresh: office furniture store, roughly 222 fabrics per product (just not EVERY product in the store, but about 2/3 of the store).

I started adding the attributes to the following product.
The attributes themselves are listed in the drop down.
I am in the process of adding their associated images.

I have added the addon - Attribute Rollover
It just added a line of code to the attributes.php and some CSS.
http://www.zen-cart.com/index.php?ma...oducts_id=1765

Here's the product I'm currently working on:
http://www.caofficedesign.com/shop/i...roducts_id=260

Question:
It looks like, as I add the attribute images, that it will all be in one column. I'm thinking they can go at least 4 columns across.

How can I alter the code to achieve this, as I do not see anything anywhere under Configuration to set this.

Here's the code in /modules/attributes.php associated with attribute images:

// collect attribute image if it exists and to be drawn in table below
                  if ($products_options_names->fields['products_options_images_style'] == '0' or ($products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_FILE or $products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_TEXT or $products_options_names->fields['products_options_type'] == '0') ) {
                    if ($products_options->fields['attributes_image'] != '') {
                      $tmp_attributes_image_row++;

                      //              if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= '<br class="clearBoth" />' . "\n";
                        $tmp_attributes_image_row = 1;
                      }
// BOF ATTRIBUTE ROLLOVER CODE
                      $tmp_attributes_image .= '<div class="attribImg">' . '<a class="attribRoll" href="" onclick="return false;">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . '<i>' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . '</i>' . '</a>' . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . '</div>' . "\n";
// EOF ATTRIBUTE ROLLOVER CODE                    
					}
                  }

[lat9]

You might be able to style the page just using css. Try adding to your stylesheet.css:

.attribImg+br { display: none; }
.attribImg { float: left; }

You might need to fuss with the settings a bit, but that will get you close.

[beyre]

Ok, now we're getting somewhere.

Check that product page again ...

How come some thumbs are isolated on their own row? Ie: doesn't complete a row and skips down to the next?

This is great progress though ... thoroughly appreciate the help!

EDITED: Looks like the problem happens when there is a row where the image name takes up 2 lines ...

[beyre]

Thought you might want to see the whole CSS block for attributes

/*Attributes*/
.attribImg {width:20%;float:left;margin: 0.3em 0em;font-size:11px;}
.attribImg+br {display: none;}
/*default attribute image*/
a.attribRoll img {border:0; cursor:default; width:75px; height: 33px;}
/*link*/
a.attribRoll:hover {text-decoration:none; position:relative; cursor:default;}
/*currently hidden attribute image*/
a.attribRoll i {display:block; position:absolute; left:-9999px; opacity:0;
	-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
	 box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	 border-radius: 10px; }
/*revealed attribute image*/
a.attribRoll:hover i {top:-160px; left:30px; padding:10px; border:1px solid #aaa; background:#fff; opacity:1.0;}
a.attribRoll:hover i img {width:250px; height:110px;}

.attributesComments {}

[beyre]

Putting a bottom/top padding on the .attribImage ... while it did space out the rows from each other, it did not help with the above mentioned problem ... still trying though ...

Edited: I ended up changing the attribImage width from 20% to 25% ... changing from 5 across to 4 across.
That fixed the problem.

I would still rather have 5 across though if we could find a way to fix the previous problem.
5 across lessens the page scroll. As of this post, I am about 3/4 of the way through adding images (225 total).

[beyre]

Egads ... after switching to 4 across via changing the width % ... I started getting double lines of text again causing the rows beneath them to mess up.

How can I fix this? I still have about 75 images to add as of this post.

http://www.caofficedesign.com/shop/i...roducts_id=260

[beyre]

Although I'm waiting on the client's approval, I am sure he will say yes ... but I'm going to shorten the fabrics' names by deleting the GradeA/, GradeB/, etc ... that should do the trick and solve my problem.

[lat9]

Looks good (that's a lot of color swatches!) ...

[schoolboy]

As a user, I think this number of swatches is quite frightening. It's overkill, and besides... when I finally get to a colour I think I like it takes several scrolls to bet back to the drop-down... by which time I have forgotten what the colour's name is... and then I have to scroll right down again and look for it in that sea of swatches, and then I forget which one it was exactly, and then..

... well then I just go shop elsewhere.

I think it would be far better to separate out your colours into colour waves, and create separate product listing for each colour wave.

Reds
Blues
Greens
Greys
... etc

This creates a bit more admin for you (your client) but at least it won't annoy and frustrate potential customers... I can't see many visitors actually finding the current set-up helpful at all.

I just want to get outta there

[haredo]

Wander what she would look like if you change the Fabric Covering to a Radio button ...

admin panel/ catalog/ option name manager/ Fabric Covering

1. click edit and change to a radio button