Additional images - how to place / move them as wished?

[petitplat]

I'm using Zencart version 1.3.9b

I did change the order on my product page using the FAQ but I have a few issues.

1. Additional images
Here:
http://www.petitplat.fr/zencart/inde...roducts_id=214

The additional images show up as a column, and I'd like to have them in a grid way.

Which weirdly is the case here:
http://www.petitplat.fr/zencart/inde...roducts_id=251

But if possible with less "space" between the pictures.
Ideal would be a grid of 6 pictures (3 columns, 2 rows)

2. Add to Cart button emplacement

When I have attributes, it looks good:
http://www.petitplat.fr/zencart/inde...roducts_id=251

But when I don't, the add to cart button is beneath the "review" and "tell a friend". which is a little odd:
http://www.petitplat.fr/zencart/inde...roducts_id=247

(if it's too complicated I can indeed add a text attribute which will solve the problem)

Thanks in advance!

[haredo]

One thing I notice is look at the size of the images...

The one you like: 650px × 606px (scaled to 215px × 200px)

One that is messed up.. 650px × 486px (scaled to 267px × 200px)

[petitplat]

One thing I notice is look at the size of the images...

So the reason would be that the image is too large? It would just work fine with a square image? (just making sure I understood you right. English is not my language)

[haredo]

I use Firefox with a add on called Firebug which allow me to dig into the html and view images and make changes to images, classes and Id's..

When i change your image to scaled to 215px × 200px), yes, now i get 2 additional images to the right of the picture, but the 4th and 5th image wraps under the main image... Not good...

[petitplat]

Oh weird.

I always see 2 images on the right and the rest just under the main image.

Except here http://www.petitplat.fr/zencart/inde...roducts_id=251
where the 3 images are on the right of the main image.

And I use firefox as well (latest version)

[haredo]

Use firebug and duplicate this on the left pane..

<div id="productMainImage" class="centeredContent back"><img role="presentation" class="twisty "><script type="text/javascript" language="javascript">

<img role="presentation" class="twisty "><a title="Monochrome - Post Earrings" rel="lightbox-g" href="images/bijoux_bo/BO_Donuts_St_RainbowMonochrome.jpg">
<img height="200" width="267" title=" Monochrome - Post Earrings " alt="Monochrome - Post Earrings" src="images/bijoux_bo/BO_Donuts_St_RainbowMonochrome.jpg">

<br>

<span class="imgLink">larger image</span>


</a>

change the 267 to 215, and you will see what i see..

[haredo]

Do you like this view...

Highlight this in your left pane after you inspect element:
<!--eof Main Product Image-->

1. right mouse click and select edit HTML
2. go to the end and hit enter..
3. add this to the bottom of it:
4. <br class="clearBoth">
5. Should look like this now.. and notice the page above.

<!--eof Main Product Image-->
<br class="clearBoth">

[petitplat]

I just installed firebug (and it's great, thanks!)
And I see 3 images next to the main image and the 2 others are just under.

So no I don't like it that way.

I need to go now but I'll try with different image sizes if it works better.

[petitplat]

Ok so what I did was change the max width of the picture to 230.
And restraint myself to 3 pictures per item.
That way I have the main picture and the 3 additional pictures next to it.
Thanks haredo for helping me through this :)

BUT if someone knows how to put a 4th picture, or ideally 6 pictures next to the main picture, I'd be grateful :)

[gjh42]

The width of the additional image container is set as a percentage of the center column width according to how many you have specified per row, or how many you have, whichever is less.
Since they are up next to the main image, there can never be enough room to display them all as intended (the % width does not allow for the main image taking some of it).

What you need to do is explicitly override that width using !important in your stylesheet. Add a rule like

.additionalImages {
	width: 20% !important;
	width: 120px !important;
}

You can use either of these specification methods, adjusted as desired to fit the images. Set the number per row to what you want.