Magic 360 - Examples

Combined with Magic Zoom Plus

Display static images alongside your gorgeous 360 spin with Magic Zoom Plus to give customers the choice of how to view your products.

This awesome zoom & enlarge image tool takes any flat image and completely transforms it into a delicious zoomable view.

It's an impressive combination on any web page. Try it for yourself - we've got the code to copy & paste straight into your site!

Fast spin on hover

How fast do you want your image spin to rotate? Control the speed using any setting from 1 (slow) to 100 (fast).

There are benefits for slow and fast speeds. Depending on the design of your site and what you're spinning will reflect the speed required.

For example, a 360 spin of a spinning top toy would suit a fast spin, but if your 360 spin includes animation (opening & closing), then a slower spin may be preferable.

(Our example uses a spin speed of 66. By default, the speed setting is 50.)

Another default setting is the spin moves ondrag, but this can easily be changed to on hover which allows visitors to see the 360 spin by simply moving their mouse over the image area.

"Martini spin"

This example of Magic 360 shows photography using the "Martini Spin" method, which was invented by Karl Martini, and displays both axis in the same 360 spin.

Using this type of 360 photography creates a fluid motion which also projects a feeling of weightlessness thanks to the use of its own shadow.

Super-smooth 360 spin (72 images)

Need to make a high impact? Or maybe you're selling luxury goods? If this is you, try using 72 images (instead of 36) to create your 360 product spins.

This is because the more images used, the smoother the 360 spin feels which is perfect for high end goods.

Remember to also consider your 360 photography costs (more images = increased costs) and image download speed.

If you're unsure which number of images to use to create your 360 spins, check out our comparison guide for helpful tips when deciding.

3D spin (4 rows, 12 columns)

3D spins are created in the photography stage of the process.

This is accomplished by taking the first set of images at one level, then adjusting the camera position and taking the next set of images at a different level, and so on.

The images which move left/right are known as columns (col). The images which move up/down are known as rows (row). Everytime you adjust the camera's position, you create a new row.

Our 3D spin demo uses 12 columns (left/right) and 4 rows (up/down).

Can this 3D spin be improved? A simple way would be to add a 5th row of images to include the boot's sole.

360 product photography

360 viewers are much more than spinning an item left and right. Our demo shows an iPad cover opening and closing which we think you'll agree is much more appealing.

Think about the products you're selling and decide if there is a better way to photograph them. An example would be if you're selling helmets, have the visor lift up and down as the 360 spin moves around. Another idea would be to open and close doors on a cabinet.

Think out of the box and be creative with your 360 photography!

Auto-spin on page load

Autorotate 360 spins on page load to immediately show the high quality your products offer customers.

Choose from once, twice or infinite (non-stop) autospin to create a final result perfect for your website.

Lazy loading & full-screen zoom

If your 360 spin appears below the fold of your web page, do you need the spin to download when the page is loaded or when the spin is needed?

Lazy loading allows you to only download the 360 spin images when the user gets to that part of the web page. How does this help? By using lazy loading on your 360 spins, the number of queries the server initially performs when the web page is requested is reduced. This means your web page loads faster, which ultimately means happier visitors.

We've also added a full-screen magnifier effect to this lazy loading example. By default, if your large images are bigger than the size of the screen the visitor is using, the full-screen spin automatically becomes zoomable.

3D spin with square magnifier (4 rows)

Another great way for customers to view your products is to zoom into the spin.

The magnify option is automatically available when your 360 spin is full-screen enabled.

Magic 360 comes with 3 different magnifiers to choose from: whole area; circle magnifier; square magnifier, to give visitors a detailed view of any 360 spin.