Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kevin Cooper
21,295 PointsProduct color changer
I'm looking for some good scripts or plugins (jquery or WordPress) that can be useful in creating product demos that that allow the product to change colors and features. Similar to what you might see on Old Navy or other clothing stores where you can see the apparel in different colors. I have client that would like to show different color options for windows and various matching of window and lock colors. Thanks all.
1 Answer
Nick Pettit
Treehouse TeacherIn most cases like this, the product images will actually be swapped out completely with a different image. The color adjustments are sometimes made in an image editing tool (like Photoshop) so that they're exactly the same image sans the color shift. That way, when website visitors click on the different colors, there isn't any movement or "jump" between images.
Apple does this to great effect on their current iPod Touch marketing page here: http://www.apple.com/ipod-touch/design/ (the color switcher is towards the middle)
Swapping out images like this could be as simple as using jQuery to change class names or change image paths, although you'll likely need to query the database as well to gather the appropriate image files and product information.
Kevin Cooper
21,295 PointsKevin Cooper
21,295 PointsThanks Nick for the reply. Do you know of any base code, scripts or plugins that are already out there that I can work on from and customize? Thank you.
Nick Pettit
Treehouse TeacherNick Pettit
Treehouse TeacherNo, but this is pretty simple to create in jQuery. You just need to change out some classes or image paths when the user clicks on an element.
You may also want to check out MicroJS and see if there's anything that can help there.
Kevin Cooper
21,295 PointsKevin Cooper
21,295 PointsThanks. I actually found this: http://fancyproductdesigner.com/ , a little more than what I need to so I'm customizing the code for my needs. I'll check out MicroJS too. Thanks!