How to put more than one photo on a product

The example shows the block of code that should correctly display the additional images. If you have that, your problem is elsewhere.

The require($template->get_template_dir('/tpl_modules_additional_images.php'...
line is what actually calls for the images.

Do you know how I can make the original image switch when you click on the extra images, instead of a pop-up opening????

Thanks!

There are mods for that kind of thing in Downloads (link at top of this page).

Yeah, I wasn't able to find anything that would do that... Has anyone ever used something like that?

Cheers,

Albert

Look at the Ajax Image Swapper support thread.

RuFuS:

You just need to use css to style them the way you want to.

For example, if you wanted to move them under the main image you could do something like:

#productAdditionalImages {
clear:both;
}

Do i just add that code in the css? or is there one that i have to change?

Because I did that it did go under but their is too much gap between each picture.

Do you want the additional images in a column below the main image, with the text to the right? In that case, add this to the bottom of your stylesheet:```
#productDescription {margin-left: 150px;}

.additionalImages {
width: 150px !important;
float: left;
clear: both;
text-align: left;
padding: 5px;
}

.additionalImages+br.clearBoth {display: none;}

The .additionalImages+br.clearBoth is needed to turn off the <br class="clearBoth"> so the text can rise to the top. 
Note that this will be ignored by IE6 and not function there, so the best fix is to remove the <br class="clearBoth"> from the bottom of the additional images code.

If you want the images at the top, except closer to the main image, all you need is this:```
.additionalImages {
width: 130px !important; /adjust to taste/
float: left;
padding: 5px;
}

gjh42:

If you want the images at the top, except closer to the main image, all you need is this:```
.additionalImages {
width: 130px !important; /adjust to taste/
float: left;
padding: 5px;
}

Thanks for trying to help me. But for some reason it still have the large gaps between each picture. And the column code works but i dont want it like that. I also adjusted the width but it doesnt shorten the gap.

What's the link of your site?

markpr9:

What's the link of your site?

here is the link to the site.

http://www.theoxicore.com/index.php?main_page=product_info&cPath=3&products_id=3

The gap doesnt seem to be adjustable.

<div class="additionalImages centeredContent back" style="width: 25%;">

Each image block is being divided by 25%. If you converted that to pixels, for example.....

<div class="additionalImages centeredContent back" style="width: 150px;">

They wont be so far apart... then you can put them as close as you like...

markpr9:

Each image block is being divided by 25%. If you converted that to pixels, for example.....

They wont be so far apart... then you can put them as close as you like...

where did u find those codes or tags? or do i have to add that in somewhere?

just open your page in firefox or IE and check the source code... do a search for it, and you will find it...

Now, to see which template is generating it, go to Admin >> Tools >> Developer Tool Kit...

There go to look up in all files and add the code I quoted you... It will then tell you which page that's on... Then you can just change the template.

Its ok i figured it out by looking at all the other code. here is what i did.

#productAdditionalImages {
clear: both;
width: 450px; <-- had to put the width code in and adjust it from there.
}

Its pretty weird because i saw the other had width and i couldnt adjust it but i added in there and changed it and it works.

but now how do i take out the text below it. the one that says larger image.

For that you have to do what I mentioned on my last thread to find out which page is generating that code... Then you can just deleted it...

tanik:

Its ok i figured it out by looking at all the other code. here is what i did.

#productAdditionalImages {
clear: both;
width: 450px; <-- had to put the width code in and adjust it from there.
}

Its pretty weird because i saw the other had width and i couldnt adjust it but i added in there and changed it and it works.

Yeah, that's even easier... they are not taking 25% of 450px, instead of whatever was there before...

thx for the help everyone. really appreciated.

No problem,

Good luck with your site.

Cheers