Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Thanked 0 Times in 0 Posts

    Question Ecomm - Looking to Overlay Fabrics and Frames on Products

    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:

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Halle (Saale), Germany
    Thanked 1,314 Times in 1,284 Posts
    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 or ImageMagick you might be able to manipulate blank canvas images on the fly, too.

  3. #3
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Jakarta, Indonesia.
    Thanked 78 Times in 76 Posts
    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.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts