Image/Product Color changer

PHP
1

Hello there,

I hope I can explain myself here…

I am setting up a website to sell t-shirts. Basically there will be options to select the color of shirt desired. I am building it on Wordpress. I’m curious if anyone knows of a plugin that will do this, to where the user selects yellow, and the product image changes the actual image without reloading the entire page.

Is this possible? I know zazzle does it, but they do it to the extent of adding a design on the “Mock-up Image” however I just want the t-shirt color to change as the user selects the color under the options?

If that doesn’t make sense I can easily try to describe it further.

Thanks for any and all help,
Lorne

2

This site is very similar to what I want…Look under shirt simulation. http://babyblink.net/?p=18

However this is flash. Is there a way to accomplish this with PHP or something else? Or most ideally a Wordpress plugin?

Thanks,
Lorne

3

Sure, it’s possible. :slight_smile:

Here’s a demo: http://dev.anthonysterling.com/sp/

I’ve zipped up everything you need here: http://dev.anthonysterling.com/sp/source.zip

Barring the source image, here’s the code too:


<?php

$isImageRequest = array_key_exists('colour', $_GET);

if($isImageRequest)
{
  $template = imagecreatefrompng('t-shirt.png');
  
  imagetruecolortopalette($template, true, 255);
  
  list($r, $g, $b) = explode(',', $_GET['colour']);
  
  imagecolorset(
    $template,
    imagecolorat($template, 100, 100),
    $r,
    $g,
    $b
  );
  
  header('Content-Type: image/png');
  imagepng($template);
  exit;
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssbase/base-min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <title>
      Sitepoint Demo
    </title>
  </head>
  <body>
    <div id="controls">
      <form action="#" method="get">
        <select id="r" name="r">
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="150">150</option>
          <option value="200">200</option>
          <option value="250">250</option>
        </select>
        <select id="g" name="g">
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="150">150</option>
          <option value="200">200</option>
          <option value="250">250</option>
        </select>
        <select id="b" name="b">
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="150">150</option>
          <option value="200">200</option>
          <option value="250">250</option>
        </select>
        <input id="submit" type="submit" value="preview" />
      </form>
    </div>
    <img id="preview" src="index.php?colour=255,0,199" alt="t-shirt image" />
    <script type="text/javascript">
      $(document).ready(function(){
        $('#submit').click(function(){
          var r = $('#r').val();
          var g = $('#g').val();
          var b = $('#b').val();
          $('#preview').attr('src', 'index.php?colour=' + r + ',' + g + ',' + b);
          return false;
        });
      });
    </script>
  </body>
</html>

It sounds like a fun project, enjoy!

Anthony.

4

Anthony,

Thanks so much for the quick reply and great demo.

I do know I will use this, however I’m curious if it’s possible to do the same thing with images. For example I have a t-shirt mock-up I’ve made in photoshop that I can change the color easily. So I’m curious to know if I can have say a drop down with: Blue, Yellow, Red, White, & Black. Then every time one of those is selected, the correct saved jpeg image is swapped with the appropriate color without reloading the page.

Does that make sense?

Thanks again for the help, your demo will come into good use!

Lorne

5

a bit if ajax would allow you to change div content (pic of t-shirt)without reloading entire page. Use ajax to call what_color.php - ajax passes $color to what_color.php, which in turn selects the right pic

6

Sure, the hover thing is pretty easy to if you change the original code slightly.


<?php

$isImageRequest = array_key_exists('colour', $_GET);

if($isImageRequest)
{
  $template = imagecreatefrompng('t-shirt.png');
  
  imagetruecolortopalette($template, true, 255);
  
  list($r, $g, $b) = explode(',', $_GET['colour']);
  
  imagecolorset(
    $template,
    imagecolorat($template, 100, 100),
    $r,
    $g,
    $b
  );
  
  header('Content-Type: image/png');
  imagepng($template);
  exit;
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssbase/base-min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <title>
      Sitepoint Demo
    </title>
  </head>
  <body>

    <h1>
      Pink T-Shirt!
    </h1>
    
    <img id="preview" src="index.php?colour=255,0,199" alt="t-shirt image" />
    
    <div id="controls">
      <p>See it in ... </p>
      <a class="c" rel="255,0,0" href="#">
        Red
      </a>
      <a class="c" rel="0,255,0" href="#">
        Green
      </a>
      <a class="c" rel="0,0,255" href="#">
        Blue
      </a>
      <a class="c" rel="255,255,255" href="#">
        White
      </a>
      <a class="c" rel="0,0,0" href="#">
        Black
      </a>
    </div>
    
    <script type="text/javascript">
      $(document).ready(function(){
        $('a.c').hover(
          function(){
            $('#preview').attr('src', 'index.php?colour=' + $(this).attr('rel'));
          },
          function(){
            $('#preview').attr('src', 'index.php?colour=255,0,199');
          }
        );
      });
    </script>
    
  </body>
</html>

I’ve updated the demo to show this revision.

7

Anthony,

This is awesome. Very useful coding! Now I have to figure out how to implement this into my wordpress and the e-commerce template I bought.

I like how your image is transparent and can reflect any color that shows through it. This will help me to not have to make tons of different images and only upload one per shirt design.

However now I’m in a predicament. I have all my product pages calling in the same template. However some shirts are meant to be white and some are meant to be another color. How might I go about selecting which color is loaded on the product page load when it’s different than that of the last product?

I’m just thinking out loud here, but I also have my products showing up on my homepage as thumbnails to help people through the shop. If I use a transparent image then it won’t show any color right? So maybe is it possible to still have a default image as my product image without a transparent shirt, then when someone hovers over a color selection (or picks it from a dropdown) then a new Div loads over the existing image display and also loads a new image on top of that that is the transparent shirt image.

Does that make any sense at all? It’s hard to show you what I mean without you visiting my site. Right now it’s locked to the public as I’m still building it. I have attached a few screen shots to explain my thinking.

Let me know if I can help explain further.

Thanks for all the help I really appreciate it!

Lorne

8

Any ideas as to how to implement this to my ecommerce Wordpress theme?

thanks,
Lorne

9

Hey dude, sorry unsure of how this can be implemented into your commerce theme. Just wanted to thank Anthony, I’ve taken a look through your code and learnt a couple of new bits and pieces, thanks dude! Trying to learn jQuery as much as possible! :slight_smile:

10

Anthony -
Is it possible to do this (see attached image)? Where I have about 30 different products in a drop down list and when the selection in the list changes, the image in the image field is also updated. Could you point me in the right direction…your article is the best luck I’ve had in finding some direction regarding this.

Here’s the link to what I’m hoping to do:
http://www.amazon.com/Logo-Chair-Carolina-Gamecocks-Stadium/dp/B001CB2OAA/ref=sr_1_2?s=sporting-goods&ie=UTF8&qid=1342732101&sr=1-2

Thanks!
Tim

11

Anthony,

I tried to implement this into my wordpress theme, however I don’t know why but the .pngs transparencies are showing up as black throughout my website? Any ideas why?

See the last image here: http://activestatedesigns.com/flagsilhouettes/colorado/skier01-coflag01

What I want to do is use your coding and have my different style shirts just be a translucent .png and the color of the shirt is just a div behind it that is controlled with the rollover.

Any ideas why this is happening? Doesn’t happen on my other Wordpress sites?

Thanks,
Lorne

12

Ok so I tried uploading my image as full-size so wordpress doesnt’ make a black background. The image here shows up transparent (http://activestatedesigns.com/wp-content/uploads/FLAG-CO-Skier01-mock-m-Std-navy2.png), but the theme I think is making it have a black background http://activestatedesigns.com/flagsilhouettes/colorado/skier01-coflag01. The second to last is a .gif and the last is a .png. Both are transparent when viewing full size image. Any ideas?