Working with png/jpg files

You create your products with png and/or jpg image files. You do not need to upload any vector files.

For any type of product

Use the plugin for any type of product. You can use it as T-Shirt Designer, Postcard Designer, Bottle Designer and much more...

Add designs

Let the user create their products with an own sidebar for adding different designs to a product.

Colorizable elements

You decide which elements can be colorizable by the users. You can set static color values or enable the colorpicker.

Transformable elements

You can adjust every element if its can be resized, removed, rotated or moved (optional bounding box).

Great API

The plugin comes with a great API, which returns amongst other things the current product with all elements.

Clothing Designer

In this example you see the plugin used as Clothing Designer. The Checkout, Print buttons are binded with the API of the plugin. Prices are also used and with the getPrice() method and the priceChange event, you can get the current price and output it in a custom HTML element.

Default Text
Default Text

Output - only the editable elements:


Javascript Code:
var thsirtDesigner = $('#clothing-designer').fancyProductDesigner({
  fonts: ['Arial', 'Fearless', 'Destroy', 'Helvetica', 'Times New Roman', 'Verdana', 'Geneva'], 
  customTextParamters: {x: 210, y: 250, colors: "#000000", removable: true, resizable: true, draggable: true, rotatable: true}
}).data('fancy-product-designer');

$('#print-button').click(function(){
  thsirtDesigner.print();
  return false;
});

$('#checkout-button').click(function(){
  thsirtDesigner.getProduct(true); //see output panel
  return false;
});

$('#clothing-designer')
.bind('productCreate', function(evt){
  $('#thsirt-output').html('Click the "Checkout" button to see the returning object with all properties.');
  $('#thsirt-price').text(thsirtDesigner.getPrice());
})
.bind('priceChange', function(evt, price, currentPrice) {
  $('#thsirt-price').text(currentPrice);
});


Ipod Designer

In this example the design bar is hidden, because no designs are set for this designer. Every logo has also a bounding box and you can enter an own name on the back of the Ipod.

Your Name
Your Name
Your Name
Your Name
Your Name


Javascript Code:
var ipodDesigner = $('#ipod-designer').fancyProductDesigner({
  customTexts: false
}).data('fancy-product-designer');


Business Card Designer

Here is the editor box enabled, which can be very helpful when setting up your product designers. You can see the current position and dimension of the selected element in this box and copy the values in your HTML document. Each text element has also a bounding box.

Your Company John Doe | Senior Developer Phone +49 241 123456789 Mobile +49 173 123456789


Javascript Code:
var ipodDesigner = $('#businnescard-designer').fancyProductDesigner({
  editorMode: true, 
  customTexts: false
}).data('fancy-product-designer');

Basic Setup

All the images and texts for your products will be set in a div.
The .fpd-product elements can hold img and span elements. You set the different parameters in a data-parameters attribute.
Basic HTML Setup
<div id="fpd">
  <div class="fpd-product" title="TITLE" data-thumbnail="PREVIEW.png">
    <img src="URL_OF_THE_IMAGE.png" title="TITLE_FOR_IMAGE" data-parameters='{"x": 100, "y": 200, "colors": "#D5D5D5", "price": 20}' />
    <span title="TITLE_FOR_TEXT" data-parameters='{"x": 150, "y": 250, "removable": true, "draggable": true, "rotatable": true, "resizable": true, "colors": "#000000,#ffffff,#990000"}' >Default Text</span>
  </div>
  <!-- Here you can add more product divs -->
  <div class="fpd-design">
    <img src="URL_OF_THE_IMAGE.png" title="TITLE_FOR_IMAGE" data-parameters='{"x": 215, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "price": 10}' />
    <!-- Here you can add more img designs -->
  </div>
</div>
Plugin Call
$(document).ready(function(){
  $('#fpd').fancyProductDesigner().data('fancy-product-designer');
});

Available Options

