additional images spacing

Hi,

I need to reduce the size of the space created around each of the additional images I've added to a product page. I want four additional images across (this has been set in the admin). The images are only 100 x 100. They should fit and in FF they do. The problem is IE. The fourth images is getting pushed down to the next row.

The columns appear to be too wide. When I pulled up the HTML there was this line of code:

If I change that 25% to 20% it does the trick. Now, how do I change that so it really changes? Is this even how I should go about this???? Where are the html files and should I be editing them?

This is really driving me crazy. I've tried changing all kinds of css but nothing works.

Any help would be greatly appreciated.:blush:

The URL for the page with the additional images is:

http://69.89.31.83/~egallant/ZenCart/index.php?main_page=product_info&cPath=1&products_id=23

Again, it's IE that has the display problem.

A search in the Developers Toolkit for class="additionalImages shows this:

/includes/modules/additional_images.php

Line #102 : $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',

and a search on $col_width shows:

/includes/modules/additional_images.php

Line #75 : $col_width = floor(100/$num_images);

Line #77 : $col_width = floor(100/IMAGES_AUTO_ADDED);

Change line 75 to

$col_width = floor(100/$num_images) - 1;

and that will give the browsers room for rounding errors. (You can also say
$col_width = floor(98/$num_images);
or however else you want to tweak it.)

You may also need to change line 77 the same way; look at the context to find out.

P.S. - Save the edited file in
/includes/modules/your_template/additional_images.php
to protect your changes during upgrades.

:clap:Thank you! That did the trick. I did have to put "-1" after both of those lines of code. Once done the images popped back up onto one line. Thank you very much. That was going to make me nuts!

/includes/modules/additional_images.php

Line #102 : $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',

and a search on $col_width shows:

/includes/modules/additional_images.php

Line #75 : $col_width = floor(100/$num_images);

Line #77 : $col_width = floor(100/IMAGES_AUTO_ADDED);

Change line 75 to

$col_width = floor(100/$num_images) - 1;

and that will give the browsers room for rounding errors. (You can also say
$col_width = floor(98/$num_images);
or however else you want to tweak it.)

You may also need to change line 77 the same way; look at the context to find out.

I am also experiencing this problem in I. I tried several permuations of the above advice, with no success. All any of the changes did was completely remove my additional images.

Any other ideas for this IE issue? It works just fine in Netscape/Mozilla.

My test site is located at http://www.handspunyarn.org/

Thanks & Happy Holidays.

-the redhead-

This is a curious case... the change in the math to alter width could not by itself make additional images not function. Either something about the way you did it was wrong (but only for IE), or perhaps it interacts with your template in strange ways. Have you tried switching to /classic/? And then make that change to lines 75 & 77 in a copy of additional_images.php in /includes/modules/classic/additional_images.php, and see if it works there.

Your template has a bunch of javascripts active in the product info page; maybe they interact with this file in a way that causes some problem.

As an aside, this template is showing at the foot of all the pages the javascript "- Click Image to Close" link, which you really want only on popups. You might ask the template maker about that.

Have you tried setting additional images to 3 per row? That results in 33% width each, which allows room for rounding errors. It couldn't hurt to verify that that is what is going on.

Have you tried setting additional images to 3 per row? That results in 33% width each, which allows room for rounding errors. It couldn't hurt to verify that that is what is going on.

Yup - I checked that first. It's set to 3 per row

Yes, the code is not the basic stuff. Problem is that I know just enough to be dangerous ;) I may have to hire a coder for an hour to figure that one out. But I do try to do things myself. I'll poke at it some more to see if I can figure it out first.

Thanks again for the suggestions & Happy Holidays.

-the redhead-
...not a geek in Real Life, I just play one at werk...

Re the "3 per row" - it occurs to me that if there are only two items in the list, they will be calculated for that and not for three, so you can't test the rounding error effect that way.

Did you try the /classic/ edit suggested? This will verify if the problem is in your template code. Do it in two steps - first look at it in straight classic, and then make the edits and look again.

Is there a way to change the additional images so that they are not spaced based on the column width %, but rather just aligned left with a 5 px padding?

Thanks for any help.

Hi
Im having similar problems with the spacing of additional images -

Ive tried the suggestions pointed out by Glen above however i can get it configured properly

My coding was exactly how it was above and have now changed to the following

$col_width = floor(40/$num_images) ;
} else {
$col_width = floor(100/IMAGES_AUTO_ADDED) ;

i tried the -1 but i think thats for a fix in IE which im not having any issues with.

i changed the 100 value on the first coding from 100 which seemed to remove padding or spacing on the left of the image however there is a fairly large gap between them still not too sure why.

you can see an example on the following page

http://zainabscollection.com/index.php?main_page=product_info&cPath=2&products_id=30

any help would be appreciated

Ok ive sorted it - Im not entirely sure why what i done fixed the issue but it has - i added some width coding to the stylesheet for the additional images.

I think it was due to the fact that I had admin>configurations>images>number of additional images per a row set to 3 and when showing only 2 images its like spacing 50%.

Anyway this is what I have in the style sheet

#productAdditionalImages {
margin-top:90px;
width:200px;

}

#productAdditionalImages img {
float: left;
border: 0px solid #ff0000;
}

Now im hoping i have done it correctly - If there is something wrong with the coding i have used then please advise

Also the following thread will be a great read

http://www.zen-cart.com/forum/showthread.php?t=85405&highlight=moving+additional+images

Once again thanks alot for all the help Glen seem to find all the answers to my questions through your support either directly or by searching through the threads to find you have already answered the question :smile: