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.

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.

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.

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');