homepage Welcome to WebmasterWorld Guest from 54.196.189.229
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library, Charter, Moderators: coopster & jatar k

PHP Server Side Scripting Forum

    
Change t-shirt color on mouse over for shirt mockups
ezeevivek




msg:4449308
 11:10 am on May 4, 2012 (gmt 0)

Hi All,

I was building a t-shirt printing online shopping website using Opencart and I have done almost every possible changes but stucked at one feature:

I have design image with me and a mockup template to make real looking mockups but that I would like to do using php or imagemagick, so that it can automatically changes shirt colors on mouseovers by merging 3 images (white base, color layer, design image) just like it done on Cafepress or Zazzle.

Can anyone here guide me how to do that using php?

A command line example is given at - [imagemagick.org...] but I want it in php.

Thanks,

 

incrediBILL




msg:4449344
 12:15 pm on May 4, 2012 (gmt 0)

PHP doesn't do mouseovers, what you want is Javascript as it would be done in the browser.

You can still do it in PHP if you display a color palette of choices on the screen and make each color clickable. If someone clicks the color then redisplay the page with the new shirt color clicked shown.

I would implement both so the site works for people with and without javascript enables.

ezeevivek




msg:4449352
 12:26 pm on May 4, 2012 (gmt 0)

Sorry for confusion .... mouseover should display image which are generated by php.

My main concern is to create those images programatically using php.

Marshall




msg:4449403
 2:22 pm on May 4, 2012 (gmt 0)

Have you considered making an image where the shirt is actually transparent, surrounded by a white field or whatever color is appropriate, and just change the background color? Then you need only one image.

Marshall

rainborick




msg:4449416
 2:48 pm on May 4, 2012 (gmt 0)

For a variety of reasons, mostly my own laziness, I have been unable to use the popular interfaces like iMagick. So I execute ImageMagick commands in PHP using either system() or passthru(), as appropriate. It's not very elegant in practice, but it works and it makes translating the examples on imagemagick.org dirt simple.

rocknbil




msg:4449457
 3:47 pm on May 4, 2012 (gmt 0)

The overlay is good for conceptual stuff like cars, but products like T shirts will require actual photos as there are too many variables in the images to just do a color overlay. Probably worth a try.

My main concern is to create those images programatically using php.


But you'd still have to use Javascript to create the mouseover effect. Sure ImageMagick can "do" this, but if these are product images programmatically outputting them is going to give results that aren't consistent with the actual product. You are far better off using static images, even if you need to take one of them and tweak them in Photoshop. *You* can see if a color approaches the actual item or not, a computer cannot.

Look how simple and solid this complex and unreliable approach can be. :-)

What you'd do in PHP is output hidden elements containing the images so they are already loaded and there's no delay on mouseover:

<p class="hidden-img"><img id="green-tee" src="/images/green-tee.jpg" alt="Green Tee"></p>
<p class="hidden-img"><img id="blue-tee" src="/images/blue-tee.jpg" alt="Blue Tee"></p>
<p class="hidden-img"><img id="red-tee" src="/images/red-tee.jpg" alt="Red Tee"></p>
<p class="hidden-img"><img id="gray-tee" src="/images/gray-tee.jpg" alt="Gray Tee"></p> <!-- this is your "default" -->

p.hidden-img { display:none; }

Then your color swatches would call a Javascript program on mouseover:

<ul id="colors">
<li><a id="green-link" href="/images/green-tee.jpg" onmouseover="swap('green-tee'); onmouseout="swap('gray-tee'); onclick="return false;">Green</a></li>
<li><a id="blue-link" href="/images/blue-tee.jpg" onmouseover="swap('blue-tee'); onmouseout="swap('gray-tee'); onclick="return false;">Blue</a></li>
<li><a id="red-link" href="/images/red-tee.jpg" onmouseover="swap('red-tee'); onmouseout="swap('gray-tee'); onclick="return false;">Red</a></li>
</ul>

(Of course, you wouldn't use inline Javascript like that, you'd externally attach the behavior to these links.)

#colors li, colors li a { display: block; width: 100px; height: 100 px; list-style:none; outline:none; text-indent: -50000px; }
#colors li #blue-link { background: #0000ff; }
#colors li #green-link { background: #008040; }
#colors li #red-link { background: #ffff00; }

Now you have your target object,

<p><img id="display-image" src="/images/gray-tee.jpg" alt="gray Tee"></p>

and the Javascript function "swap" would do **something** like this.

function swap(id) {
var targ = document.getElementById('display-image');
var src = document.getElementById(id);
if (targ && id) {
targ.src=id.src;
}
}


None of this is copy and paste code. It is typed on the fly and presented to give you an idea of how simple this can be. No monolithic libraries, no jQuery, simple. Don't get me wrong, jQuery is awesome, but it would be overkill for small tasks like this.

ezeevivek




msg:4449491
 4:37 pm on May 4, 2012 (gmt 0)

Thanks rocknbil for the JS stuff, but I would like to use Ajax and php to generate images and store them in cache rather than pre-loading all of them in page. Well but thats not a problem.

As you said t-shirts kinda images have details like shading, folds etc and that needs to be taken care. Check the link I posted from imagemagick, thats good but how to do that in PHP?

httpwebwitch




msg:4449548
 6:06 pm on May 4, 2012 (gmt 0)

The switching background color is a neat idea.
But I can't imagine it'll be easy to make a transparent shirt. (!) Maybe in photoshop if you play with lightness and alpha masks... ?

how about, load up your white shirt in Pshop, change the display property of that layer to "hard light" (?), put a colour in a layer behind it... gee I don't use PhotoShop every day so I forget the best way to do it but I know it's possible and not that difficult.

Ultimately you'll want a flat rendering of your blank shirt in each of your colors, and the shirt design will be layered on top of that.

The PHP Imagick functions are good. rainborick says he uses passthru, but it's so much nicer to do it using the Imagick module.

[php.net...]

if the imagick functions don't work, you may not have them enabled in your PHP installation. Get them installed. It's a good thing to know how to do this; if it's your first time, it surely won't be your last time.

get thee to a command line.


depending on your flavour of linux...
do this:

> yum install ImageMagick.i386
> yum install ImageMagick-devel.i386
> pecl install imagick

or use apt-get or aptitude instead of yum... search the interweb for instructions for your particular distro of Linux

then create an inclusion file for the extension:

> echo "extension=imagick.so" > /etc/php.d/imagick.ini

then restart apache & php

> /etc/init.d/httpd restart
or
> service httpd restart
or
> service httpd graceful

last tip: don't generate your t-shirt designs on demand with AJAX. Pre-generate them so they're cached on the server as a SPRITE. That means all the tshirt color variations are in one image, it loads once on pageload, and you show/hide them by changing the CSS.

Explore how to use sprites:
[w3schools.com...]
[css-tricks.com...]
[coding.smashingmagazine.com...]

Imagick should be very good at making sprites.

ezeevivek




msg:4449814
 11:22 am on May 5, 2012 (gmt 0)

It can be exactly same as the Chrome Key stuff given at imagemagick website but apart from that I need to merge transparent design image over that with folds and swirls appear on design as well.

I searched net and found lot of people looking for this solution but none of them actually posted any possible solution or coding for that

Some youtube videos for that - [youtube.com...]
Source files :
[jimiyo.com...]
[jimiyo.com...]

Please help !

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved