Spin images in 360 degrees on your website

Spin images in 360 degrees on your website

In this tutorial I’m going to show you how
to install Magic 360 on your website. If we come to the main product page you can see
our example spins 360 degrees so you can see the product from every angle. And there’s
also a magnify option so you can see the product in detail. We’re going begin installation
by downloading the free demo which is a zip file. We’ll open the folder where the zip
file has been downloaded to. And we need to extract the files. You can use IZ Arc for
this if you don’t currently have anything. The folder we’ll be uploading is the magic
360 folder. In here you can see we have the CSS and JavaScript files which we’ll be referencing
later. There’s also an images folder. We’ve provided example images of a handbag and a
shoe. You’ll notice in the shoe folder the images have been saved as what it is, so in
this case a shoe. The size of the image. We have two sizes. The 360 reference which is
the small image that will appear on your website. And the 800 reference which is the large version
of the image which will be used for the magnifier option. You’ll also notice each size has been
saved in numerical order. This is known as the column and the column reflects the left
and right movement of the spin. You should label the column part of your images in the
order you want them to appear on your website. If we have a look at the bag images, you’ll
notice they too have small and large versions. But they also have an extra set of numbers.
This is for the row. And the row controls the up and down movement of your spin. You
can see there is one, two, three and four. This means your image will move up and down
four positions on your web page. Again notice how each set of row images also has the column
information and they’re again in numerical order. I’ll show you an example of this image
in a moment. First we need to upload the magic 360 folder to your server. I’m working locally
so I’ll just paste the folder to my computer, but you’ll need to upload the magic 360 folder
to your server. Next we’ll go to the Integration page which will tell us how to install Magic
360. There’s two ways to do this. Either with the Magic 360 wizard or manually. Let’s look
at the wizard first. You can see here we’ve told it how many columns we have and how many
rows for the image. Further down you can see Filename. This is the name of our small image.
And magnify filename is the image reference for our large image. You can see the small
image is the same reference that we’ve just been looking at. But rather than listing each
image that will appear we can simply change the row numbers to row and the column numbers
to col. This will pick up each of your images. So when I spin the image, that’s picking up
the column references. And when I move the image up and down, that’s picking up the row
references. You can see below the wizard two boxes with code in them. When you Apply changes
to the Wizard, the code will update in these boxes. For example, the image has a magnify
option you can see in the code Magnify is set to true. If we change the wizard setting
to false and click Apply, you can see the image no longer has the magnify option and
the code now shows Magnify as false. You can use either piece of code. The top box is the
rel attribute code. So you could copy and paste this in your file. Or you can use the
Script Tag. It’s completely up to you. For today’s example though I’m going to manually
install Magic 360. So if we go back to the Integration page you can see under Detailed
Install there is some code. If you have no code on your page then you can copy all of
this. I have some code already on my page so I’m going to just copy the Head code first.
And paste it into the Head section of my file. I’m using Dreamweaver MX for this example.
You can see the CSS file is referenced here And the JavaScript file is referenced here.
If you ever move these files on your server, you’ll need to update the location here in
the Head section otherwise Magic 360 won’t work. Next we need to copy the Body code.
And paste it within the Body section of our file. The href reference is for the Magnify
image which we’ll come back to shortly. There’s the magic 360 class The filename will pull
in all your images. I’m using the shoe reference, so I’ll just update that And the col reference
will pull all your images in numerical order And the final reference is image source which
will be the image that appears on my web page. Don’t forget if you’ve saved your images in
a folder you’ll need to reference it here. Now if we preview our code You can see the
auto-spin is defaulted to one spin which can be changed. You can also drag the image to
turn it. Or use your mouse-wheel. So that’s the 360 spin. Now let’s add the Magnify option.
You can either select the Magnifier link here or go straight to Section 5 Magnifier from
the anchor links at the top of the page. To add the magnifier option to our image we need
Href image reference which is our large image The magnifier true attribute And the magnify
file name So I’ll copy those and paste them after my existing rel attribute. Enter the
correct magnify filename. Not the location, just the filename here. And enter the first
large image that will appear and its location. This should be the large version of the small
image on your webpage. Now when we preview you can see an icon has appeared which gives
the option to magnify or spin. And that’s how you install Magic 360. For more ideas
on how you can display Magic 360 on your website go to the Magic 360 Examples page. Whatever
changes you want to make, the Magic 360 Integration page has all the HTML code you require. If
you don’t already have your 360 degree photos of your products, we can help. We have a photography
service, so contact us for a free quote. At the top of each page on our website is a Contact
Us link. So if you have any questions to do with Magic 360 or any other of our tools just
get in touch. If we’re not online when you send your message through we’ll get back to
you the very next day. And that brings us to the end of this tutorial. Thanks for watching.

About the author


  1. Magic 360 uses JavaScript and works on all browsers and mobile devices. WMV format doesn't. If you'd like to create a WMV movie after creating your 360 spin on your webpage, you can record the screen, interact with Magic 360 as you wish, then output the video in WMV format.

  2. Since this video tutorial was created there have been changes to the Magic 360 HTML code. Please use: 'data-magic360-options=' instead of 'rel=' and use 'large-filename:' instead of 'magnify-filename:'. For all the latest Magic 360 HTML code please visit our website > Magic 360 > Integration. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *