PHP Script for embedding a full 360 degree product view into a webpage using just the product images. No need for 3DRT Setup Utility. Perfect for projects with hundreds of products.
Usage:
|
1 2 |
include_once('yofla_3drt/lib/yofla/Rotate_Tool.php'); echo Rotate_Tool::get_iframe('jewels/neck/jewel-03'); |
Benefits:
- No need to use the 3DRT Setup Utility, create rotation just by uploading the product images.
- One central location for the rotatetool.js engine. If there is a new version, you can upgrade all rotations by just replacing one file.
- One central location for the player theme/skin. You can change the look of the player for all rotations by just changing one variable.
- Configure settings for a product (or group of products) by editing a single settings.ini file
Example
Download:
Download from here.
Free for all 3DRT PRO WL, 3DRT ENTERPRISE WL users.
Guide:
1) Install the PHP Script
Unpack the downloaded yofla_3drt folder into your web root (or its subdirectory)
2) Upload Product Images
Place product photos into a directory within the “products folder”, e.g. “yofla_3drt/products/backpack“.
It is possible to use a separate set of high-resolution images. Then use these folder names
– “yofla_3drt/products/backpack/images” for normal images (e.g. 400×300)
– “yofla_3drt/products/backpack/imageslarge” for hi-res images (e.g. 1024×768)
You can also use a nested directory structure, e.g.
– “yofla_3drt/products/clothing/shoes/man/product_001”
– “yofla_3drt/products/clothing/shoes/man/product_002”
3) Use in your PHP script
3.1) Include the Library with:
include_once(‘yofla_3drt/lib/yofla/Rotate_Tool.php’);
3.2) Use a simple php command to embed the 360 Product view;
|
1 |
echo Rotate_Tool::get_iframe('jewels/neck/jewel-03'); |
Documentation:
Directory structure
– yofla_3drt
– cache : generated config.js files and html files are stored here
– lib : php source files
– player_files : the “engine” rotatetool.js JavaScript player file is located here
– products : place your product images inside this directory
– templates : template files for iframe tag and iframe page
– themes : themes/skins to customize the look of the 360° product player
Functions
Rotate_Tool::get_iframe( $path, $options=null )
Returns iframe html embed code.
$path : The relative path to the directory with images (relative to products folder)
$options : Optional parameter. Is an array with options. Currently these options are supported:
– “width” [number] : width of the iframe
– “height” [number] : height of the iframe
Example:
|
1 2 |
include_once('yofla_3drt/lib/yofla/Rotate_Tool.php'); echo Rotate_Tool::get_iframe('jewels/neck/jewel-03', array("width"=>640,"height"=>480)); |
Notes:
The default settings (including iframe styles) are defined in “yofla_3drt/settings.ini” file.
Rotate_Tool::get_products_list()
Returns an array of all products placed in the “yofla_3drt/products”” directory
Sample Array Structure:
|
1 2 3 4 5 6 7 8 9 10 11 |
Array ( [0] => Array ( [dir_name] => deuter [path] => deuter [iframe_url] => http://example.com/yofla_3drt/cache/pages/deuter_iframe.html [config_url] => http://example.com/yofla_3drt/cache/configs/deuter_config.js [product_name] => Deuter Backpack ) ) |
Rotate_Tool::scan()
Scans the “yofla_3drt/products” directory for products and creates:
1) Cached config.js and iframe html pages for all products in yofla_3drt/cache directory
2) A list of products stored in yofla_3drt/cache/products.dat
Run this command each time you add/remove/modify a product.
Settigns File
There is one gobal settings.ini file in the yofla_3drt directory. Each product inherits these settings. Each product, or parent directory of a group of products can have it’s own settings.ini file defined that overrides the global settings. It is enough to enter only the values you want to override.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
; configuration file for 3D Rotate Tool PHP Script ; comment starts with ';' ;PLAYER SETTINGS ;default width and height of the rotateTool movie [player] width = 500 height = 375 iframeStyle = "max-width: 100%; border: 1px solid silver;" ;SYSTEM SETTINGS [system] rotatetoolUrl = ;optionally enter custom url for rotatetool.js engine, e.g. "http://example.com/rotatetool.js" theme = "inverted" ;CONFIG FILE SETTINGS [config] ;rotation settings bounce = False rotatePeriod = 3 rotateDirection = 1 rotate = "true" ;string values ["true"|"once"|"false"] ;control settings maxZoom = 500 dragSpeed = 0.5 reverseDrag = True ;preloader settings color1 = #FF0000 type = 'wave' ;enter 'default' for percentage preloader ;user iterface settings showToggleFullscreenButton = False showZoombar = False showArrows = True |