threesixty-slider v2.0.6

Hello All, I am not maintaining this plugin anymore.

Three Sixty Image slider plugin v2.0.5

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

Features

• Smooth Animation
• Plenty of option parameters for customization
• Api interaction
• Simple mouse interaction
• Custom behavior tweaking
• Support for touch devices
• Easy to integrate
• No flash
• Plugin integration

Plugins

• Drupal module by Rashid Abdullah

Installation

Git

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

Or install using bower

bower install threesixty-slider

Example 1

Javascript

window.onload = init;

var product;
function init(){

    product1 = $('.product1').ThreeSixty({
        totalFrames: 72, // Total no. of image you have for 360 slider
        endFrame: 72, // end frame for the auto spin animation
        currentFrame: 1, // This 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 of the image assets
        filePrefix: 'ipod-', // file prefix if any
        ext: '.jpg', // extention for the assets
        height: 265,
        width: 400,
        navigation: true,
        disableSpin: true // Default false
    });

}

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 require a config object with properties like totalFrame, endFrame and currentFrame

Documentation

Methods

Public methods to control the slider after initialization.

Config

Here are the list of config value you can pass in while you initilize your 360 slider.

Demo

• Example 1 Default Settings
• Example 2 Custom controls
• Responsive
• With Plugins
• Fullscreen

Browsers Supported

This plugin is supported in all browsers including our beloved IE 6

Support

For support and question please contact at gaurav@jassal.me or follow at @gauravjassal

LICENSE

Copyright 2013 Gaurav Jassal

Released under the MIT and GPL Licenses.