Multiple product image layout control

[michaelchu]

Here is a link to my site:http://www.waterbabiesbikini.com/_ca...roducts_id=180

For the life of me I can't get the additional images to line up next to the primary product image, I figure it's in one of the CSS files but can't find it yet. Any help or suggestions would be greatly appreciated, TIA.

[stevesh]

I'm not seeing any images on that page.

[fairestcape]

The ORDER in which the various elements appear on the product info screen are controlled by a combination of structures in tpl_product_info_display.php and your CSS. Also, there are settings in your admin console that goivern the number of additional images to display in a line.

The first thing to do is put an OVER-RIDE tpl_product_info_display.php file into your CUSTOM template folder.

Basically, this means you COPY the default file:

includes/templates/template_default/templates/tpl_product_info_display.php

to:

includes/templates/YOUR-CUSTOM-TEMPLATE/templates/tpl_product_info_display.php

Then, you make edits to the copied file. You never alter the CORE (default) file.

You should edit the copied file by sending it ftp to your hard drive, then opening it with a PLAIN TEXT EDITOR such as Crimson Editor.

In that file, you will see the various components neatly delimited by:

<!---BOF xxxxxx -->
(Some PHP here)
<!---EOF xxxxxx -->

Their POSITION, relative to each other, determines the ORDER in which they appear on the product info screen.

So you need to CUT and PASTE the section that relates to the additional images. You CUT it from where it is currently located in the code file, and you place it before or after another section.

[michaelchu]

I'm not seeing any images on that page.

I apologize, I was setting up IH3 last night and forgot to reload the image. It is fixed and viewable.

fairestcape, I did move the code block as you suggested (the additional image was moved up from the bottom of the page to just below the main image). I'm just wondering if there is a way to move the image I have, next to the default image.

Thank you for responding.

[stevesh]

Try adding this to your stylesheet:

#productAdditionalImages {float: left;}

[polik]

Hi All,

I try to do above but end-up with this:

http://www.ledwaydotie/led-lamps/led...quiv-up-to-40w

Anyone have idea what to do ???

Many thanks

[polik]

Sorry forget to mention what I want.

I would like to have additional images below main one, not on right side.

Thanks

[polik]

Job done...

just added

#productAdditionalImages {clear: both;}

into stylesheet_main.css

thanks