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.

  • id ( int ) - prodict id, this parameter mast be unique for multiproduct view
  • iamgePath ( string ) - path to image
  • thumbImagePath ( int ) - [optional] path to image thumbnail. If not set, main image will be used
  • linkUrl ( string ) - Link for image button

    • 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."
    };