How to move additional images to the right of main product image

[mali]

In the following file :

tpl_product_info_display.php


You need to move

<!--bof Additional Product Images -->
... coding bla bla...
<!--eof Additional Product Images -->

to underneath the box <!--eof Main Product Image-->

And then upload these amended files into your ../custom/templates

[davale]

Thanks for the reactions.

Already have moved the 'Additional Product Images code' to the 'Main Product Image' code but the additional images keep showing 'on the next line' directly underneath the main image.

Looks like lines of code which there own <?php and ?> tags are wrapped (LF) by default. I've joined both requires within a single <?php and ?> tag but still working on a way to show the main image aligned left and two additional (smaller) images on the right underneath each other.

[kobra]

look for and remove a clear both that is between the areas that you are adjusting

[mali]

The box #productAdditionalImages seem to have embbed "style width"

In module additional_images.php, look for the line
'style="width:' . $col_width . '%;"' and then empty it to '' (remove "style=width...")

In the stylesheet, make sure you set #productMainImage to float left. So that #productAdditionalImages can go right. Don't forget to set "clear:both" for each additional image boxes.

This work for me.

[davale]

I get the feeling that this is exactly what I'm looking for. But where does this "clear:both" for each additional image boxes go?

[mali]

I think this should fix your problem.
#productAdditionalImages .additionalImages {clear:both;}

[davale]

I'm using ZC1.3.0.2 and can't find a '#productAdditionalImages .additionalImages' defined in the CSS stylesheets. There is a .additionalImages in the stylesheet_new.css but it's grouped with a number of other styles.

Do I create a new entry for #productAdditionalImages .additionalImages and remove .additionalImages from the group within the stylesheet_new or am I looking in the wrong place?