Grow your CSS skills. Land your dream job.

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

# February 17, 2013 at 6:00 pm

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.

# February 19, 2013 at 8:11 am

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.

# February 19, 2013 at 12:06 pm

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

# February 19, 2013 at 6:15 pm

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.

# February 19, 2013 at 6:38 pm

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.

# February 23, 2013 at 10:38 am

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?

# March 8, 2013 at 6:14 am

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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".