Option Explanation Default Value
minImageWidth The min. width for all image elements. 50
maxImageWidth The max. width for all image elements. 300
minTextSize The min. text size. 10
maxTestSize The max. text size. 50
textSize The default text size for all text elements. 18
scrollAmount The amount of the scrolling 100
fontDropdown Show or hide the font dropdown for text elements. true
fonts An array containing all available fonts in the font dropdown. You can register custom fonts in the jquery.fancyProductDesigner-fonts.css. ['Arial', 'Helvetica', 'Times New Roman', 'Verdana', 'Geneva']
customTexts Show the button for adding custom texts to the product by giving it a label. Would you like to hide it, just set this option to false. 'Add text'
defaultCustomText The default text for custom text elements. 'Enter your text here'
customTextParamters The parameters for the custom texts. The object will merge with the default parameters object. {}
editorMode Enable the editor mode to get a box with details about the position and dimension of an element. false
canvasAlert The message that appears when the browser does not support HTML5 canvas. 'Sorry! But your browser does not support HTML5 Canvas. Please update your browser!'
outOfContainmentAlert The alert message when an element is out his containment and calling the getProduct() method. 'An element is out of his containment. Please move it in his containment!'
Example
var fpd = $('#fpd').fancyProductDesigner({
  maxImageWidth: 100, 
  fontDropdown: false, 
  defaultCustomText: 'Your text here'
 }).data('fancy-product-designer');

Adding custom fonts

