Additional Images Layout and Location.

[phantomxc]

I have been playing around with the additional images and I was wondering if I could get some help achieving the image layout of this site.

http://www.diecastmodelcars.com/2005...a-gt-p-97.html

I'll take the car too :)

I like how the main image takes up the whole top section of the page and the additional images are all together right underneath it.

I just figured out how to move the additional images up top and it looks like crap.

http://eternityetchings.com/store/in...&products_id=1

Yes I know the images look like crap too I haven't done any professional photos yet.

Any help would be greatly appreciated.

[kobra]

First you need to matt all your images to the same size like the referenced site has done.

The referenced site is Zen Cart but has some custom coding for this and I suspect that they did not share it with the community

[phantomxc]

I can see the custom coding for the images loading in the same location but say I don't really care about that function and was more interested in just the image layout and spacing. They can open up in a new window like they do now.

I can change the images to all the same size no problem.

[mimran]

well dude!
it is not hard once you play with it a bit
for your main image
simple solution is in your css set the width to 100%
that will automatically force every thing to go down and just keep the main image up the top.

Secondly, in your product info tpl (and i guess you have already done it, bring the extra images code right beneath your main image code)

then in your css for extraimages
use display: inline;

and you are set.

however i notice your image size for thumbnails is coming out different to get a clean look simply make all your images of the same size.

anymore questions just feel free to post i will be checkingup, more than happy to help

regards
mimran

[gjh42]

The switching effect might be the Ajax Image Swapper mod which is available; look in the forum for its support thread.

[phantomxc]

Ya I have been playing with the AJAX Image Handler and for what ever reason I can't get it to work correctly for me. Stupid SQL

Thanks for the quick responses!

time to play around with more code :)

[phantomxc]

Wow this thing is really hating me right now, and I am hating it back

I go into stylesheet.css and play around a little bit trying to get the desired effect. Change a thing or two and then my menu does this.



So I delete everything I have done and can't get that stupid yellow bar to go away. So I finally restored from a timemachine backup (I love my external hard drive) the stylesheet file and upload and its gone? So I am thinking that hey maybe I just screwed something up and didn't notice it.

Go on to play with some more changes and do the following

#productAdditionalImages {
margin: 0;
padding:0;
float:right;
width:40%;
display: inline;
}

and it actually changes the layout of the photos to something more like the desired effect. So I change the float to center and then thats when that flippin yellow bar pops up again. I then changed it back to float:right; and the bar was still there. THAT WAS THE ONLY THING I CHANGED?


Getting very angry, I just delete the stylesheet from my server just to see what would happen. It fixes it? I then load the original that I undid all my changes to and the bar is back! So I have to restore the stupid file AGAIN!

Can anyone enlighten me as to what is going on? This is driving me crazy!

[mimran]

one other quick thing, in the admin section

configuration
images
images in a row: change that to suit your need as well so e.g. change it to 7

that will fix some of it.

[phantomxc]

Just to add to the fun, now any time I have a stylesheet.css file in my template folder the menu adds the great yellow bar and becomes all jacked up.

I restored from the file and even opened the original zip where the file came from.

Still there

[mimran]

dude
did changing number of additional images in configuration helped your cause?

also with the style sheet

try this rather than what you have

.additionalimages{
// your code here
}