Align Additional Images

This is driving me batty. I cannot get the additional images to form a nice neat row. They just want to sit on top of each other.

I've got it set to have 3 images in a row in the Admin.

I can't tell if this is a style problem or something else.

Can someone look here and tell me what you think?

http://www.threestonesteps.com/cart/index.php?main_page=product_info&cPath=2&products_id=1

Ideally, those extra views would fit right under the big image.

mh71888:

This is driving me batty. I cannot get the additional images to form a nice neat row. They just want to sit on top of each other.

I've got it set to have 3 images in a row in the Admin.

I can't tell if this is a style problem or something else.

Can someone look here and tell me what you think?

http://www.threestonesteps.com/cart/index.php?main_page=product_info&cPath=2&products_id=1

Ideally, those extra views would fit right under the big image.

Well, its because you are out of room. The biggest problen is that there is no line break before the "larger image" link. There is a line break in a default zen install, so it looks like you changed that. If you can get the <br /> back right before: <span class="imgLinkAdditional">, then you'll have more space. I would reupload the original includes/modules/additional_images.php. Also, you can decrease the margin and padding on .additionalImages:
.additionalImages {margin:0!important;padding:0!important}

Thank you. It wasn't the line break tag, though (I took that out in order to try and fix it). It was the padding and margin. I probably just made it worse by taking out the line break. It's back now anyway. Thanks again.
:smile:

I'm having a similar problem, any help?

http://www.wolfandrabbit.com/index.php?main_page=product_info&cPath=65_73&products_id=187

TIA:ohmy:

tatiana77:

I'm having a similar problem, any help?

http://www.wolfandrabbit.com/index.php?main_page=product_info&cPath=65_73&products_id=187

TIA:ohmy:

Replace these section from your product_info.css with this:

#productAdditionalImages {
margin:0 auto;
width:100%;
clear:both;
text-align:center;
}

.additionalImages {
width:100%;
padding:0;
float:left;
margin:0 auto;
text-align:center;
}

.additionalImages img{
border:1px dashed #ff4474;
}

holy smokes you're a genius!!

Thank you thank you thank you [jumps for joy]

[breathes sigh of relief]

:laugh:

hi jettrue,

I've been having a similar problem.. as you can see I put:

#productMainImage {
padding: auto;
position:absolute;left:285px;top:285px
}

in my product_info_display, and I know from past experience this is a quick bandaid fix to position this main image, especially when it came to nice alignment in IE7... my question is, is there a proper way of aligning it to look like this? When my image slightly too high it overlaps the thumbnails beneath it instead of just shifting them down properly ... here's the link, hope you can help.

http://www.wolfandrabbit.com/index.php?main_page=product_info&cPath=65_74&products_id=189

TIA

PS It looks okay in IE7, but overlapping TN's in Firefox at the moment.

tatiana77:

hi jettrue,

I've been having a similar problem.. as you can see I put:

#productMainImage {
padding: auto;
position:absolute;left:285px;top:285px
}

in my product_info_display, and I know from past experience this is a quick bandaid fix to position this main image, especially when it came to nice alignment in IE7... my question is, is there a proper way of aligning it to look like this? When my image slightly too high it overlaps the thumbnails beneath it instead of just shifting them down properly ... here's the link, hope you can help.

http://www.wolfandrabbit.com/index.php?main_page=product_info&cPath=65_74&products_id=189

TIA

PS It looks okay in IE7, but overlapping TN's in Firefox at the moment.

Way too much css goin' on there :) ... replace the three sections below:

#imagebox {
float:left;
}

#productMainImage {
}

#productbox {
width:55%;
float:right;
}

ETA: Your site looks really nice!

Once again, I bow down to the fabulousness that is Jettrue. You are truly my savior of the day (Got kids? Can I cut you a discount on the clothing? )

I can't thank you enough, and I know.. wayyy too much CSS...:shocking:

Tatiana

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 :smile:

julie.t:

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 :smile:

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;

     }

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

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

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?main_page=product_info&cPath=1_2_36_37&products_id=59

Cheers,
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

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/store/index.php?main_page=product_info&cPath=1_3&products_id=1

Katie