FOR YOUR WEBSITE
INSTANTLY
Requirements
Include tryme.min.js and tryme.min.css file inside the header of HTML page.
<script type="text/javascript" src="./tryme.min.js"></script>
<link rel="stylesheet" type="text/css" href="./tryme.min.css" />
Basic usage
Following code adds three product and sets default background photo.
var tryme = new TryMe();
tryme.addProductImage(1, "TV", "tv.png");
tryme.addProductImage(2, "Table", "table.png");
tryme.addProductImage(3, "Chair", "chair.png");
tryme.setDefaultBackground("default-background.jpg");
tryme.setConfig({
"useLocalStorage:" true,
"viewMode:": "image"
});
tryme.open();
Methods
open( [holderElement] )
holderElement ( HTMLElement ) - Holder/parent for TryMe
This method is required. It starts TryMe. If HTMLElement is not set, it will be shown in fullscreen lightbox.
addProductImage( id, imagePath, [thumbImagePath], [linkUrl] )
Add product image. This method can be executed multiple times in order to add multiple products.
setDefaultBackground( imagePath )
Default background photo.
setConfig( o )
Main configuration. All properties of object o are optional.
Default values:
{
useLocalStorage: true,
useLatestPhoto: true,
viewMode: "image",
initialProductScale: 0.5,
maxBgImageWH: 1600,
maxOutImageWH: 1600,
multipleProducts: true,
multipleProductInstances: true,
fitType: "padding",
paddingSize: "px",
paddingUnit: "10",
showSwitchCameraBtn: true,
showLinkBtn: true,
showCloseBtn: true,
showCaptureBtn: true,
showMainBtn: true,
showOperationBtn: true,
showDeleteBtn: true,
showThumbnails: true
}
- useLocalStorage ( bool ) - all images will be stored on client side. This option use localStorage for storing data.
It enables internal session handling between pages. Product position, scale and rotation is stored to.
- useLatestPhoto ( bool ) - latest background photo will be shown on open.
- viewMode ( string ) - Initial behavior: image|camera|chooser
- image - show background image, it show latest image in case useLatestPhoto is true, default background image or empty background
- camera - it activate camera on initialization. Depend on device it, client may interact in order to improve webpage to access camera stream.
- chooser - show chooser popup
- initialProductScale ( float ) - initial product scale.
- maxBgImageWH ( int ) - maximum width/height of background image. If larger it will be scaled.
- maxOutImageWH ( int ) - maximum width/height of output image.
- multipleProducts ( bool ) - allow multiple products
- multipleProductInstances ( bool ) - allow one product multiple instances
- fitType ( string ) - Fit to parent: padding|fullsize
- padding - Its open in fullscreen, or fill parent, it use paddingSize and paddingUnit
- fullsize - Its open in fullscreen, or fill parent, 100% width and height.
- paddingSize ( int ) - Distance from edge. Used only when fitType is 'padding'
- paddingUnit ( string ) - Unit for paddingSize. px,em,%, ...
- showSwitchCameraBtn ( bool ) - show switch camera button. This button only appear when camera is activated
- showLinkBtn ( bool ) - show link button
- showCloseBtn ( bool ) - show close button
- showCaptureBtn ( bool ) - show capture button
- showMainBtn ( bool ) - show main button
- showOperationBtn ( bool ) - show rotate and zoom buttons
- showDeleteBtn ( bool ) - show delete button
- showThumbnails ( bool ) - show thumbnails line
Language translation
Use global variable TryMeLangCustom to set new values
var TryMeLangCustom = {
title_download: "Get it!",
subtitle_download: "Download photo to your device",
title_switch_camera: "Switch camera",
subtitle_switch_camera: "Switch to right camera",
title_turn_camera_off: "Turn camera off",
subtitle_turn_camera_off: "Thats's all folks",
title_turn_camera_on: "Turn camera on",
subtitle_turn_camera_on: "Try items in real enviroment",
title_background_photo: "Background photo",
subtitle_backgrund_photo: "Choose or capture background photo",
click_to_rotate: "Press and move to rotate",
click_to_zoom: "Press and move to zoom",
drop_to_delete: "To delete stage product drop it to basket",
camera_not_supported: "Your browser does not support access to camera.<br/> Use Chrome, Firefox or Edge."
};