Banner for Spin360
A plugin to add 360 rotation support and 3d view animation in wordpress using shortcodes; Responsive Web Design; 3D model Rotation, 360 degrees view. Wordpress Tutorial
Noted That:
  • To install correctly this spin360.zip .
  • Fisrt Download the spin360.zip to your computer
  • Extract/Open spin360.zip to Your Computer.
  • Then, Find readme.txt file inside spin360.zip and Open readme.txt .
  • Now, Read the Requirements of this plugin. Which Wordpress Version and PHP Version are required to run this Plugin in Your Wordpress Site.
  • Then, Follow the Tips Below.
Start the Tips:

Step-1 : Download " spin360.zip " to Your Local Computer.

Step-2 : Then, Login to your " yourdomain.com/wp-admin " Dashboard.

Login to Wordpress Spin360

Step-3 : Then, Click on " Plugins " + " Add New " from left Side Menu of Dashboard.

Go to Plugin Install Spin360

Step-4 : Now, Click on " Upload Plugin " button.

Click Upload Button Spin360

Step-5 : Now, Browse " spin360.zip " Downloaded plugin from your computer, Where you downloaded " spin360.zip " According to Step – 1 Above then, click on " Install Now "

Upload Plugin Spin360

Step-6 : Now, Click on " Active Plugin "

Activate Spin360

Step-7 : Then, See left Side Menu. " Spin360 " folder is added on left Side Menu. Now, Click on " Spin360 " folder.

Noted that: If you do not see " Spin360 " folder on left Side Menu then, see at left Side Menu " Settings " or " Tools ".

Step-8 : Now you configure yourself oR Watch video tutorial below about Spin360 Configurations and Settings or How to work " Spin360 " in your WordPress site.

oR

After Activated Plugin According to Step-6 then,

  1. Go to " Plugins " + " Installed Plugin " from Wordpress Admin Panel Leftside Menu.
  2. or Direct go to: https://yourdomain/wp-admin/plugins.php
  3. Then, Find " Spin 360 deg and 3D Model Viewer " Activated Plugin from Plugin List.
  4. Then, Click on " Settings " from Plugin that is Spin 360 deg and 3D Model Viewer
  5. Now, Edit/Add/Config the setting and Click on " Save Changes " button,
WP Plugin Setting



Guide
  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

Name