...

View Full Version : Ecomm - Looking to Overlay Fabrics and Frames on Products



ashmarie
09-25-2012, 02:57 PM
I'm trying to find the best approach to overlay all the different fabrics and frames on furniture. We only have one large silhouette image of each product in one frame finish and one fabric. We are trying to get our website to display a different frame and fabric once that option is clicked on the website. We don't have the resources to take a photo of each option for the furniture, that would be over 200 varieties for each product! We found many websites that have this and we are trying to figure out if it is a software or a custom javascript. Basically if it is a custom javascript then how do we go about finding the right web developer that can accomplish this. Any resource and advice is GREATLY APPRECIATED! Thanks

Examples of what we are trying to accomplish:
http://www.polywoodinc.com/polywood-classic-folding-adirondack.html
http://www.case-mate.com/iPhone-4-Cases/Case-Mate-iPhone-4-4S-Tank-Cases.asp

VIPStephan
09-25-2012, 06:08 PM
This is not possible with JavaScript and itís not JS that is doing that in the examples you posted, either. These are different images, indeed, and if they havenít been created with a photo editor in advance, they are at least being created/manipulated dynamically with a server side script (which the image URLs also suggest if you view the single images in the browser).

For example, the URL of the images at polywoodinc.com look like this:

http://www.polywoodinc.com/media/catalog/product/cache/1/image/400x/9df78eab33525d08d6e5fb8d27136e95/A/D/AD5030WH_1.jpg
http://www.polywoodinc.com/media/catalog/product/cache/1/image/400x/9df78eab33525d08d6e5fb8d27136e95/A/D/AD5030GR.jpg
http://www.polywoodinc.com/media/catalog/product/cache/1/image/400x/9df78eab33525d08d6e5fb8d27136e95/A/D/AD5030MA.jpg


Itís even more obvious on the other site:

http://www.case-mate.com/getDynamicImage.aspx?path=Blacktank1.jpg&w=480&h=480&q=100
http://www.case-mate.com/getDynamicImage.aspx?path=iph4s-TANK-navyAUQA2.jpg&w=480&h=480&q=100
http://www.case-mate.com/getDynamicImage.aspx?path=getDynamicImage-4.jpg&w=480&h=480&q=100


These URL query strings show that they actually seem to be multiple separate images that have been created beforehand, and the script is resizing them dynamically. But with an image manipulation library like GD (https://en.wikipedia.org/wiki/GD_Graphics_Library) or ImageMagick (https://en.wikipedia.org/wiki/ImageMagick) you might be able to manipulate blank canvas images on the fly, too.

hdewantara
09-26-2012, 08:37 PM
It is harder to imagine what kind of furniture product you have which varies on fabrics and frames. Have an URL/ link to the existing site for sharing?

If your site allows (absolute) stacking of overlays/ layers then layer-stacking might be a solution in XHTML/CSS/JS. Also, the images used should be in transparent .PNG format. The downside is that the resultant image shown couldn't be saved, or processed further as regular image; it is (they are) actually layers.

Some said it is possible using canvas techniques of HTML5, but I'm not familiar with that. The other "natural way" (images for an image) to go would be with what VIPStephan has suggested.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum