Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    1
    Thanks
    0
    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:
    http://www.polywoodinc.com/polywood-...dirondack.html
    http://www.case-mate.com/iPhone-4-Ca...Tank-Cases.asp

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,636
    Thanks
    6
    Thanked 1,003 Times in 976 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
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 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
    •