SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image/Product Color changer

    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. #2
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    Twitter: @AnthonySterling silver trophy AnthonySterling's Avatar
    Join Date
    Apr 2008
    Location
    North-East, UK.
    Posts
    6,111
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Sure, it's possible.

    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 Code:
    <?php

    $isImageRequest 
    array_key_exists('colour'$_GET);

    if(
    $isImageRequest)
    {
      
    $template imagecreatefrompng('t-shirt.png');
      
      
    imagetruecolortopalette($templatetrue255);
      
      list(
    $r$g$b) = explode(','$_GET['colour']);
      
      
    imagecolorset(
        
    $template,
        
    imagecolorat($template100100),
        
    $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.
    @AnthonySterling: I'm a PHP developer, a consultant for oopnorth.com and the organiser of @phpne, a PHP User Group covering the North-East of England.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Michigan
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Twitter: @AnthonySterling silver trophy AnthonySterling's Avatar
    Join Date
    Apr 2008
    Location
    North-East, UK.
    Posts
    6,111
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Sure, the hover thing is pretty easy to if you change the original code slightly.

    PHP Code:
    <?php

    $isImageRequest 
    array_key_exists('colour'$_GET);

    if(
    $isImageRequest)
    {
      
    $template imagecreatefrompng('t-shirt.png');
      
      
    imagetruecolortopalette($templatetrue255);
      
      list(
    $r$g$b) = explode(','$_GET['colour']);
      
      
    imagecolorset(
        
    $template,
        
    imagecolorat($template100100),
        
    $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.
    @AnthonySterling: I'm a PHP developer, a consultant for oopnorth.com and the organiser of @phpne, a PHP User Group covering the North-East of England.

  7. #7
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Attached Images Attached Images

  8. #8
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any ideas as to how to implement this to my ecommerce Wordpress theme?

    thanks,
    Lorne

  9. #9
    SitePoint Evangelist
    Join Date
    Aug 2010
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  10. #10
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image changer drop down select list

    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-Car...2732101&sr=1-2

    Thanks!
    Tim

    Capture.JPG

  11. #11
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/flagsi...ier01-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

    Quote Originally Posted by AnthonySterling View Post
    Sure, the hover thing is pretty easy to if you change the original code slightly.

    PHP Code:
    <?php

    $isImageRequest 
    array_key_exists('colour'$_GET);

    if(
    $isImageRequest)
    {
      
    $template imagecreatefrompng('t-shirt.png');
      
      
    imagetruecolortopalette($templatetrue255);
      
      list(
    $r$g$b) = explode(','$_GET['colour']);
      
      
    imagecolorset(
        
    $template,
        
    imagecolorat($template100100),
        
    $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.

  12. #12
    SitePoint Addict
    Join Date
    Aug 2009
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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-con...-Std-navy2.png), but the theme I think is making it have a black background http://activestatedesigns.com/flagsi...ier01-coflag01. The second to last is a .gif and the last is a .png. Both are transparent when viewing full size image. Any ideas?


Bookmarks

Posting Permissions

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