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

[davale]

I'm trying to show two additional images (small) to the right of my main product image (large) on the product info page.

I've spent hours messing around with the tpl_product_info_display file because I'm convinced this is the way to do it but so far without succes. Somehow the additional images keep showing up on 'the next line' even though the code for the additional images is right below the main image code now.

I can't find a break in the code that makes my additional images showing below the main image. There must be something in the require-statement behavior that I'm not aware of since I'm not very familiar with PHP.

Thried searching the forum but have not come up with anything usefull. Anyone out there who can tell me what I'm missing or knows about a earlier thread I can have a look at?

[kobra]

I have not done what you are seeking but can only offer this:

Looking at the calls for additional images in the file you ref'ed; there begins a trail with:
require($template->get_template_dir('/tpl_modules_additional_images.php'
require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE

and looking there the references are:
require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php'));

and so the journey begins; there is probably a br or clear both that is forcing the next line issue somewhere.

[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?

[mali]

I think .additionalImages inside the group does nothing apart from alining text to 'center', you shouldn't worry about it. just create new style for it.

Here is my style :

#productMainImage {margin:5px 0; padding:0; width:70%;float:left;}
#productAdditionalImages {margin:0; padding:5px 0; width:120px; }
#productAdditionalImages .additionalImages {clear:both;}
#productAdditionalImages a {text-decoration:none;}