Standalone Documentation v1.4.3

Requirements

Include View360.js and View360.css file inside the header of HTML page.
<script type="text/javascript" src="./View360.js"></script>
<link rel="stylesheet" type="text/css" href="./View360.css" />
To display product in page, inside body tag add one element to be a holder. <div id='view360'></div> This element is a first argument of start() method: view.start(document.getElementById('view360')); This element is not required for lightbox and fullview modes.

Basic usage

Using View360 without changing any configuration options.
var view = new View360();
view.setImagesDirectory( "./pathToProductImages" );
view.start( document.getElementById("view360") );

Methods

setMode( mode )

Sets visual appearance. Options:fixed, lightbox, fullview and responsive .

  • fixed - Used for in page display. This is default value.
  • lightbox - Product will be shown in lightbox (in page popup).
  • lightbox-responsive v1.4.3 (recommended) - Responsive lightbox, configure it via config properties: width, height, paddingTop, paddingBottom, paddingLeft, paddingRight
  • lightbox-css v1.4.3 - Same as lightbos, responsive via css
  • fullview - Product will be scaled 100% by width and height inside browser.
  • responsive - Fits by width, height is auto calculated, view will automatically change its size on holder resize.
  • responsive-fit v1.4.0 - Fits its holder, view will automatically change its size on holder resize.

setFitMode( mode ) v1.4.1

Sets images fit behaviour inside View360 area. Options:top-bottom, left-right and fit .

  • top-bottom - Image is scaled in View360 area by its height.
  • left-right - Image is scaled in View360 area by its width.
  • fit - Full image is inside View360 visible area.

setImagesPattern( pattern )

If we have hundreds of product, we must standardize product names in order to dynamically display products without worry about images names.

Imagine we have 36 images for full rotation: image-0-0.jpg, image-1-0.jpg, .... image-35-0.jpg

We can simply set pattern image-%COL-%ROW.jpg and component will auto load images without need to pass array of images names.

From version v1.4.1 we can use zerro leading pattern.
E.g. for images with names: image-001.jpg,image-002.jpg, ....
we will use pattern: "image-%CCC%.jpg".

setImagesDirectory( dir )

Path to images directory.

setFullSizeImagesDirectory( dir )

Path to full sized images. Tease images will be loaded product zoom.

setConfig( o )

Main configuration. All properties of object o are optional.

Default values: {
autoRotate: false,
autoRotateDirection: 1,
autoRotateSpeed:50,
autoRotateStopOnMove:true,
zoomMultipliers: [ 1, 1.2, 1.5, 2, 3 ],
loadFullSizeImagesOnZoom: true,
loadFullSizeImagesOnFullscreen: true,
width: 620, //var w = 800;
height: 350, //var h = 532;
rows: 1,
columns: 36,
xAxisSensitivity : 10,
yAxisSensitivity : 40,
inertiaConstant : 10
fitmode: "left-right",
oneTurnOnStartUp: true,
imagesNumbering: 0,
imagesNumberingUpDown: 0,
playBtnMode: "loop",
opositeDirection: false,
loadOnPageLoad: false,
initialImage: 0,
loadFirstImage: true,
firstImageOpacity: 0.5,
}

  • autoRotate ( bool ) - auto rotate on init
  • autoRotateDirection ( 1 | -1 ) - auto rotate direction
  • autoRotateSpeed ( int ) - auto rotate speed
  • autoRotateStopOnMove ( bool ) - stop auto rotation on user interaction
  • zoomMultipliers ( array ) - array of zoom multipliers
  • loadFullSizeImagesOnZoom ( bool or number ) - If set to true, full size images will be loaded on first zoom. Also this property can set to one of the vaues from zoomMultipliers array. Full size images will be loaded on certan zoom multiplier.
  • loadFullSizeImagesOnFullscreen ( bool ) - If set to true, fullscreen button starts full size images loading.
  • width (int) - View width
  • height (int) - View height
  • rows (int) - Number of rows. Mouse drag up/down changing row.
  • columns (int) - Number of columns. Mouse drag left/right changing column.
  • xAxisSensitivity (int) - Column change sensitivity in pixels
  • yAxisSensitivity (int) - Row change sensitivity in pixels.
  • inertiaConstant (int) - Inertia rotation constant. Set 0 to disable.
  • fitmode (string) v1.4.1 - the same as setFitMode()
  • oneTurnOnStartUp (bool) v1.4.1 - Rotate once on startup.
  • imagesNumbering (int) v1.4.1 - First image index for colums (in relation with setImagesPattern()).
  • imagesNumberingUpDown (int) v1.4.1 - First image index for rows (in relation with setImagesPattern()).
  • playBtnMode (string) v1.4.1 - Action to execute on play button press: "loop", "oneloop", "firstimage" - rotate to first image, "lastimage" - rotate to last image
  • opositeDirection (bool) v1.4.1 - Change mouse direction.
  • loadOnPageLoad (bool) v1.4.1 - Start images loading after whole page is loaded.
  • initialImage (int) v1.4.1 - Firt image index.
  • loadFirstImage (bool) v1.4.1 - Load first image before all other.
  • firstImageOpacity (float) v1.4.1 - First image opacity.

