Impressed by this effect

[vishalkhialani]

Hi,
My client wants me to have the same feature as this site where a user selects a fabric and it shows on the image and stuff like that.

I have new clue how to do this. Does any one have any idea on how to get this done ?

http://www.tailorstore.co.uk/tailor-made-shirts

Cheers,

[macneato]

I'd say javascript (jquery) would be the way to go. Then on an click event you just swap the image using ajax

[vishalkhialani]

Hi,
This would not be practical as there would be 2000 fabric x 3 ( fits ) x 10 collars which is simply not practical to make so many images.

I am sure the image is being made on the server and then being published.

Cheers,
Vishal

[selvaganapathy]

I agree with macneato

jQuery + AJAX it is possible ..

You dont need to all the images statically. If u try AJAX, u can load the image (or any element) dynamically.

There are lots of javascript libraries available, but jQuery is most popular ..

[vishalkhialani]

Hi,
ajax can load the images dynamically but my problem is how to generate the image ?

The variables are too many 1000 ( diff types of fabric ) x 3 ( types of shirts ) x 5 ( types of cuffs ). So I am sure the images need to be generated using some kind of script of software and then ajax can be used to load it.

Cheers,
Vishal

[Phaelax]

Scene 7 will do exactly this. It's an Adobe product with all sorts of imaging features. Amazon uses it and I used it for our eCommerce department. You start with a base image and create swatches for all the different fabric types. As you select each fabric, and image is generated on the IPS and returned to you. The images are also cached on the server so it doesn't have to constantly regenerate everything.

Not sure what it costs, that was someone else's job. But Adobe's tech support was great and even fixed a light-box bug for us that was causing incompatibilities.

I've been working on an open-source system similar to this, but it's no where near ready for production.

[vishalkhialani]

Hi Phaelax,
Thank you for the amazing solution. A Happy New Year to you

Cheers,
Vishal

[vishalkhialani]

Hi,
Just wanted to add I found two more products which do the same. I am not sure which one will be suitable but I believe scence 7 is usd 4,000 a year

www.liquidpixels.com/
www.optitex.com

[vishalkhialani]

Hi,
Is there a free or cheap version for the said effect. The ones listed cost like usd 4,000 a year ! and most sites don't have that kind of budget.

Cheers,
Vishal

[infinitymedia]

This is a quite complex app. one where they have worked out all the combinations and accounted for them. I had a quick look and look at this. That's the image for the base. it's a php script that outputs custom images based off URL params. notice how there is no collar though. the collar image is another image overlayed (using absolute positioning) overtop. the plackett is another, as are the buttons. all the options are there but the amount of possible images are drastically decreased. the base image does not have to be changed for all the available options.

Also the images are very clearly CGI. You're best bet: go to the drawing board figure out what can be abstracted and layed out and then start planning for smart imaging. You can totally do this with many png files though and a quick ajax app. the hard part of this is NOT the code. it's the images for SURE.