I finished my first jQuery Plugin today and I’d like to think I did a pretty darn good job. The plugin allows you to provide a way for your users to visualize products in different colors. The plugin is light and uses only two images to achieve the effect and is very flexible and can use any color you wish. You can check out the plugin’s page, look at the source code, or keep reading for more background.
The Idea
The idea came about when I had to find a solution for this exact problem at work. A client wanted a way for the customers to view their furniture in different colors, but didn’t have photographs for each color. Now, I could have Photoshopped each image with new colors, but that isn’t very flexible and requires much more work. I couldn’t find any other plugin that did what I wanted and so I was went ahead and made my own.
The Technique
The basic concept of the plugin is to have two images, laid on top of one another. One image, on bottom, would be the full photograph of the product, no editing. It was important that the photograph was a plain color, close to white, because it would make it easier to change colors. The next image is a transparent mask. The image is just all the parts of the photo you don’t want colored with the parts you want colored cut out.
Next, I just had to make a way for the user to set the background color of the mask image to an RGBa value. The mask only shows the background color where it is transparent and since we use RGBa, we get a nice alpha overlay on top of the full photo. This is, essentially, the trick.
Some Small Discoveries On The Way
When I first began writing the plugin, I wanted the product image to display and underneath a color swatch allowing the user to click through each color. I built each swatch using anchor tags and at first I was assigning each color an id and setting the background color in the CSS. After a few colors, I thought there must be a faster way. I realized that since I was holding the color values for the mask in the anchors rel attribute, I could use that same rel attribute to generate all the colors.
$(swatches).each(function(){
var color = "rgba(" + $(this).attr('rel') + "," + o.swatchTransparency + ")";
$(this).find('span').css('background', color);
});
Taming the IE Beast
Of course I would run into some issues with the beloved Internet Explorer. Apparently, IE6, 7, 8, and 9 don’t support RGBa colors. This made things a bit more difficult. After some research, I found that there was a workaround and so I had to use some conditionals to accommodate for our ugly friend.
if($.browser.msie) {
color = $(this).attr('rel');
var colors = color.split(",");
color = colorToHex(colors);
$(mask).css({'background': 'transparent', 'zoom': 1, 'filter': 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#80' + color + ',endColorstr=#80' + color + ')'});
}
But again, IE does not like RGB values for this filter so I had to use a method to convert the RGB values into Hex.
//rgb to hex
function colorToHex(color) {
var red = parseInt(color[0]);
var green = parseInt(color[1]);
var blue = parseInt(color[2]);
var rgb = blue | green | red;
return rgb.toString(16);
};
The colors might not match up perfectly with the RGBa counterparts, but its close enough.
From Here On Out
Writing my first jQuery plugin was a lot of fun. I’m always looking for another challenge. I will probably try to adapt this plugin to use for products with multiple areas that can have different colors. I think it should be possible with multiple mask layers, but we’ll have to see, so stay tuned. Check out the plugin’s page for instructions on how to use it and a working demo. The plugin is licensed under an MIT license, so you’re free to do whatever, but I always appreciate a link back or a donation. Hope you enjoy the plugin.