To add custom fonts the dropdown, you only need the woff file of your font, if you only have the ttf file, you can use this converter.
Then you register the font with the @font-face method.
CSS code:
@font-face {
 font-family: 'THE_FONT_NAME';
 src: local('☺'), url('../fonts/FONT_FILE.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}
Finally you only need to pass the font name in the array of the fonts options:
$('#fpd').fancyProductDesigner({
  fonts: ['Arial', 'Helvetica', 'Times New Roman', 'Verdana', 'Geneva', 'THE_FONT_NAME']
}).data('fancy-product-designer');
					

You set these parameters as an object in the data-parameters attribute for every element in the HTML document.

Parameter (Type) Explanation Default Value
x (Number) The x-Position relative to the product container. 0
y (Number) The y-Position relative to the product container. 0
colors (Boolean or string) By default its set to false, this means for an image it will not be converted in a canvas element so it can be colorized by the user.
You can also enter a string with hex color values separated by commas (e.g. '#000000,#ffffff,#990000'), this will activate a list with static colors. If you want to activate the colorpicker, just enter a string with one hex color value (e.g. '#000000').
false
removable (Boolean) Set it to true if the element can be removed. false
draggable (Boolean) Set it to true if the element can be dragged. false
rotatable (Boolean) Set it to true if the element can be rotated. false
resizable (Boolean) Set it to true if the element can be resized. false
scale (Number) The scale factor. For example you want to use an image that can be resized and to prevent that it gets pixelated as soon as the user resize it, you can set larger image and set a scale factor. 1 = no scaling. 1
degree (Number) A value between 0 and 360 to set the start degree for the rotation. 0
price (Number) The additional price for that element. 0
boundingBox (Boolean , string or object) By default its set to false, that means no bounding box.
You can also enter a title of another element and the plugin knows that this is the containment for the element.
If you want to create a custom bounding box, you can also enter an object with following properties: x,y,width and height. E.g. {x: 100, y: 200, width: 300, height: 400}
{}
Example
//HTML code
<div id="fpd">
  <div class="fpd-product" title="PRODUCT TITLE" data-thumbnail="PREVIEW.png">
    <img src="ANYPNG.png" title="ELEMENT TITLE" data-parameters='{"x": 120, "y": 76, "colors": "#b93434", "price": 20, "draggable": true, "resizable": true}' />
  </div>
</div>

//JS code
$('#fpd').fancyProductDesigner().data('fancy-product-designer');

Methods

Method Explanation Parameter (Type)
addElement(type, source, title, parameters) Adds a new element to the product container. This could be a text or image.
  • type (String) - 'text' or 'image'.
  • source (String) - The URL of the image or a custom text.
  • title (String) - A unique title for the element.
  • paramters (Object) - An object containing the parameters, that will merge with the default parameters object. Check out the parameters for an element.
Removed since V1.0.1
addText(text)
Adds a custom text to the product container text (String) - The default text.
getProduct(onlyEditableElements) Returns an object for a single product or an array when using different views for a product. The elements in the array are objects where every object contains the title for the product(view) and an array with all elements and their parameters. onlyEditableElements (Boolean) - Set it to true if you only want to get the elements that are editable.
getPrice() Returns the current price. -
clear() Removes all elements in the product container. -
Since V1.0.1
addDesign(title, source, parameters)
Adds a new design to the design sidebar.
  • source (String) - The URL of the png file.
  • title (String) - A unique title for the design element.
  • paramters (Object) - An object containing the parameters, that will merge with the default parameters object. Check out the parameters for an element.
Example
var fpd = $('#fpd').fancyProductDesigner().data('fancy-product-designer');
//return only editable elements
console.log(fpd.getProduct(true));

The returning object of the getProduct() method

The getProudct() methods returns an object, with the title of the product and an array with all items. The elements of this array contains also objects with the item parameters of the product. This is how an object look like:
"title": "THE TITLE OF THE ITEM",
"source": "THE_IMAGE_URL.png",
"parameters": {
	"x": 0, //the x-position
	"y": 0, //the y-position
	"colors": [], //an array containing all color(s) you set for this item
	"removable": false,
	"draggable": false,
	"rotatable": false,
	"resizable": false,
	"scale": 1,
	"degree": 0, //the rotation for the item
	"price": 0,
	"boundingBox": false, //the bounding box
	"source": "THE_IMAGE_URL.png",
	"originX": 0, //the origin x-position
	"originY": 0, //the origin y-position
	"currentColor": "#D5D5D5", //the current color for the item
	"originWidth": 341, //the origin width - only for image elements
	"originHeight": 418, //the origin text - only for text elements
	"width": 341, //the current width - only for image elements
	"height": 418, //the current height - only for image elements
	"text": "Enter your text here", //the current text - only for text elements
	"font": "Arial", //the selected font - only for text elements
	"textSize": 18 //the current text size in px - only for text elements
}

Events

Event Explanation Parameter (Type)
'canvasFail' Gets triggered when the browser does not support HTML5 canvas. event (Event)
'ready' Gets triggered when the main structure has been built and the designer is ready to receive API method calls. event (Event)
'elementAdded' Gets triggered when a new element (image, text) has been added to the product.
  • event (Event)
  • addedDiv (jQuery) - the div that has been added to the product container, that contains an img, canvas or input element.
'productCreate' Gets triggered when a product is created.
  • event (Event)
  • element (jQuery) - the div that has been added to the product container, that contains an img, canvas or input element.
'priceChange' Gets triggered when the price changes.
  • event (Event)
  • singlePrice (Number) - the price for the single element that has been added.
  • totalPrice (Number) - the price for the whole product.
'elementOut' Gets triggered when an element is out his containment.
  • event (Event)
  • element (jQuery) - the div that his out his containment.
'elementIn' Gets triggered when an element is again in his containment
  • event (Event)
  • element (jQuery) - the div that is inside his containment again.
Example
//every time an element is added that has a price, this event will be triggered
$('#fpd').bind('priceChange', function(evt, singlePrice, totalPrice) {
  console.log('Single price:' + singlePrice);
  console.log('Total price:' + totalPrice);
});

//You also have access to the parameters of an element
$('#fpd').bind('elementAdded', function(evt, element) {
  //will return an object with all parameters
  console.log(element.data('params'));
});