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.

Method Name	Description
.play()	Function to trigger the auto rotation of the slider
.stop()	Function to stop the auto play
.next()	Function to move the slider to next frame
.previous()	Function to move the slider to previous frame
.gotoAndPlay()	Use this function if you want the slider spin to a particular frame with animation.
.fullscreen()	Function to enter and exit fullscreen mode.

Configuration

#	Config	Default value	Type	Description
1	totalFrames	180	Integer	Set total number of frames used in the 360 rotation
2	currentFrame	1	Integer	Set the starting point of the auto spin on initilise
3	endFrame	180	Integer	Set the frame where you want the auto spin to stop
4	framerate	60	Integer	Framerate for the spin animation
6	filePrefix	''	String	File prefix for your images. If your file's name is foo-bar-001.png then filePrefix will be foo-bar-
7	ext	png	String	File extension of your images
8	height	300	Integer	Height of your images
9	width	300	Integer	Width of your images
10	style	{}	Object	Object container styles for the preloader similar to jQuery.css({})
11	navigation	true	Boolean	Set false if you don't want default navigation controls
12	position	top-right	String	Sets the position of the navigation bar within the slider. Choice of 'top-left', 'top-center,' 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'
13	autoplayDirection	1	Integer	Control the direction of the spin dependent on your images. You can use 1 or -1
14	drag	true	Boolean	Set false if you want to disable mouse and touch events on the slider
15	disableSpin	false	Boolean	Will disable the initial spin on load
16	zeroPadding	false	Boolean	Set true if your numbering is 0 padded to the same character length
17	responsive	false	Boolean	Enables full aspect-ratio responsiveness
18	fullscreen	false	Boolean	Set true to add a fullscreen icon to the navigation bar when clicked will put your slider in fullscreen
19	fSBackgroundColor	white	String	Sets the fullscreen background color
20	onReady	function() {}	Function	Callback triggers once all images are loaded and ready to render on the screen
21	playSpeed	100	Integer	Value to control the speed (in milliseconds) of play button rotation
22	zeroBased	false	Boolean	Zero based for image filenames starting at 0

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.