How to add Spin360 in Wordpress

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:

1. First Download " spin360.zip " Plugin to your Local Computer. (Click Download)

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

3. Then, Click on " Plugins " + " Add New " from left sidemenu of Dashboard.

4. Now, Click on "Upload Plugin" button.

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"

6. Now, Click on " Active Plugin"

7. Then, See left sidemenu. " Spin 360 deg and 3D Model Viewer " folder is added on left sidemenu. Now, Click on " Spin 360 deg and 3D Model Viewer " folder.

   Noted that: If you do not see " Spin 360 deg and 3D Model Viewer " folder on left sidemenu then, see at left sidemenu " Settings " or " Tools ".

8. Now you configure yourself oR Watch video tutorial below about  Spin 360 deg and 3D Model Viewer Configurtions and Settings or How to work " Spin 360 deg and 3D Model Viewer " in your WordPress site.

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,

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