To share this html360 directly with someone else, you simply need to send the entire folder (which includes html, javascript, css, and of course the images) to whomever you like.

To make this a bit easier, we've already included a .zip in the saved location that has everything you need to share.

Simply attach the .zip to an email and the recipient can view it in their web browser, just as you are.

You'll need to put on your IT hat, or nicely pester someone in your IT department who handles your website.

We'll outline the basic steps below. If this is something that interests you but, is entirely out of your domain, you can contact us for a quote on tackling the job for you.

To keep things simpler, you should reference the Raw html360 (also linked to in this pages navigation area). You're encouraged to open that html file (plain.html) in a text editor to view it's contents as referenced in the steps below. There are just a few things you need to add to your site to enable the html360. That said, precisely how you make these changes can vary quite a bit depending on how your website is set up and/or hosted. In other words, the steps below can only serve as a general guide.

• First, you need to copy the main .CSS stylesheet to your server and reference it accordingly in your html. (lines 7-8)
  <link rel="stylesheet" href="css/threesixty.css">
• Second, you need to copy (up to) 2 javascript files and reference them accordingly. html360 leverages jQuery, so if you don't already use/reference jQuery on your site, you need to copy/add the main jQuery reference. As well as the main javascript file. (lines 10-12)
  <script src="js/jquery-1.10.2.min.js"><\script>
<script src="js/threesixty.min.js"><\script>
• Third, you need to add the actual html div tag that identifies the html360 ("threesixty") in your html. (lines 17 - 23)
  <div class="threesixty product">
    <div class="spinner">
        <span>0%</span>
    </div>
    <ol class="threesixty_images"></ol>
</div>
• You need some javascript code to kick off loading of the images. (lines 26 - 51)
  NOTE: This is an example, pay close attention to the values you actually use for totalFrames, endFrame, ext, height and width.
  <script type="text/javascript">

window.onload = init;

function init() {
    product1 = $('.product1').ThreeSixty({
    totalFrames: 24,
    endFrame: 24,
    currentFrame: 1,
    drag: true,
    imgList: '.threesixty_images',
    progress: '.spinner',
    imagePath: 'img/',
    filePrefix: '',
    ext: '.jpg',
    height: 495,
    width: 600,
    navigation: false,
    disableSpin: false,
    speedMultiplier: 1
    });
}
</script>
• Lastly, make sure you copy the folder of images, and you reference said folder accordingly in the <script> code above in the "imgList:" line.

Hosting on Dropbox is very straightforward, as long as you already have a Public folder or a Dropbox Pro or Dropbox for Business account. See this link for more information about using/enabling a Dropbox public folder.

1. Upload the html360 folder to your \Dropbox\Public\ folder.
2. Right-click on the html360 html file, e.g. index.html, and select Copy Public Link.
3. Paste this into the browser and you’ll see the html360 appear.