setNavigationConfig( o )

Navigation buttons configuration. All properties of object o are optional.

Default values: {
btnWidth:40,
btnHeight:40,
btnMargin:5,
turnSpeed: 40,
showButtons:true,
showTool:true,
showPlay: true,
showPause: true,
showZoom: true,
showTurn: true,
showFullscreen: true,
align: "center",
orientation: "horizontal",
type: "square",
cornerRadius: 20,
btnImageSize: "100%",
showClose: true
}

  • btnWidth ( int ) - button width
  • btnHeight ( int ) - button height
  • btnMargin ( int ) - distance between buttons
  • turnSpeed ( int ) - rotation speed for turnLeft and turnRight buttons
  • showButtons ( bool ) - show navigation buttons
  • showTool, showPlay, showPause, showZoom, showTurn, showFullscreen ( bool ) - show the corresponding button
  • align ( string ) v1.4.1 - buttons holder align - options: "center" , "left" , "right"
  • orientation ( string ) v1.4.1 - horizontal or vertical buttons orientation - options: "horizontal" , "vertical"
  • type ( string ) v1.4.1 - buttons shape - options: "square" , "round" , "custom"
  • cornerRadius ( int ) v1.4.1 - size of corner radius for "custom" type
  • btnImageSize ( string ) v1.4.1 - size of an image inside the button
  • showClose ( bool ) v1.4.3 - show close button in lightbox (lightbox mode)

setLoaderInfoConfig( obj )

{
display:true,
holderClassName: null,
loadingTitle: null,
loadingSubtitle: null,
loadingMessage: null,
modalBackground:"#FFF",
modalOpacity:0.5,
circleWidth:"70",
circleLineWidth:"10",
circleLineColor: "#555",
circleBackgroundColor: "#FFF"
}

  • display ( bool ) - display loader info
  • holderClassName ( string ) - classname for css override
  • loadingTitle, loadingSubtitle, loadingMessage ( string ) - Three rows of text. each one can be used for product name of any info during loading.
  • modalBackground ( int ) - Color of loader background
  • modaOpacity ( number ) - Opacity of loader background (range between 0-1)
  • circleWidth ( number ) - Loader circle width
  • circleLineWidth ( number ) - Loader circle line width
  • circleLineColor ( string ) - Loader circle line color
  • circleBackgroundColor ( string ) - Loader circle background color

setFullSizeLoaderInfoConfig( obj )

Set full size images loader info configuration. View setLoaderInfoConfig() method description for details.

start( holderElement )

holderElement ( HTMLElement ) - Holder for View360

This method is required. It starts View360.