Align Additional Images

[jettrue]

I am also having trouble getting the additional images to line up horizontally. I have moved them right underneath the main image and they are going down in a row instead of in columns. I have a stylesheet just for this page.

#productAdditionalImages {
clear:both;
margin:0pt auto;
text-align:center;
width:100%;
}
.additionalImages {
float:left;
margin:0pt auto 18px;
padding:0pt;
text-align:center;
width:100%;
}

.additionalImages img{
border:1px dashed #C5CEA5;
padding: 5px;
}

I have tried most of the fixes posted here but still no luck. If someone could take a look that would be great. Here is a link to the page.

Hope you can help

Ok, the biggest issue is that in your main stylesheet you changed .back from:

.back {float:left;}

to

.back {clear:both;}

Now, the product additional images uses .back to make it float left.

But if you change it .back back to the original, it messes up the rest of your layout; I'm guessing you changed a lot.

So, instead, add this to your css (the main stylesheet, or your extra one, doesn't matter):

#productAdditionalImages .back {clear:none!important;float:left;}

and then change this (in your main stylesheet):

.buttonRow back, .buttonRowforward, #cartAdd, #productTellFriendLink,  #productAdditionalImages, .imgLinkAdditional        {
        margin-left: auto; margin-right: auto; padding: 20px;

     }

to this:

.buttonRow back, .buttonRowforward, #cartAdd, #productTellFriendLink,  .imgLinkAdditional        {
        margin-left: auto; margin-right: auto; padding: 20px;

     }

[julie.t]

Thank you Jade! I really appreciate your help. It worked great.

One last question - How do I get the images closer together?

[chrx]

I wanted to cozy-up my additional images in the row. By default, if there were two additional images, there was way too much room between them. The postings above got me looking in the right places, which then led me to notice some settings on the additional_images.php in the includes/modules/ directory.

In additional_images.php, I changed the default:

if ($num_images) {
$row = 0;
$col = 0;
if ($num_images < IMAGES_AUTO_ADDED || IMAGES_AUTO_ADDED == 0 ) {
$col_width = floor(100/$num_images);
} else {
$col_width = floor(100/IMAGES_AUTO_ADDED);
}


to:

if ($num_images) {
$row = 0;
$col = 0;
if ($num_images < IMAGES_AUTO_ADDED || IMAGES_AUTO_ADDED == 0 ) {
$col_width = floor(44/$num_images);
} else {
$col_width = floor(44/IMAGES_AUTO_ADDED);
}


The 100 assignment makes one additional image use 100% of the allotted space, 50% for two additional images, etc.

Changing this to 44 makes a single image use 44% of the space, two images each use 22%, etc.

See a sample here:
http://www.bhjdynamics.com/index.php...products_id=59

Cheers,
chrx

[chrx]

Forgot to mention, the flaw here...

I am only expecting to have a maximum of 2 additional images per item, so this works well in my case. More items will eventually make the images run over each other, as they are only allowed 44% of the width of the page to display, so this will not work as well if you have more additional images to show.

If there is a more fool-proof way to make the images closer and flush-left (without changing the text alignment), I'm open to suggestions!

Cheers,
chrx

[lucky__starre]

I don't know if this is possible, but I want to align the additional images in line with the main image in a column down the left hand side, with the product info text wrapped alongside.

I have currently set up to have just 1 additional image display & changed my tpl_product_info_display so the additional images are positioned below the main image, but I can't get the text to wrap around them.

Example here:
http://www.wiredforfibre.com.au/stor...&products_id=1

Katie