Plugin / Spin 360 deg and 3D Model Viewer

Installation

1. Upload the plugin files to the your_wordpress_plugins_dir/spin360 directory, or Install as a regular WordPress plugin
2. Go your Plugins page via WordPress Dashboard and activate it

3. Use these shortcodes to post or page

   [spin360 canvas_name="s1" imgs_folder="my_product/" imgs_nbr=100 aspect_ratio=1.33333 speed=1.0 loop=true]

   [spin360 canvas_name="s1" imgs_folder="spin360demo/" imgs_nbr=48 aspect_ratio=1.33333]

   [spin360 canvas_name="s1" imgs_folder="spin360demo/" imgs_nbr=100 autostart=false gesture=vertical]

   [spin360 canvas_name="s1" imgs_folder="spin360demo/" imgs_nbr=36 hide_cmds=all]

   defaults: canvas_name="s1", aspect_ratio=1.33333, speed=-1.0, loop=true hide_cmds=zoom,fullscreen

   Be sure to use the HTML editor when inserting shortcodes!

   check that your Quotation marks are exactly the correct symbol (Alt 34)

4. Use jpg or png image files to display your model as a dynamic sequence;

   Name your images as following: 0001.jpg, 0002.jpg, ..., 0048.jpg (4 digits name)

   for png as following: 0001.png, 0002.png, ..., 0048.png (4 digits name) and add img_type=png to your shortcode

   NB .jpg or .png extension MUST be lowercase

   [spin360 canvas_name="s1" imgs_folder="spin360demo/" imgs_nbr=36 img_type=png]

   for 3D models the image sequence can be generated using Blender turntable animation

   upload your project image files in a your_wordpress_uploads_dir/spin360show subfolder

   (i.e "your_wordpress_uploads_dir/spin360show/my_product/") via a standard FTP access

   NB: for multisite add /sites/#blog_id/ to path your_wordpress_uploads_dir/sites/2/spin360show

5. Modify the css style to adapt some features

   • change css/spin-style.css to change some style aspect

6. click to stop animation, click and hold to drag, double click to restart or invert sense of animation

Shortcode Parameters:

• canvas_name = canvas name needed in case of multiple shows on the same page (required)
• imgs_folder = folder of image sequence project; i.e.: "spin360demo/" or "my_product" (required)

• imgs_nbr = any number > 1; i.e.: 100 image screenshots (required)

  Note: name your images as following: 0001.jpg, 0002.jpg, ..., 0100.jpg (4 digits name)
  or for png as following: 0001.png, 0002.png, ..., 0100.png (4 digits name) and add img_type=png to your shortcode
  Don’t mix up jpg with png image types on the same project folder.

• speed = any number > 0.1 and < 10; i.e.: 1.5; Negative values will start the animation reversed
• aspect_ratio = any number i.e.: 1.3333 for 4/3 aspect ratio
• change css/spin-style.css to adapt some style aspect (as loading image or button font color)
• loop = true or false (default is true)
• autostart = true or false (default is true) auto start the animation on load
• gesture = ‘horizontal’ (default) will make animation on mouse left/right movement; ‘vertical’ value will make animation on mouse up/dowm movement
• hide_cmds = all, fullscreen, reverse, zoom or false (default is false)
• button_color = ‘#00ABFF’ (default) HTML color values