Hi, have now taken on this plugin. It's had a major rewrite.

Three Sixty Image slider plugin v2.5.2

This is a jQuery plugin to create 360 degree image sliders. The plugin is fully customizable with a number of options provided. The plugin has the ability to display images in any angle 360 degrees. This feature can be used successfully in many cases. e.g. on an e-commerce site to help customers look at products in detail, from any angle they desire.

Features

• Smooth Animation
• Plenty of options
• Simple mouse interaction
• Support for touch devices
• Easy to integrate
• No flash
• Fullscreen now included as an option with the addition of screenfull.js

Installation

git clone https://github.com/etetlow/threesixty-slider.git

npm install -g grunt-cli

npm install

grunt build

grunt

Example 1

JavaScript

$(document).ready(function() {
    var product1;
    product1 = $('.product1').ThreeSixty({
        totalFrames: 72, // total number of images you have for 360 slider
        endFrame: 72, // end frame for the auto spin animation
        currentFrame: 1, // the start frame for auto spin
        imgList: '.threesixty_images', // selector for image list
        progress: '.spinner', // selector to show the loading progress
        imagePath:'assets/product1/', // path to the images
        filePrefix: 'ipod-', // file prefix if any
        ext: '.jpg', // extension for the assets
        height: 265, // height of images
        width: 400, // width of images
        navigation: true, // default navigation controls
        position: 'bottom-center', // position of controls
        disableSpin: false, // if you want to disable the auto spin
        responsive: true, // full aspect ratio responsiveness
        fullscreen: true, // fullscreen capabilities
        fSBackgroundColor: '#000', // fullscreen background color
        autoplayDirection: 1, // direction of play
        zeroPadding: true // if your images are padded to the same number of characters by 0
    });
});

HTML Snippet

<div class="threesixty product1">
    <div class="spinner">
        <span>0%</span>
    </div>
    <ol class="threesixty_images"></ol>
</div>

Here we are initializing an image slider for product 1. The ThreeSixty class constructor requires a config object with properties like totalFrame, endFrame and currentFrame

NB: The image slider will now resize on load in reference to its parent element, so no matter what space is available, the image slider will accomodate as much as it can with its aspect ratio intact

Documentation

Methods

Public methods to control the slider after initialization.

Configuration

Browsers Supported

This plugin is supported in all browsers including our beloved IE 6 Some of the added features will only work in more modern browsers

Support

For support and question please contact at [email protected] or follow at @gauravjassal

LICENSE

Copyright 2013 Gaurav Jassal Released under the MIT and GPL Licenses.