Clicking thumbnails to change main product image in a custom wordpress product page

[SpartanCopy]

Ladies and Gentleman, boys and girls, guru’s, wizards and geeks of all ages,

I am having a bit of an issue. I have created a website which I am converting in to a custom wordpress template. On the product page there is a main product image with a varying number of thumbnails (3-6 usually) in a vertical column to its right. When a thumbnail is clicked it is displayed on the larger image.

This was initially done using jscript & CSS:

Jscript:

function swap(image) {
document.getElementById(“main”).src = image.href;
}

html/CSS:

What i would like is to be able to add the images to wordpress as custom fields e.g.
Name “image1”
Value “/product-images/blanket.jpg”.

I good with HTML & CSS, but I have only been learning php and javascript for about 24-48 hours, and that is a self taught crash course.

I tried using the above script alongside php but got majorly stuck. For starters I wasn’t sure what to put in the href and to be honest I didn’t know if any of it would work. For me everything has been trial and error!!
This is what I had (laughter is allowed but preferred alongside positive criticism)

£ID, ‘price’, true); ?>

I do know that having nothing in the href would mean the main image wouldn’t change, but for some reason the main image or the thumbnails wouldn’t even show let along be able to change.

I can get a single image using _ID, ‘image4’, true); ?>_ but when it comes to making it change I am stumped.

I would appreciate if anyone would be able to help me construct this. It might be a lot to ask so even pointing me in the right direction or something would be very much appreciated.

Many thanks.

[tomrogers123]

I’m not sure I quite grasp what it is you’re after in terms of functionality (clarify and I’ll gladly true to help) but you did say critique is welcome so I figured I could help there. Instead of using the `onClick` HTML attribute individually on each link you can target them all in one shot. This is more efficient (only one click handler), more semantic (HTML should be confined to describing content) as well as being easier to update. Given that you are also using WordPress, you already have access to jQuery (a library to make writing Javascript easier). In any JS file in your theme, you could get the same result by writing this in your “custom” script.

$(‘#thumbs a’).on(‘click’, function() {
// target all clicks on links inside div#thums in one go
swap(this);
return false;
});

The reasons that that is better are that:

1. You are not ‘muddying’ your markup with event handlers.
2. If you want to change something, you only have to do so once rather than 6 times.
3. jQuery is loaded anyway and is the established pattern in WordPress so you might as well continue conventions.

Like I said, that is some basis for improvement but won’t solve your original problem.

[SpartanCopy]

Hi Tom,

Thanks for such a quick response and the guidance.

This is the original non-wordpress single product page I built for my sister. [None wordpress page](http://sylvan-design.co.uk/singleproduct.html “None WordPress page”)

I have managed to convert the single product page in to a wordpress page template. However I do not know how to create the gallery in wordpress. What I would like is to be able to convert this gallery to wordpress so when my sister creates a new product page all she has to do for the images is either add each image location as a custom field or better yet just select a folder location containing the specific product images (each product would have its own folder containing images).
The number of images per product varies between 1 to 8 so when a product has 1 to 4 images it only has a single vertical row to right, whereas when there are 5 to 8 images there are two vertical rows of thumbnails on the right of the main image.

I hope this explains a little more.

[mweldan]

you can use wordpress native gallery. you can later embed the gallery in page or post. [1]

there are various ways to extend the functionality though, or use other gallery plugins.

[1] http://codex.wordpress.org/Using_the_gallery_shortcode

[SpartanCopy]

I have been looking at wordpress’s native gallery but it doesn’t seem as though I can style it in the same way that I require.

[SpartanCopy]

Sorry I was being a lazy tw*t. I’ve done a bit of research and may have found the way to style the gallery the way I need it… I think. I’ll keep you informed.

[SpartanCopy]

Sorry if it is me being really thick but I cannot get the native gallery to do what I require. I can’t get it in to the layout that I require link on my link above. Any advice?

[SpartanCopy]

Thank you to those who tried to help me. Much appreciated.

I got what I needed working using [Portfolio slideshow plugin](http://wordpress.org/extend/plugins/portfolio-slideshow””). Worked great. Simple to customise and it can be added to straight into the template.

[Author]

Posts