├── .editorconfig
├── .gitignore
├── CHANGELOG.md
├── Gruntfile.js
├── README.md
├── bower.json
├── demo
    ├── css
    │   ├── bootstrap-responsive.css
    │   ├── bootstrap-responsive.min.css
    │   ├── bootstrap.css
    │   ├── bootstrap.min.css
    │   ├── flat-ui.css
    │   ├── font-awesome-ie7.css
    │   ├── font-awesome-ie7.min.css
    │   ├── font-awesome.css
    │   ├── font-awesome.min.css
    │   ├── prism.css
    │   ├── styles.css
    │   └── theme.css
    ├── custom_controls.html
    ├── default_control.html
    ├── full_page_scrolling.html
    ├── img
    │   ├── -help.gif
    │   ├── 360_icon.png
    │   ├── 360_logo_orange.jpg
    │   ├── 360_logo_orange_70x.jpg
    │   ├── browsers.png
    │   ├── car
    │   │   ├── 1.png
    │   │   ├── 10.png
    │   │   ├── 11.png
    │   │   ├── 12.png
    │   │   ├── 13.png
    │   │   ├── 14.png
    │   │   ├── 15.png
    │   │   ├── 16.png
    │   │   ├── 17.png
    │   │   ├── 18.png
    │   │   ├── 19.png
    │   │   ├── 2.png
    │   │   ├── 20.png
    │   │   ├── 21.png
    │   │   ├── 22.png
    │   │   ├── 23.png
    │   │   ├── 24.png
    │   │   ├── 25.png
    │   │   ├── 26.png
    │   │   ├── 27.png
    │   │   ├── 28.png
    │   │   ├── 29.png
    │   │   ├── 3.png
    │   │   ├── 30.png
    │   │   ├── 31.png
    │   │   ├── 32.png
    │   │   ├── 33.png
    │   │   ├── 34.png
    │   │   ├── 35.png
    │   │   ├── 36.png
    │   │   ├── 37.png
    │   │   ├── 38.png
    │   │   ├── 39.png
    │   │   ├── 4.png
    │   │   ├── 40.png
    │   │   ├── 41.png
    │   │   ├── 42.png
    │   │   ├── 43.png
    │   │   ├── 44.png
    │   │   ├── 45.png
    │   │   ├── 46.png
    │   │   ├── 47.png
    │   │   ├── 48.png
    │   │   ├── 49.png
    │   │   ├── 5.png
    │   │   ├── 50.png
    │   │   ├── 51.png
    │   │   ├── 52.png
    │   │   ├── 6.png
    │   │   ├── 7.png
    │   │   ├── 8.png
    │   │   └── 9.png
    │   ├── cusor-move.ico
    │   ├── demo.mov
    │   ├── demo.mov.gif
    │   ├── forward_reverse
    │   │   ├── forward-reverse_1.jpg
    │   │   ├── forward-reverse_10.jpg
    │   │   ├── forward-reverse_11.jpg
    │   │   ├── forward-reverse_12.jpg
    │   │   ├── forward-reverse_13.jpg
    │   │   ├── forward-reverse_14.jpg
    │   │   ├── forward-reverse_15.jpg
    │   │   ├── forward-reverse_16.jpg
    │   │   ├── forward-reverse_17.jpg
    │   │   ├── forward-reverse_18.jpg
    │   │   ├── forward-reverse_19.jpg
    │   │   ├── forward-reverse_2.jpg
    │   │   ├── forward-reverse_20.jpg
    │   │   ├── forward-reverse_21.jpg
    │   │   ├── forward-reverse_22.jpg
    │   │   ├── forward-reverse_23.jpg
    │   │   ├── forward-reverse_24.jpg
    │   │   ├── forward-reverse_25.jpg
    │   │   ├── forward-reverse_26.jpg
    │   │   ├── forward-reverse_27.jpg
    │   │   ├── forward-reverse_28.jpg
    │   │   ├── forward-reverse_29.jpg
    │   │   ├── forward-reverse_3.jpg
    │   │   ├── forward-reverse_30.jpg
    │   │   ├── forward-reverse_31.jpg
    │   │   ├── forward-reverse_32.jpg
    │   │   ├── forward-reverse_33.jpg
    │   │   ├── forward-reverse_34.jpg
    │   │   ├── forward-reverse_35.jpg
    │   │   ├── forward-reverse_36.jpg
    │   │   ├── forward-reverse_37.jpg
    │   │   ├── forward-reverse_38.jpg
    │   │   ├── forward-reverse_39.jpg
    │   │   ├── forward-reverse_4.jpg
    │   │   ├── forward-reverse_40.jpg
    │   │   ├── forward-reverse_5.jpg
    │   │   ├── forward-reverse_6.jpg
    │   │   ├── forward-reverse_7.jpg
    │   │   ├── forward-reverse_8.jpg
    │   │   └── forward-reverse_9.jpg
    │   ├── fs.png
    │   ├── glyphicons-halflings-white.png
    │   ├── glyphicons-halflings.png
    │   ├── hand_closed.png
    │   ├── hand_open.png
    │   ├── loader.gif
    │   └── sprites.png
    ├── index.html
    ├── js
    │   ├── bootstrap.js
    │   ├── bootstrap.min.js
    │   ├── jquery-1.10.2.min.js
    │   ├── jquery-1.8.3.min.js
    │   ├── modernizr.custom.66977.js
    │   └── prism.js
    ├── multiple_sliders.html
    ├── plugins.html
    └── responsive.html
├── dist
    └── threesixty.min.js
├── images
    ├── 360.png
    ├── browser_logos-64.png
    └── fs.png
├── package.json
├── src
    ├── plugins
    │   └── threesixty.fullscreen.js
    └── threesixty.js
└── styles
    ├── threesixty.css
    └── threesixty.less


/.editorconfig:
--------------------------------------------------------------------------------
 1 | ; EditorConfig is awesome: http://EditorConfig.org
 2 | 
 3 | root = true  ; top-most EditorConfig file
 4 | 
 5 | ; Unix-style newlines with a newline ending every file
 6 | [*]
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | 
10 | ; Tab indentation (no size specified)
11 | [*.js]
12 | indent_style = tab
13 | 
14 | ; Indentation override for all JS under lib directory
15 | [lib/**.js]
16 | indent_style = space
17 | indent_size = 2
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | threesixty.sublime*
2 | .DS_Store
3 | .c9*
4 | npm-debug.log
5 | .c9revisions/README.md.c9save
6 | node_modules
7 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## 1.0.6-vml (November 20, 2013)
 2 | 
 3 | VML
 4 | Shane Daniel & Josh Robison
 5 | 
 6 | - allow for zero padding more than one digit
 7 | - smoother gotoAndPlay solution for infinite cycle
 8 | - **_disableWrap_** option was added for non-true-360 framesets
 9 | 
10 | ## 1.0.6 (Aug 17, 2013)
11 | - minor ie issue fixed
12 | 
13 | ## 1.0.5 (July 18, 2013)
14 | - **_$.brower.msie_** issue fixed and plugin is now compatible with latest version for jQuery [Issue #26](https://github.com/creativeaura/threesixty-slider/issues/26)
15 | - Code linting added grunt-jshint
16 | 
17 | ## 1.0.4 (July 18, 2013)
18 | - Fullscreen plugin added
19 | 
20 | ## 1.0.3 (July 18, 2013)
21 | - New demos added and website also updated [http:360slider](http://360slider.com)
22 | - folder structure changed and removed all unwanted files.
23 | - Optional zero padding for filename 1 - 9 [Issue #27](https://github.com/creativeaura/threesixty-slider/issues/27)
24 |      zeroPadding: false // If you change it to true it will use zero padding for file names
25 | - **_$.brower.msie_** issue fixed and plugin is now compatible with latest version for jQuery [Issue #26](https://github.com/creativeaura/threesixty-slider/issues/26)
26 |     "Uncaught TypeError: Cannot read property 'msie' of undefined" // fixed
27 | - Build script is now using GruntJS tasks
28 | - _different animation length in .previous() and .next()_ fixed [Issue #23](https://github.com/creativeaura/threesixty-slider/issues/23)
29 | - _PNG Images with "disableSpin: true"_ **fixed** [Issue #19](https://github.com/creativeaura/threesixty-slider/issues/19)
30 | - Responsive demo added [Issue #2](https://github.com/creativeaura/threesixty-slider/issues/2)
31 | 
32 | ## 1.0.2 (June 20, 2013)
33 | - **_disbaleSpin_** flag was adding _current-image_ in first and third image and that caused issue with transparent .png image.
34 | 
35 | ## 1.0.1 (June 03, 2013)
36 | - **_disableSpin_** flag added
37 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 | require('time-grunt')(grunt);
 3 |   // Project configuration.
 4 |   grunt.initConfig({
 5 |     pkg: grunt.file.readJSON('package.json'),
 6 |     uglify: {
 7 |       options: {
 8 |         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> verison <%= pkg.version %> */\n'+'/* <%= pkg.repository.url %> */\n'
 9 |       },
10 |       build: {
11 |         src: 'src/threesixty.js',
12 |         dest: 'dist/threesixty.min.js'
13 |       }
14 |     },
15 |     connect: {
16 |       demo: {
17 |         options: {
18 |           port: 9001,
19 |           base: '',
20 |           keepalive: true
21 |         }
22 |       }
23 |     },
24 |     less: {
25 |       development: {
26 |         options: {
27 |           paths: ["styles"]
28 |         },
29 |         files: {
30 |           "styles/threesixty.css": "styles/threesixty.less"
31 |         }
32 |       }
33 |     },
34 |     watch: {
35 |       css: {
36 |         files: 'styles/*.less',
37 |         tasks: ['less']
38 |       },
39 |       scripts: {
40 |         files: 'src/**/*.js',
41 |         tasks: ['jshint'],
42 |         options: {
43 |           debounceDelay: 250
44 |         }
45 |       }
46 |     },
47 |     jshint: {
48 |       options: {
49 |         curly: true,
50 |         eqeqeq: true,
51 |         eqnull: false,
52 |         browser: true,
53 |         quotmark: 'single',
54 |         globals: {
55 |           jQuery: true
56 |         }
57 |       },
58 |       files: {
59 |         src: ['src/**/*.js']
60 |       }
61 |     }
62 |   });
63 | 
64 |   // Load the plugin that provides the "uglify" task.
65 |   grunt.loadNpmTasks('grunt-contrib-uglify');
66 |   grunt.loadNpmTasks('grunt-contrib-connect');
67 |   grunt.loadNpmTasks('grunt-contrib-less');
68 |   grunt.loadNpmTasks('grunt-contrib-watch');
69 |   grunt.loadNpmTasks('grunt-contrib-jshint');
70 | 
71 |   // Default task(s).
72 |   grunt.registerTask('default', ['jshint', 'uglify']);
73 |   grunt.registerTask('build', ['uglify']);
74 |   grunt.registerTask('demo', ['connect:demo']);
75 | };
76 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![Three Sixty Image slider plugin](https://raw.github.com/creativeaura/threesixty-slider/master/images/360.png)
  2 | 
  3 | 
  4 | Three Sixty Image slider plugin v1.0.6
  5 | =================
  6 | 
  7 | [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/creativeaura/threesixty-slider/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
  8 | 
  9 | 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.
 10 | 
 11 | **Features**
 12 | 
 13 | - Smooth Animation
 14 | - Plenty of option parameters for customization
 15 | - Api interaction
 16 | - Simple mouse interaction
 17 | - Custom behavior tweaking
 18 | - Support for touch devices
 19 | - Easy to integrate
 20 | - No flash
 21 | - Plugin integration
 22 | 
 23 | Installation
 24 | ---------------------
 25 | 
 26 | Git
 27 |     
 28 |     git clone https://github.com/creativeaura/threesixty-slider.git
 29 | 
 30 | Or install using bower 
 31 | 
 32 |     bower install threesixty-slider
 33 | 
 34 | Example 1
 35 | ---------------------
 36 | ### Javascript ######
 37 |     window.onload = init;
 38 | 
 39 |     var product;
 40 |     function init(){
 41 | 
 42 |         product1 = $('.product1').ThreeSixty({
 43 |             totalFrames: 72, // Total no. of image you have for 360 slider
 44 |             endFrame: 72, // end frame for the auto spin animation
 45 |             currentFrame: 1, // This the start frame for auto spin
 46 |             imgList: '.threesixty_images', // selector for image list
 47 |             progress: '.spinner', // selector to show the loading progress
 48 |             imagePath:'assets/product1/', // path of the image assets
 49 |             filePrefix: 'ipod-', // file prefix if any
 50 |             ext: '.jpg', // extention for the assets
 51 |             height: 265,
 52 |             width: 400,
 53 |             navigation: true,
 54 |             disableSpin: true // Default false
 55 |         });
 56 | 
 57 |     }
 58 | 
 59 | ### HTML Snippet ######
 60 | 
 61 |     <div class="threesixty product1">
 62 |         <div class="spinner">
 63 |             <span>0%</span>
 64 |         </div>
 65 |         <ol class="threesixty_images"></ol>
 66 |     </div>
 67 | 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
 68 | 
 69 | 
 70 | Documentation
 71 | ---------------------
 72 | ##### Methods
 73 | 
 74 | Public methods to control the slider after initialization.
 75 | <table>
 76 |   <tr>
 77 |     <th>Method Name</th><th>Description</th>
 78 |   </tr>
 79 |   <tr>
 80 |     <td>.play()</td><td>Function to trigger the auto rotation of the slider</td>
 81 |   </tr>
 82 |   <tr>
 83 |     <td>.stop()</td><td>Function to stop the auto play</td>
 84 |   </tr>
 85 |   <tr>
 86 |     <td>.next()</td><td>Function to move the slider to next frame</td>
 87 |   </tr>
 88 |   <tr>
 89 |     <td>.previous()</td><td>Function to move the slider to previous frame</td>
 90 |   </tr>
 91 |  <tr>
 92 |     <td>.gotoAndPlay()</td><td>Use this function if you want the slider spin to a particular frame with animation.</td>
 93 |   </tr>
 94 | </table>
 95 | 
 96 | ##### Config
 97 | 
 98 | Here are the list of config value you can pass in while you initilize your 360 slider.
 99 | 
100 | <table>
101 |   <tr>
102 |     <th>Config</th><th>Default value</th><th>Type</th><th>Description</th>
103 |   </tr>
104 |   <tr>
105 |     <td>totalFrames</td><td>180</td><td>Number</td><td>Set total number for frames used in the 360 rotation</td>
106 |   </tr>
107 |   <tr>
108 |     <td>currentFrame</td><td>1</td><td>Number</td><td>Set the starting from of the auto spin on initilize</td>
109 |   </tr>
110 | <tr>
111 |     <td>endFrame</td><td>180</td><td>Number</td><td>Set the frame where you want the auto spin to stop</td>
112 |   </tr>
113 | <tr>
114 |     <td>framerate</td><td>60</td><td>Number</td><td>Framerate for the spin animation</td>
115 |   </tr>
116 | <tr>
117 |     <td>filePrefix</td><td>''</td><td>String</td><td>file prefiex for the assets if you assets name is nike_boot_1.png then filePrefix will be nike_boot_</td>
118 |   </tr>
119 | <tr>
120 |     <td>ext</td><td>png</td><td>String</td><td>File extension for all the assets</td>
121 |   </tr>
122 | <tr>
123 |     <td>height</td><td>300</td><td>Number</td><td>Height you want to set for the three sixty container</td>
124 |   </tr>
125 | 
126 | <tr>
127 |     <td>width</td><td>300</td><td>Number</td><td>Width you want to set for the three sixty container</td>
128 |   </tr>
129 | <tr>
130 |     <td>style</td><td>{}</td><td>Object</td><td>Object container styles for the preloader similar to jQuery.css({})</td>
131 |   </tr>
132 | <tr>
133 |     <td>navigation</td><td>true</td><td>Boolean</td><td>Set false if you don't want default navigation controls</td>
134 |   </tr>
135 | <tr>
136 |     <td>autoplayDirection</td><td>1</td><td>Number</td><td>Control the direction of the spin depending on your assets. You can use 1 or -1</td>
137 |   </tr>
138 | <tr>
139 |     <td>dragging</td><td>true</td><td>Boolean</td><td>Set false if you want to disable mouse and touch events on the slider.</td>
140 |   </tr>
141 |   <tr>
142 |     <td>disableSpin</td><td>false</td><td>Boolean</td><td>Will disable the initial spin on load</td>
143 |   </tr>
144 |   <tr>
145 |     <td>zeroPadding</td><td>false</td><td>Boolean</td><td>true will add 0 padding for file names 1 - 9</td>
146 |   </tr>
147 |   <tr>
148 |     <td>responsive</td><td>false</td><td>Boolean</td><td>Enable responsive width for 360</td>
149 |   </tr>
150 | </table>
151 | 
152 | Demo
153 | ---------------------
154 | - [Example 1 Default Settings](http://360slider.com/default_control.html)
155 | - [Example 2 Custom controls](http://360slider.com/custom_controls.html)
156 | - [Responsive](http://360slider.com/responsive.html)
157 | - [With Plugins](http://360slider.com/plugins.html)
158 | - [Fullscreen](http://360slider.com/full_page_scrolling.html)
159 | 
160 | Browsers Supported
161 | ---------------------
162 | ![Browsers Supported](https://raw.github.com/creativeaura/threesixty-slider/master/images/browser_logos-64.png)
163 | 
164 | This plugin is supported in all browsers including our beloved IE 6
165 | 
166 | 
167 | Support
168 | ---------------------
169 | For support and question please contact at [gaurav@jassal.me](mailto:gaurav@jassal.me) or follow at [@gauravjassal](http://twitter.com/gauravjassal)
170 | 
171 | 
172 | LICENSE
173 | ---------
174 | 
175 | Copyright 2013 Gaurav Jassal
176 | 
177 | Released under the MIT and GPL Licenses.
178 | 
179 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "threesixty-slider",
 3 | 		"description": "360 degree Image Slider",
 4 | 		"main": "dist/threesixty.min.js",
 5 | 		"version": "1.0.6",
 6 | 		"ignore": [
 7 | 			".jshintrc",
 8 | 		".editorconfig",
 9 | 		".bowerrc"
10 | 			],
11 | 		"dependencies": {},
12 | 		"devDependencies": {
13 | 		}
14 | }
15 | 


--------------------------------------------------------------------------------
/demo/css/bootstrap-responsive.min.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Bootstrap Responsive v2.3.2
 3 |  *
 4 |  * Copyright 2012 Twitter, Inc
 5 |  * Licensed under the Apache License v2.0
 6 |  * http://www.apache.org/licenses/LICENSE-2.0
 7 |  *
 8 |  * Designed and built with all the love in the world @twitter by @mdo and @fat.
 9 |  */.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@-ms-viewport{width:device-width}.hidden{display:none;visibility:hidden}.visible-phone{display:none!important}.visible-tablet{display:none!important}.hidden-desktop{display:none!important}.visible-desktop{display:inherit!important}@media(min-width:768px) and (max-width:979px){.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}.visible-tablet{display:inherit!important}.hidden-tablet{display:none!important}}@media(max-width:767px){.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}.visible-phone{display:inherit!important}.hidden-phone{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:inherit!important}.hidden-print{display:none!important}}@media(min-width:1200px){.row{margin-left:-30px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:30px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px}.span12{width:1170px}.span11{width:1070px}.span10{width:970px}.span9{width:870px}.span8{width:770px}.span7{width:670px}.span6{width:570px}.span5{width:470px}.span4{width:370px}.span3{width:270px}.span2{width:170px}.span1{width:70px}.offset12{margin-left:1230px}.offset11{margin-left:1130px}.offset10{margin-left:1030px}.offset9{margin-left:930px}.offset8{margin-left:830px}.offset7{margin-left:730px}.offset6{margin-left:630px}.offset5{margin-left:530px}.offset4{margin-left:430px}.offset3{margin-left:330px}.offset2{margin-left:230px}.offset1{margin-left:130px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.564102564102564%;*margin-left:2.5109110747408616%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.564102564102564%}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.45299145299145%;*width:91.39979996362975%}.row-fluid .span10{width:82.90598290598291%;*width:82.8527914166212%}.row-fluid .span9{width:74.35897435897436%;*width:74.30578286961266%}.row-fluid .span8{width:65.81196581196582%;*width:65.75877432260411%}.row-fluid .span7{width:57.26495726495726%;*width:57.21176577559556%}.row-fluid .span6{width:48.717948717948715%;*width:48.664757228587014%}.row-fluid .span5{width:40.17094017094017%;*width:40.11774868157847%}.row-fluid .span4{width:31.623931623931625%;*width:31.570740134569924%}.row-fluid .span3{width:23.076923076923077%;*width:23.023731587561375%}.row-fluid .span2{width:14.52991452991453%;*width:14.476723040552828%}.row-fluid .span1{width:5.982905982905983%;*width:5.929714493544281%}.row-fluid .offset12{margin-left:105.12820512820512%;*margin-left:105.02182214948171%}.row-fluid .offset12:first-child{margin-left:102.56410256410257%;*margin-left:102.45771958537915%}.row-fluid .offset11{margin-left:96.58119658119658%;*margin-left:96.47481360247316%}.row-fluid .offset11:first-child{margin-left:94.01709401709402%;*margin-left:93.91071103837061%}.row-fluid .offset10{margin-left:88.03418803418803%;*margin-left:87.92780505546462%}.row-fluid .offset10:first-child{margin-left:85.47008547008548%;*margin-left:85.36370249136206%}.row-fluid .offset9{margin-left:79.48717948717949%;*margin-left:79.38079650845607%}.row-fluid .offset9:first-child{margin-left:76.92307692307693%;*margin-left:76.81669394435352%}.row-fluid .offset8{margin-left:70.94017094017094%;*margin-left:70.83378796144753%}.row-fluid .offset8:first-child{margin-left:68.37606837606839%;*margin-left:68.26968539734497%}.row-fluid .offset7{margin-left:62.393162393162385%;*margin-left:62.28677941443899%}.row-fluid .offset7:first-child{margin-left:59.82905982905982%;*margin-left:59.72267685033642%}.row-fluid .offset6{margin-left:53.84615384615384%;*margin-left:53.739770867430444%}.row-fluid .offset6:first-child{margin-left:51.28205128205128%;*margin-left:51.175668303327875%}.row-fluid .offset5{margin-left:45.299145299145295%;*margin-left:45.1927623204219%}.row-fluid .offset5:first-child{margin-left:42.73504273504273%;*margin-left:42.62865975631933%}.row-fluid .offset4{margin-left:36.75213675213675%;*margin-left:36.645753773413354%}.row-fluid .offset4:first-child{margin-left:34.18803418803419%;*margin-left:34.081651209310785%}.row-fluid .offset3{margin-left:28.205128205128204%;*margin-left:28.0987452264048%}.row-fluid .offset3:first-child{margin-left:25.641025641025642%;*margin-left:25.53464266230224%}.row-fluid .offset2{margin-left:19.65811965811966%;*margin-left:19.551736679396257%}.row-fluid .offset2:first-child{margin-left:17.094017094017094%;*margin-left:16.98763411529369%}.row-fluid .offset1{margin-left:11.11111111111111%;*margin-left:11.004728132387708%}.row-fluid .offset1:first-child{margin-left:8.547008547008547%;*margin-left:8.440625568285142%}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:30px}input.span12,textarea.span12,.uneditable-input.span12{width:1156px}input.span11,textarea.span11,.uneditable-input.span11{width:1056px}input.span10,textarea.span10,.uneditable-input.span10{width:956px}input.span9,textarea.span9,.uneditable-input.span9{width:856px}input.span8,textarea.span8,.uneditable-input.span8{width:756px}input.span7,textarea.span7,.uneditable-input.span7{width:656px}input.span6,textarea.span6,.uneditable-input.span6{width:556px}input.span5,textarea.span5,.uneditable-input.span5{width:456px}input.span4,textarea.span4,.uneditable-input.span4{width:356px}input.span3,textarea.span3,.uneditable-input.span3{width:256px}input.span2,textarea.span2,.uneditable-input.span2{width:156px}input.span1,textarea.span1,.uneditable-input.span1{width:56px}.thumbnails{margin-left:-30px}.thumbnails>li{margin-left:30px}.row-fluid .thumbnails{margin-left:0}}@media(min-width:768px) and (max-width:979px){.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:20px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:724px}.span12{width:724px}.span11{width:662px}.span10{width:600px}.span9{width:538px}.span8{width:476px}.span7{width:414px}.span6{width:352px}.span5{width:290px}.span4{width:228px}.span3{width:166px}.span2{width:104px}.span1{width:42px}.offset12{margin-left:764px}.offset11{margin-left:702px}.offset10{margin-left:640px}.offset9{margin-left:578px}.offset8{margin-left:516px}.offset7{margin-left:454px}.offset6{margin-left:392px}.offset5{margin-left:330px}.offset4{margin-left:268px}.offset3{margin-left:206px}.offset2{margin-left:144px}.offset1{margin-left:82px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.7624309392265194%;*margin-left:2.709239449864817%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.7624309392265194%}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.43646408839778%;*width:91.38327259903608%}.row-fluid .span10{width:82.87292817679558%;*width:82.81973668743387%}.row-fluid .span9{width:74.30939226519337%;*width:74.25620077583166%}.row-fluid .span8{width:65.74585635359117%;*width:65.69266486422946%}.row-fluid .span7{width:57.18232044198895%;*width:57.12912895262725%}.row-fluid .span6{width:48.61878453038674%;*width:48.56559304102504%}.row-fluid .span5{width:40.05524861878453%;*width:40.00205712942283%}.row-fluid .span4{width:31.491712707182323%;*width:31.43852121782062%}.row-fluid .span3{width:22.92817679558011%;*width:22.87498530621841%}.row-fluid .span2{width:14.3646408839779%;*width:14.311449394616199%}.row-fluid .span1{width:5.801104972375691%;*width:5.747913483013988%}.row-fluid .offset12{margin-left:105.52486187845304%;*margin-left:105.41847889972962%}.row-fluid .offset12:first-child{margin-left:102.76243093922652%;*margin-left:102.6560479605031%}.row-fluid .offset11{margin-left:96.96132596685082%;*margin-left:96.8549429881274%}.row-fluid .offset11:first-child{margin-left:94.1988950276243%;*margin-left:94.09251204890089%}.row-fluid .offset10{margin-left:88.39779005524862%;*margin-left:88.2914070765252%}.row-fluid .offset10:first-child{margin-left:85.6353591160221%;*margin-left:85.52897613729868%}.row-fluid .offset9{margin-left:79.8342541436464%;*margin-left:79.72787116492299%}.row-fluid .offset9:first-child{margin-left:77.07182320441989%;*margin-left:76.96544022569647%}.row-fluid .offset8{margin-left:71.2707182320442%;*margin-left:71.16433525332079%}.row-fluid .offset8:first-child{margin-left:68.50828729281768%;*margin-left:68.40190431409427%}.row-fluid .offset7{margin-left:62.70718232044199%;*margin-left:62.600799341718584%}.row-fluid .offset7:first-child{margin-left:59.94475138121547%;*margin-left:59.838368402492065%}.row-fluid .offset6{margin-left:54.14364640883978%;*margin-left:54.037263430116376%}.row-fluid .offset6:first-child{margin-left:51.38121546961326%;*margin-left:51.27483249088986%}.row-fluid .offset5{margin-left:45.58011049723757%;*margin-left:45.47372751851417%}.row-fluid .offset5:first-child{margin-left:42.81767955801105%;*margin-left:42.71129657928765%}.row-fluid .offset4{margin-left:37.01657458563536%;*margin-left:36.91019160691196%}.row-fluid .offset4:first-child{margin-left:34.25414364640884%;*margin-left:34.14776066768544%}.row-fluid .offset3{margin-left:28.45303867403315%;*margin-left:28.346655695309746%}.row-fluid .offset3:first-child{margin-left:25.69060773480663%;*margin-left:25.584224756083227%}.row-fluid .offset2{margin-left:19.88950276243094%;*margin-left:19.783119783707537%}.row-fluid .offset2:first-child{margin-left:17.12707182320442%;*margin-left:17.02068884448102%}.row-fluid .offset1{margin-left:11.32596685082873%;*margin-left:11.219583872105325%}.row-fluid .offset1:first-child{margin-left:8.56353591160221%;*margin-left:8.457152932878806%}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:20px}input.span12,textarea.span12,.uneditable-input.span12{width:710px}input.span11,textarea.span11,.uneditable-input.span11{width:648px}input.span10,textarea.span10,.uneditable-input.span10{width:586px}input.span9,textarea.span9,.uneditable-input.span9{width:524px}input.span8,textarea.span8,.uneditable-input.span8{width:462px}input.span7,textarea.span7,.uneditable-input.span7{width:400px}input.span6,textarea.span6,.uneditable-input.span6{width:338px}input.span5,textarea.span5,.uneditable-input.span5{width:276px}input.span4,textarea.span4,.uneditable-input.span4{width:214px}input.span3,textarea.span3,.uneditable-input.span3{width:152px}input.span2,textarea.span2,.uneditable-input.span2{width:90px}input.span1,textarea.span1,.uneditable-input.span1{width:28px}}@media(max-width:767px){body{padding-right:20px;padding-left:20px}.navbar-fixed-top,.navbar-fixed-bottom,.navbar-static-top{margin-right:-20px;margin-left:-20px}.container-fluid{padding:0}.dl-horizontal dt{float:none;width:auto;clear:none;text-align:left}.dl-horizontal dd{margin-left:0}.container{width:auto}.row-fluid{width:100%}.row,.thumbnails{margin-left:0}.thumbnails>li{float:none;margin-left:0}[class*="span"],.uneditable-input[class*="span"],.row-fluid [class*="span"]{display:block;float:none;width:100%;margin-left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.span12,.row-fluid .span12{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="offset"]:first-child{margin-left:0}.input-large,.input-xlarge,.input-xxlarge,input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.input-prepend input,.input-append input,.input-prepend input[class*="span"],.input-append input[class*="span"]{display:inline-block;width:auto}.controls-row [class*="span"]+[class*="span"]{margin-left:0}.modal{position:fixed;top:20px;right:20px;left:20px;width:auto;margin:0}.modal.fade{top:-100px}.modal.fade.in{top:20px}}@media(max-width:480px){.nav-collapse{-webkit-transform:translate3d(0,0,0)}.page-header h1 small{display:block;line-height:20px}input[type="checkbox"],input[type="radio"]{border:1px solid #ccc}.form-horizontal .control-label{float:none;width:auto;padding-top:0;text-align:left}.form-horizontal .controls{margin-left:0}.form-horizontal .control-list{padding-top:0}.form-horizontal .form-actions{padding-right:10px;padding-left:10px}.media .pull-left,.media .pull-right{display:block;float:none;margin-bottom:10px}.media-object{margin-right:0;margin-left:0}.modal{top:10px;right:10px;left:10px}.modal-header .close{padding:10px;margin:-10px}.carousel-caption{position:static}}@media(max-width:979px){body{padding-top:0}.navbar-fixed-top,.navbar-fixed-bottom{position:static}.navbar-fixed-top{margin-bottom:20px}.navbar-fixed-bottom{margin-top:20px}.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner{padding:5px}.navbar .container{width:auto;padding:0}.navbar .brand{padding-right:10px;padding-left:10px;margin:0 0 0 -5px}.nav-collapse{clear:both}.nav-collapse .nav{float:none;margin:0 0 10px}.nav-collapse .nav>li{float:none}.nav-collapse .nav>li>a{margin-bottom:2px}.nav-collapse .nav>.divider-vertical{display:none}.nav-collapse .nav .nav-header{color:#777;text-shadow:none}.nav-collapse .nav>li>a,.nav-collapse .dropdown-menu a{padding:9px 15px;font-weight:bold;color:#777;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.nav-collapse .btn{padding:4px 10px 4px;font-weight:normal;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.nav-collapse .dropdown-menu li+li a{margin-bottom:2px}.nav-collapse .nav>li>a:hover,.nav-collapse .nav>li>a:focus,.nav-collapse .dropdown-menu a:hover,.nav-collapse .dropdown-menu a:focus{background-color:#f2f2f2}.navbar-inverse .nav-collapse .nav>li>a,.navbar-inverse .nav-collapse .dropdown-menu a{color:#999}.navbar-inverse .nav-collapse .nav>li>a:hover,.navbar-inverse .nav-collapse .nav>li>a:focus,.navbar-inverse .nav-collapse .dropdown-menu a:hover,.navbar-inverse .nav-collapse .dropdown-menu a:focus{background-color:#111}.nav-collapse.in .btn-group{padding:0;margin-top:5px}.nav-collapse .dropdown-menu{position:static;top:auto;left:auto;display:none;float:none;max-width:none;padding:0;margin:0 15px;background-color:transparent;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.nav-collapse .open>.dropdown-menu{display:block}.nav-collapse .dropdown-menu:before,.nav-collapse .dropdown-menu:after{display:none}.nav-collapse .dropdown-menu .divider{display:none}.nav-collapse .nav>li>.dropdown-menu:before,.nav-collapse .nav>li>.dropdown-menu:after{display:none}.nav-collapse .navbar-form,.nav-collapse .navbar-search{float:none;padding:10px 15px;margin:10px 0;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1)}.navbar-inverse .nav-collapse .navbar-form,.navbar-inverse .nav-collapse .navbar-search{border-top-color:#111;border-bottom-color:#111}.navbar .nav-collapse .nav.pull-right{float:none;margin-left:0}.nav-collapse,.nav-collapse.collapse{height:0;overflow:hidden}.navbar .btn-navbar{display:block}.navbar-static .navbar-inner{padding-right:10px;padding-left:10px}}@media(min-width:980px){.nav-collapse.collapse{height:auto!important;overflow:visible!important}}
10 | 


--------------------------------------------------------------------------------
/demo/css/font-awesome.min.css:
--------------------------------------------------------------------------------
  1 | @font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=3.2.1');src:url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;}
  2 | [class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none;}
  3 | .icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em;}
  4 | a [class^="icon-"],a [class*=" icon-"]{display:inline;}
  5 | [class^="icon-"].icon-fixed-width,[class*=" icon-"].icon-fixed-width{display:inline-block;width:1.1428571428571428em;text-align:right;padding-right:0.2857142857142857em;}[class^="icon-"].icon-fixed-width.icon-large,[class*=" icon-"].icon-fixed-width.icon-large{width:1.4285714285714286em;}
  6 | .icons-ul{margin-left:2.142857142857143em;list-style-type:none;}.icons-ul>li{position:relative;}
  7 | .icons-ul .icon-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;text-align:center;line-height:inherit;}
  8 | [class^="icon-"].hide,[class*=" icon-"].hide{display:none;}
  9 | .icon-muted{color:#eeeeee;}
 10 | .icon-light{color:#ffffff;}
 11 | .icon-dark{color:#333333;}
 12 | .icon-border{border:solid 1px #eeeeee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
 13 | .icon-2x{font-size:2em;}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
 14 | .icon-3x{font-size:3em;}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
 15 | .icon-4x{font-size:4em;}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
 16 | .icon-5x{font-size:5em;}.icon-5x.icon-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;}
 17 | .pull-right{float:right;}
 18 | .pull-left{float:left;}
 19 | [class^="icon-"].pull-left,[class*=" icon-"].pull-left{margin-right:.3em;}
 20 | [class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em;}
 21 | [class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}
 22 | .icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none;}
 23 | .btn [class^="icon-"].icon-large,.nav [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large,.nav [class*=" icon-"].icon-large{line-height:.9em;}
 24 | .btn [class^="icon-"].icon-spin,.nav [class^="icon-"].icon-spin,.btn [class*=" icon-"].icon-spin,.nav [class*=" icon-"].icon-spin{display:inline-block;}
 25 | .nav-tabs [class^="icon-"],.nav-pills [class^="icon-"],.nav-tabs [class*=" icon-"],.nav-pills [class*=" icon-"],.nav-tabs [class^="icon-"].icon-large,.nav-pills [class^="icon-"].icon-large,.nav-tabs [class*=" icon-"].icon-large,.nav-pills [class*=" icon-"].icon-large{line-height:.9em;}
 26 | .btn [class^="icon-"].pull-left.icon-2x,.btn [class*=" icon-"].pull-left.icon-2x,.btn [class^="icon-"].pull-right.icon-2x,.btn [class*=" icon-"].pull-right.icon-2x{margin-top:.18em;}
 27 | .btn [class^="icon-"].icon-spin.icon-large,.btn [class*=" icon-"].icon-spin.icon-large{line-height:.8em;}
 28 | .btn.btn-small [class^="icon-"].pull-left.icon-2x,.btn.btn-small [class*=" icon-"].pull-left.icon-2x,.btn.btn-small [class^="icon-"].pull-right.icon-2x,.btn.btn-small [class*=" icon-"].pull-right.icon-2x{margin-top:.25em;}
 29 | .btn.btn-large [class^="icon-"],.btn.btn-large [class*=" icon-"]{margin-top:0;}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x,.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-top:.05em;}
 30 | .btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x{margin-right:.2em;}
 31 | .btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-left:.2em;}
 32 | .nav-list [class^="icon-"],.nav-list [class*=" icon-"]{line-height:inherit;}
 33 | .icon-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.icon-stack [class^="icon-"],.icon-stack [class*=" icon-"]{display:block;text-align:center;position:absolute;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;}
 34 | .icon-stack .icon-stack-base{font-size:2em;*line-height:1em;}
 35 | .icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;}
 36 | a .icon-stack,a .icon-spin{display:inline-block;text-decoration:none;}
 37 | @-moz-keyframes spin{0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(359deg);}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(359deg);}}@-o-keyframes spin{0%{-o-transform:rotate(0deg);} 100%{-o-transform:rotate(359deg);}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg);} 100%{-ms-transform:rotate(359deg);}}@keyframes spin{0%{transform:rotate(0deg);} 100%{transform:rotate(359deg);}}.icon-rotate-90:before{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
 38 | .icon-rotate-180:before{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
 39 | .icon-rotate-270:before{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
 40 | .icon-flip-horizontal:before{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1);}
 41 | .icon-flip-vertical:before{-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1);}
 42 | a .icon-rotate-90:before,a .icon-rotate-180:before,a .icon-rotate-270:before,a .icon-flip-horizontal:before,a .icon-flip-vertical:before{display:inline-block;}
 43 | .icon-glass:before{content:"\f000";}
 44 | .icon-music:before{content:"\f001";}
 45 | .icon-search:before{content:"\f002";}
 46 | .icon-envelope-alt:before{content:"\f003";}
 47 | .icon-heart:before{content:"\f004";}
 48 | .icon-star:before{content:"\f005";}
 49 | .icon-star-empty:before{content:"\f006";}
 50 | .icon-user:before{content:"\f007";}
 51 | .icon-film:before{content:"\f008";}
 52 | .icon-th-large:before{content:"\f009";}
 53 | .icon-th:before{content:"\f00a";}
 54 | .icon-th-list:before{content:"\f00b";}
 55 | .icon-ok:before{content:"\f00c";}
 56 | .icon-remove:before{content:"\f00d";}
 57 | .icon-zoom-in:before{content:"\f00e";}
 58 | .icon-zoom-out:before{content:"\f010";}
 59 | .icon-power-off:before,.icon-off:before{content:"\f011";}
 60 | .icon-signal:before{content:"\f012";}
 61 | .icon-gear:before,.icon-cog:before{content:"\f013";}
 62 | .icon-trash:before{content:"\f014";}
 63 | .icon-home:before{content:"\f015";}
 64 | .icon-file-alt:before{content:"\f016";}
 65 | .icon-time:before{content:"\f017";}
 66 | .icon-road:before{content:"\f018";}
 67 | .icon-download-alt:before{content:"\f019";}
 68 | .icon-download:before{content:"\f01a";}
 69 | .icon-upload:before{content:"\f01b";}
 70 | .icon-inbox:before{content:"\f01c";}
 71 | .icon-play-circle:before{content:"\f01d";}
 72 | .icon-rotate-right:before,.icon-repeat:before{content:"\f01e";}
 73 | .icon-refresh:before{content:"\f021";}
 74 | .icon-list-alt:before{content:"\f022";}
 75 | .icon-lock:before{content:"\f023";}
 76 | .icon-flag:before{content:"\f024";}
 77 | .icon-headphones:before{content:"\f025";}
 78 | .icon-volume-off:before{content:"\f026";}
 79 | .icon-volume-down:before{content:"\f027";}
 80 | .icon-volume-up:before{content:"\f028";}
 81 | .icon-qrcode:before{content:"\f029";}
 82 | .icon-barcode:before{content:"\f02a";}
 83 | .icon-tag:before{content:"\f02b";}
 84 | .icon-tags:before{content:"\f02c";}
 85 | .icon-book:before{content:"\f02d";}
 86 | .icon-bookmark:before{content:"\f02e";}
 87 | .icon-print:before{content:"\f02f";}
 88 | .icon-camera:before{content:"\f030";}
 89 | .icon-font:before{content:"\f031";}
 90 | .icon-bold:before{content:"\f032";}
 91 | .icon-italic:before{content:"\f033";}
 92 | .icon-text-height:before{content:"\f034";}
 93 | .icon-text-width:before{content:"\f035";}
 94 | .icon-align-left:before{content:"\f036";}
 95 | .icon-align-center:before{content:"\f037";}
 96 | .icon-align-right:before{content:"\f038";}
 97 | .icon-align-justify:before{content:"\f039";}
 98 | .icon-list:before{content:"\f03a";}
 99 | .icon-indent-left:before{content:"\f03b";}
100 | .icon-indent-right:before{content:"\f03c";}
101 | .icon-facetime-video:before{content:"\f03d";}
102 | .icon-picture:before{content:"\f03e";}
103 | .icon-pencil:before{content:"\f040";}
104 | .icon-map-marker:before{content:"\f041";}
105 | .icon-adjust:before{content:"\f042";}
106 | .icon-tint:before{content:"\f043";}
107 | .icon-edit:before{content:"\f044";}
108 | .icon-share:before{content:"\f045";}
109 | .icon-check:before{content:"\f046";}
110 | .icon-move:before{content:"\f047";}
111 | .icon-step-backward:before{content:"\f048";}
112 | .icon-fast-backward:before{content:"\f049";}
113 | .icon-backward:before{content:"\f04a";}
114 | .icon-play:before{content:"\f04b";}
115 | .icon-pause:before{content:"\f04c";}
116 | .icon-stop:before{content:"\f04d";}
117 | .icon-forward:before{content:"\f04e";}
118 | .icon-fast-forward:before{content:"\f050";}
119 | .icon-step-forward:before{content:"\f051";}
120 | .icon-eject:before{content:"\f052";}
121 | .icon-chevron-left:before{content:"\f053";}
122 | .icon-chevron-right:before{content:"\f054";}
123 | .icon-plus-sign:before{content:"\f055";}
124 | .icon-minus-sign:before{content:"\f056";}
125 | .icon-remove-sign:before{content:"\f057";}
126 | .icon-ok-sign:before{content:"\f058";}
127 | .icon-question-sign:before{content:"\f059";}
128 | .icon-info-sign:before{content:"\f05a";}
129 | .icon-screenshot:before{content:"\f05b";}
130 | .icon-remove-circle:before{content:"\f05c";}
131 | .icon-ok-circle:before{content:"\f05d";}
132 | .icon-ban-circle:before{content:"\f05e";}
133 | .icon-arrow-left:before{content:"\f060";}
134 | .icon-arrow-right:before{content:"\f061";}
135 | .icon-arrow-up:before{content:"\f062";}
136 | .icon-arrow-down:before{content:"\f063";}
137 | .icon-mail-forward:before,.icon-share-alt:before{content:"\f064";}
138 | .icon-resize-full:before{content:"\f065";}
139 | .icon-resize-small:before{content:"\f066";}
140 | .icon-plus:before{content:"\f067";}
141 | .icon-minus:before{content:"\f068";}
142 | .icon-asterisk:before{content:"\f069";}
143 | .icon-exclamation-sign:before{content:"\f06a";}
144 | .icon-gift:before{content:"\f06b";}
145 | .icon-leaf:before{content:"\f06c";}
146 | .icon-fire:before{content:"\f06d";}
147 | .icon-eye-open:before{content:"\f06e";}
148 | .icon-eye-close:before{content:"\f070";}
149 | .icon-warning-sign:before{content:"\f071";}
150 | .icon-plane:before{content:"\f072";}
151 | .icon-calendar:before{content:"\f073";}
152 | .icon-random:before{content:"\f074";}
153 | .icon-comment:before{content:"\f075";}
154 | .icon-magnet:before{content:"\f076";}
155 | .icon-chevron-up:before{content:"\f077";}
156 | .icon-chevron-down:before{content:"\f078";}
157 | .icon-retweet:before{content:"\f079";}
158 | .icon-shopping-cart:before{content:"\f07a";}
159 | .icon-folder-close:before{content:"\f07b";}
160 | .icon-folder-open:before{content:"\f07c";}
161 | .icon-resize-vertical:before{content:"\f07d";}
162 | .icon-resize-horizontal:before{content:"\f07e";}
163 | .icon-bar-chart:before{content:"\f080";}
164 | .icon-twitter-sign:before{content:"\f081";}
165 | .icon-facebook-sign:before{content:"\f082";}
166 | .icon-camera-retro:before{content:"\f083";}
167 | .icon-key:before{content:"\f084";}
168 | .icon-gears:before,.icon-cogs:before{content:"\f085";}
169 | .icon-comments:before{content:"\f086";}
170 | .icon-thumbs-up-alt:before{content:"\f087";}
171 | .icon-thumbs-down-alt:before{content:"\f088";}
172 | .icon-star-half:before{content:"\f089";}
173 | .icon-heart-empty:before{content:"\f08a";}
174 | .icon-signout:before{content:"\f08b";}
175 | .icon-linkedin-sign:before{content:"\f08c";}
176 | .icon-pushpin:before{content:"\f08d";}
177 | .icon-external-link:before{content:"\f08e";}
178 | .icon-signin:before{content:"\f090";}
179 | .icon-trophy:before{content:"\f091";}
180 | .icon-github-sign:before{content:"\f092";}
181 | .icon-upload-alt:before{content:"\f093";}
182 | .icon-lemon:before{content:"\f094";}
183 | .icon-phone:before{content:"\f095";}
184 | .icon-unchecked:before,.icon-check-empty:before{content:"\f096";}
185 | .icon-bookmark-empty:before{content:"\f097";}
186 | .icon-phone-sign:before{content:"\f098";}
187 | .icon-twitter:before{content:"\f099";}
188 | .icon-facebook:before{content:"\f09a";}
189 | .icon-github:before{content:"\f09b";}
190 | .icon-unlock:before{content:"\f09c";}
191 | .icon-credit-card:before{content:"\f09d";}
192 | .icon-rss:before{content:"\f09e";}
193 | .icon-hdd:before{content:"\f0a0";}
194 | .icon-bullhorn:before{content:"\f0a1";}
195 | .icon-bell:before{content:"\f0a2";}
196 | .icon-certificate:before{content:"\f0a3";}
197 | .icon-hand-right:before{content:"\f0a4";}
198 | .icon-hand-left:before{content:"\f0a5";}
199 | .icon-hand-up:before{content:"\f0a6";}
200 | .icon-hand-down:before{content:"\f0a7";}
201 | .icon-circle-arrow-left:before{content:"\f0a8";}
202 | .icon-circle-arrow-right:before{content:"\f0a9";}
203 | .icon-circle-arrow-up:before{content:"\f0aa";}
204 | .icon-circle-arrow-down:before{content:"\f0ab";}
205 | .icon-globe:before{content:"\f0ac";}
206 | .icon-wrench:before{content:"\f0ad";}
207 | .icon-tasks:before{content:"\f0ae";}
208 | .icon-filter:before{content:"\f0b0";}
209 | .icon-briefcase:before{content:"\f0b1";}
210 | .icon-fullscreen:before{content:"\f0b2";}
211 | .icon-group:before{content:"\f0c0";}
212 | .icon-link:before{content:"\f0c1";}
213 | .icon-cloud:before{content:"\f0c2";}
214 | .icon-beaker:before{content:"\f0c3";}
215 | .icon-cut:before{content:"\f0c4";}
216 | .icon-copy:before{content:"\f0c5";}
217 | .icon-paperclip:before,.icon-paper-clip:before{content:"\f0c6";}
218 | .icon-save:before{content:"\f0c7";}
219 | .icon-sign-blank:before{content:"\f0c8";}
220 | .icon-reorder:before{content:"\f0c9";}
221 | .icon-list-ul:before{content:"\f0ca";}
222 | .icon-list-ol:before{content:"\f0cb";}
223 | .icon-strikethrough:before{content:"\f0cc";}
224 | .icon-underline:before{content:"\f0cd";}
225 | .icon-table:before{content:"\f0ce";}
226 | .icon-magic:before{content:"\f0d0";}
227 | .icon-truck:before{content:"\f0d1";}
228 | .icon-pinterest:before{content:"\f0d2";}
229 | .icon-pinterest-sign:before{content:"\f0d3";}
230 | .icon-google-plus-sign:before{content:"\f0d4";}
231 | .icon-google-plus:before{content:"\f0d5";}
232 | .icon-money:before{content:"\f0d6";}
233 | .icon-caret-down:before{content:"\f0d7";}
234 | .icon-caret-up:before{content:"\f0d8";}
235 | .icon-caret-left:before{content:"\f0d9";}
236 | .icon-caret-right:before{content:"\f0da";}
237 | .icon-columns:before{content:"\f0db";}
238 | .icon-sort:before{content:"\f0dc";}
239 | .icon-sort-down:before{content:"\f0dd";}
240 | .icon-sort-up:before{content:"\f0de";}
241 | .icon-envelope:before{content:"\f0e0";}
242 | .icon-linkedin:before{content:"\f0e1";}
243 | .icon-rotate-left:before,.icon-undo:before{content:"\f0e2";}
244 | .icon-legal:before{content:"\f0e3";}
245 | .icon-dashboard:before{content:"\f0e4";}
246 | .icon-comment-alt:before{content:"\f0e5";}
247 | .icon-comments-alt:before{content:"\f0e6";}
248 | .icon-bolt:before{content:"\f0e7";}
249 | .icon-sitemap:before{content:"\f0e8";}
250 | .icon-umbrella:before{content:"\f0e9";}
251 | .icon-paste:before{content:"\f0ea";}
252 | .icon-lightbulb:before{content:"\f0eb";}
253 | .icon-exchange:before{content:"\f0ec";}
254 | .icon-cloud-download:before{content:"\f0ed";}
255 | .icon-cloud-upload:before{content:"\f0ee";}
256 | .icon-user-md:before{content:"\f0f0";}
257 | .icon-stethoscope:before{content:"\f0f1";}
258 | .icon-suitcase:before{content:"\f0f2";}
259 | .icon-bell-alt:before{content:"\f0f3";}
260 | .icon-coffee:before{content:"\f0f4";}
261 | .icon-food:before{content:"\f0f5";}
262 | .icon-file-text-alt:before{content:"\f0f6";}
263 | .icon-building:before{content:"\f0f7";}
264 | .icon-hospital:before{content:"\f0f8";}
265 | .icon-ambulance:before{content:"\f0f9";}
266 | .icon-medkit:before{content:"\f0fa";}
267 | .icon-fighter-jet:before{content:"\f0fb";}
268 | .icon-beer:before{content:"\f0fc";}
269 | .icon-h-sign:before{content:"\f0fd";}
270 | .icon-plus-sign-alt:before{content:"\f0fe";}
271 | .icon-double-angle-left:before{content:"\f100";}
272 | .icon-double-angle-right:before{content:"\f101";}
273 | .icon-double-angle-up:before{content:"\f102";}
274 | .icon-double-angle-down:before{content:"\f103";}
275 | .icon-angle-left:before{content:"\f104";}
276 | .icon-angle-right:before{content:"\f105";}
277 | .icon-angle-up:before{content:"\f106";}
278 | .icon-angle-down:before{content:"\f107";}
279 | .icon-desktop:before{content:"\f108";}
280 | .icon-laptop:before{content:"\f109";}
281 | .icon-tablet:before{content:"\f10a";}
282 | .icon-mobile-phone:before{content:"\f10b";}
283 | .icon-circle-blank:before{content:"\f10c";}
284 | .icon-quote-left:before{content:"\f10d";}
285 | .icon-quote-right:before{content:"\f10e";}
286 | .icon-spinner:before{content:"\f110";}
287 | .icon-circle:before{content:"\f111";}
288 | .icon-mail-reply:before,.icon-reply:before{content:"\f112";}
289 | .icon-github-alt:before{content:"\f113";}
290 | .icon-folder-close-alt:before{content:"\f114";}
291 | .icon-folder-open-alt:before{content:"\f115";}
292 | .icon-expand-alt:before{content:"\f116";}
293 | .icon-collapse-alt:before{content:"\f117";}
294 | .icon-smile:before{content:"\f118";}
295 | .icon-frown:before{content:"\f119";}
296 | .icon-meh:before{content:"\f11a";}
297 | .icon-gamepad:before{content:"\f11b";}
298 | .icon-keyboard:before{content:"\f11c";}
299 | .icon-flag-alt:before{content:"\f11d";}
300 | .icon-flag-checkered:before{content:"\f11e";}
301 | .icon-terminal:before{content:"\f120";}
302 | .icon-code:before{content:"\f121";}
303 | .icon-reply-all:before{content:"\f122";}
304 | .icon-mail-reply-all:before{content:"\f122";}
305 | .icon-star-half-full:before,.icon-star-half-empty:before{content:"\f123";}
306 | .icon-location-arrow:before{content:"\f124";}
307 | .icon-crop:before{content:"\f125";}
308 | .icon-code-fork:before{content:"\f126";}
309 | .icon-unlink:before{content:"\f127";}
310 | .icon-question:before{content:"\f128";}
311 | .icon-info:before{content:"\f129";}
312 | .icon-exclamation:before{content:"\f12a";}
313 | .icon-superscript:before{content:"\f12b";}
314 | .icon-subscript:before{content:"\f12c";}
315 | .icon-eraser:before{content:"\f12d";}
316 | .icon-puzzle-piece:before{content:"\f12e";}
317 | .icon-microphone:before{content:"\f130";}
318 | .icon-microphone-off:before{content:"\f131";}
319 | .icon-shield:before{content:"\f132";}
320 | .icon-calendar-empty:before{content:"\f133";}
321 | .icon-fire-extinguisher:before{content:"\f134";}
322 | .icon-rocket:before{content:"\f135";}
323 | .icon-maxcdn:before{content:"\f136";}
324 | .icon-chevron-sign-left:before{content:"\f137";}
325 | .icon-chevron-sign-right:before{content:"\f138";}
326 | .icon-chevron-sign-up:before{content:"\f139";}
327 | .icon-chevron-sign-down:before{content:"\f13a";}
328 | .icon-html5:before{content:"\f13b";}
329 | .icon-css3:before{content:"\f13c";}
330 | .icon-anchor:before{content:"\f13d";}
331 | .icon-unlock-alt:before{content:"\f13e";}
332 | .icon-bullseye:before{content:"\f140";}
333 | .icon-ellipsis-horizontal:before{content:"\f141";}
334 | .icon-ellipsis-vertical:before{content:"\f142";}
335 | .icon-rss-sign:before{content:"\f143";}
336 | .icon-play-sign:before{content:"\f144";}
337 | .icon-ticket:before{content:"\f145";}
338 | .icon-minus-sign-alt:before{content:"\f146";}
339 | .icon-check-minus:before{content:"\f147";}
340 | .icon-level-up:before{content:"\f148";}
341 | .icon-level-down:before{content:"\f149";}
342 | .icon-check-sign:before{content:"\f14a";}
343 | .icon-edit-sign:before{content:"\f14b";}
344 | .icon-external-link-sign:before{content:"\f14c";}
345 | .icon-share-sign:before{content:"\f14d";}
346 | .icon-compass:before{content:"\f14e";}
347 | .icon-collapse:before{content:"\f150";}
348 | .icon-collapse-top:before{content:"\f151";}
349 | .icon-expand:before{content:"\f152";}
350 | .icon-euro:before,.icon-eur:before{content:"\f153";}
351 | .icon-gbp:before{content:"\f154";}
352 | .icon-dollar:before,.icon-usd:before{content:"\f155";}
353 | .icon-rupee:before,.icon-inr:before{content:"\f156";}
354 | .icon-yen:before,.icon-jpy:before{content:"\f157";}
355 | .icon-renminbi:before,.icon-cny:before{content:"\f158";}
356 | .icon-won:before,.icon-krw:before{content:"\f159";}
357 | .icon-bitcoin:before,.icon-btc:before{content:"\f15a";}
358 | .icon-file:before{content:"\f15b";}
359 | .icon-file-text:before{content:"\f15c";}
360 | .icon-sort-by-alphabet:before{content:"\f15d";}
361 | .icon-sort-by-alphabet-alt:before{content:"\f15e";}
362 | .icon-sort-by-attributes:before{content:"\f160";}
363 | .icon-sort-by-attributes-alt:before{content:"\f161";}
364 | .icon-sort-by-order:before{content:"\f162";}
365 | .icon-sort-by-order-alt:before{content:"\f163";}
366 | .icon-thumbs-up:before{content:"\f164";}
367 | .icon-thumbs-down:before{content:"\f165";}
368 | .icon-youtube-sign:before{content:"\f166";}
369 | .icon-youtube:before{content:"\f167";}
370 | .icon-xing:before{content:"\f168";}
371 | .icon-xing-sign:before{content:"\f169";}
372 | .icon-youtube-play:before{content:"\f16a";}
373 | .icon-dropbox:before{content:"\f16b";}
374 | .icon-stackexchange:before{content:"\f16c";}
375 | .icon-instagram:before{content:"\f16d";}
376 | .icon-flickr:before{content:"\f16e";}
377 | .icon-adn:before{content:"\f170";}
378 | .icon-bitbucket:before{content:"\f171";}
379 | .icon-bitbucket-sign:before{content:"\f172";}
380 | .icon-tumblr:before{content:"\f173";}
381 | .icon-tumblr-sign:before{content:"\f174";}
382 | .icon-long-arrow-down:before{content:"\f175";}
383 | .icon-long-arrow-up:before{content:"\f176";}
384 | .icon-long-arrow-left:before{content:"\f177";}
385 | .icon-long-arrow-right:before{content:"\f178";}
386 | .icon-apple:before{content:"\f179";}
387 | .icon-windows:before{content:"\f17a";}
388 | .icon-android:before{content:"\f17b";}
389 | .icon-linux:before{content:"\f17c";}
390 | .icon-dribbble:before{content:"\f17d";}
391 | .icon-skype:before{content:"\f17e";}
392 | .icon-foursquare:before{content:"\f180";}
393 | .icon-trello:before{content:"\f181";}
394 | .icon-female:before{content:"\f182";}
395 | .icon-male:before{content:"\f183";}
396 | .icon-gittip:before{content:"\f184";}
397 | .icon-sun:before{content:"\f185";}
398 | .icon-moon:before{content:"\f186";}
399 | .icon-archive:before{content:"\f187";}
400 | .icon-bug:before{content:"\f188";}
401 | .icon-vk:before{content:"\f189";}
402 | .icon-weibo:before{content:"\f18a";}
403 | .icon-renren:before{content:"\f18b";}
404 | 


--------------------------------------------------------------------------------
/demo/css/prism.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * prism.js default theme for JavaScript, CSS and HTML
  3 |  * Based on dabblet (http://dabblet.com)
  4 |  * @author Lea Verou
  5 |  */
  6 | 
  7 | code[class*="language-"],
  8 | pre[class*="language-"] {
  9 | 	color: black;
 10 | 	text-shadow: 0 1px white;
 11 | 	font-family: Consolas, Monaco, 'Andale Mono', monospace;
 12 | 	direction: ltr;
 13 | 	text-align: left;
 14 | 	white-space: pre;
 15 | 	word-spacing: normal;
 16 | 
 17 | 	-moz-tab-size: 4;
 18 | 	-o-tab-size: 4;
 19 | 	tab-size: 4;
 20 | 
 21 | 	-webkit-hyphens: none;
 22 | 	-moz-hyphens: none;
 23 | 	-ms-hyphens: none;
 24 | 	hyphens: none;
 25 | }
 26 | 
 27 | ::-moz-selection {
 28 | 	text-shadow: none;
 29 | 	background: #b3d4fc;
 30 | }
 31 | 
 32 | ::selection {
 33 | 	text-shadow: none;
 34 | 	background: #b3d4fc;
 35 | }
 36 | 
 37 | @media print {
 38 | 	code[class*="language-"],
 39 | 	pre[class*="language-"] {
 40 | 		text-shadow: none;
 41 | 	}
 42 | }
 43 | 
 44 | /* Code blocks */
 45 | pre[class*="language-"] {
 46 | 	padding: 1em;
 47 | 	margin: .5em 0;
 48 | 	overflow: auto;
 49 | }
 50 | 
 51 | :not(pre) > code[class*="language-"],
 52 | pre[class*="language-"] {
 53 | 	background: #f5f2f0;
 54 | }
 55 | 
 56 | /* Inline code */
 57 | :not(pre) > code[class*="language-"] {
 58 | 	padding: .1em;
 59 | 	border-radius: .3em;
 60 | }
 61 | 
 62 | .token.comment,
 63 | .token.prolog,
 64 | .token.doctype,
 65 | .token.cdata {
 66 | 	color: slategray;
 67 | }
 68 | 
 69 | .token.punctuation {
 70 | 	color: #999;
 71 | }
 72 | 
 73 | .namespace {
 74 | 	opacity: .7;
 75 | }
 76 | 
 77 | .token.property,
 78 | .token.tag,
 79 | .token.boolean,
 80 | .token.number {
 81 | 	color: #905;
 82 | }
 83 | 
 84 | .token.selector,
 85 | .token.attr-name,
 86 | .token.string {
 87 | 	color: #690;
 88 | }
 89 | 
 90 | .token.operator,
 91 | .token.entity,
 92 | .token.url,
 93 | .language-css .token.string,
 94 | .style .token.string {
 95 | 	color: #a67f59;
 96 | 	background: hsla(0,0%,100%,.5);
 97 | }
 98 | 
 99 | .token.atrule,
100 | .token.attr-value,
101 | .token.keyword {
102 | 	color: #07a;
103 | }
104 | 
105 | 
106 | .token.regex,
107 | .token.important {
108 | 	color: #e90;
109 | }
110 | 
111 | .token.important {
112 | 	font-weight: bold;
113 | }
114 | 
115 | .token.entity {
116 | 	cursor: help;
117 | }
118 | 


--------------------------------------------------------------------------------
/demo/css/styles.css:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    Custom Styles
 3 |    ========================================================================== */
 4 | 
 5 | 
 6 | #main {
 7 | 	margin-top: 100px;
 8 | }
 9 | 
10 | .video-container {
11 | 	border-radius: 10px;
12 | }
13 | .video-container .demo_video{
14 | 	margin: 50px 0;
15 | }
16 | 
17 | #container{
18 |   margin-top: 160px;
19 |   min-height: 450px
20 | }
21 | 
22 | #social-buttons {
23 |   padding: 10px 0;
24 | }
25 | 
26 | #social-buttons .social {
27 |   margin: 0 auto;
28 |   width:530px;
29 | }
30 | 
31 | .github_follow{
32 |   position: absolute;
33 |   right: 10px;
34 |   top: 100px;
35 |   z-index: 100;
36 | }


--------------------------------------------------------------------------------
/demo/custom_controls.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 |   <head>
  5 |     <title>Threesixty Slider</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  8 |     <link rel="stylesheet" href="css/bootstrap.css">
  9 |     <link rel="stylesheet" href="css/bootstrap-responsive.css">
 10 |     <link rel="stylesheet" href="css/theme.css">
 11 |     <link rel="stylesheet" href="css/styles.css">
 12 |     <link rel="stylesheet" href="css/prism.css">
 13 |     <link rel="stylesheet" href="../styles/threesixty.css">
 14 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
 15 |     <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 16 |     <script type="text/javascript" src="js/modernizr.custom.66977.js"></script>
 17 |   </head>
 18 | 
 19 |   <body>
 20 |     <nav class="navbar navbar-inverse navbar-fixed-top">
 21 |       <div class="navbar-inner">
 22 |         <div class="container-fluid">
 23 |           <a class="brand" href="#">Threesixty Slider</a>
 24 |           <div class="navbar-content">
 25 |             <ul class="nav pull-right">
 26 |               <li>
 27 |                 <a href="default_control.html">Default Settings</a>
 28 |               </li>
 29 |               <li class="active">
 30 |                 <a href="custom_controls.html">Custom Controls</a>
 31 |               </li>
 32 |               <li>
 33 |                 <a href="responsive.html">Responsive Slider</a>
 34 |               </li>
 35 |               <li>
 36 |                 <a href="plugins.html">Plugins</a>
 37 |               </li>
 38 |               <li>
 39 |                 <a href="full_page_scrolling.html">Full Page Scrolling</a>
 40 |               </li>
 41 |             </ul>
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |     </nav>
 46 | <iframe src="http://ghbtns.com/github-btn.html?user=creativeaura&amp;type=follow&amp;count=true&amp;size=large"
 47 |   allowtransparency="true" frameborder="0" scrolling="0" width="270" height="30" class="github_follow"></iframe>
 48 |     <section class="container-fluid" id="container">
 49 |       <div class="threesixty product1">
 50 |         <div class="spinner">
 51 |           <span>0%</span>
 52 |         </div>
 53 |         <ol class="threesixty_images"></ol>
 54 |       </div>
 55 |       <a class="btn btn-danger custom_previous"><i class="icon-backward"></i> Previous</a>
 56 |       <a class="btn btn-inverse custom_play"><i class="icon-play"></i> Play</a>
 57 |       <a class="btn btn-inverse custom_stop"><i class="icon-pause"></i> Pause</a>
 58 |       <a class="btn btn-danger custom_next">Next <i class="icon-forward"></i></a>
 59 |     </section>
 60 | 
 61 |     <section id="tutorials" class="container-fluid">
 62 |       <div class="row">
 63 |         <div class="span12">
 64 |           <h3>Custom Controls</h3>
 65 |           <p>You can set the default navigation to false <i><code>navigation: false</code></i> and have your custom buttons to navigate the 360 slider. </p>
 66 |         </div>
 67 |       </div>
 68 |     </section>
 69 | 
 70 |     <section class="container-fluid">
 71 |       <h3>HTML Snippet</h3>
 72 | 
 73 | <pre><code class="language-markup">&lt;div class="threesixty car"&gt;
 74 |     &lt;div class="spinner"&gt;
 75 |         &lt;span&gt;0%&lt;/span&gt;
 76 |     &lt;/div&gt;
 77 |     &lt;ol class="threesixty_images"&gt;&lt;/ol&gt;
 78 | &lt;/div&gt;
 79 | </code></pre>
 80 | 
 81 | <h3>Javascript</h3>
 82 | 
 83 | <h3>Javascript</h3>
 84 | 
 85 | <pre><code>window.onload = init;
 86 | 
 87 | var car;
 88 | function init(){
 89 | 
 90 |     car = $('.car').ThreeSixty({
 91 |         totalFrames: 52, // Total no. of image you have for 360 slider
 92 |         endFrame: 52, // end frame for the auto spin animation
 93 |         currentFrame: 1, // This the start frame for auto spin
 94 |         imgList: '.threesixty_images', // selector for image list
 95 |         progress: '.spinner', // selector to show the loading progress
 96 |         imagePath:'assets/car/', // path of the image assets
 97 |         filePrefix: '', // file prefix if any
 98 |         ext: '.png', // extention for the assets
 99 |         height: 1000,
100 |         width: 447,
101 |         navigation: false
102 |     });
103 | 
104 |     $('.custom_previous').bind('click', function(e) {
105 |       car.previous();
106 |     });
107 | 
108 |     $('.custom_next').bind('click', function(e) {
109 |       car.next();
110 |     });
111 | 
112 |     $('.custom_play').bind('click', function(e) {
113 |       car.play();
114 |     });
115 | 
116 |     $('.custom_stop').bind('click', function(e) {
117 |       car.stop();
118 |     });
119 | 
120 | }
121 | </code></pre>
122 | </section>
123 |     <section id="twitter">
124 |       <div class="container">
125 |         <div class="row">
126 |           <div class="span12 text-center">
127 |             <a class="btn btn-inverse btn-large"><i class="icon-github icon-large"> </i> View on Github</a>
128 |             <a class="btn btn-large btn-danger"><i class="icon-download icon-large" > </i> Download v1.0.2</a>
129 |             <p class="dark-text">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.</p>
130 |           </div>
131 |         </div>
132 |       </div>
133 |     </section>
134 | 
135 |     </section>
136 |     <section id="bottom">
137 |       <div class="container" id="social-buttons">
138 |         <ul class="unstyled inline social">
139 |           <li>
140 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
141 |           </li>
142 |           <li>
143 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
144 |           </li>
145 |           <li class="follow-btn">
146 |             <a href="https://twitter.com/intent/tweet?screen_name=gauravjassal" class="twitter-mention-button" data-related="gauravjassal">Tweet to @gauravjassal</a>
147 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
148 |           </li>
149 |           <li class="tweet-btn hidden-phone">
150 |             <a href="https://twitter.com/share" class="twitter-share-button" data-via="gauravjassal">Tweet</a>
151 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
152 |           </li>
153 |         </ul>
154 |       </div>
155 | 
156 |       <div class="container">
157 |         <div class="row margin-40">
158 |           <div class="span10 offset1 text-center">
159 |             <p>For support and question please contact at    <a href="mailto:gaurav@jassal.me"><i class="icon-envelope-alt"></i> gaurav@jassal.me</a></p>
160 |             <hr>
161 |           </div>
162 |         </div>
163 | 
164 |         <div class="row">
165 |           <div class="span10 offset1 text-center">
166 |             <h3>This plugin is supported in all browsers including our beloved IE 6</h3>
167 |             <img src="img/browsers.png" alt="Firebox Safari Chrome IE Opera">
168 |           </div>
169 |         </div>
170 | 
171 |       </div>
172 |     </section>
173 | 
174 |     <section id="footer">
175 |       <div class="container">
176 |         <div class="row">
177 |           <div class="span12 text-center">
178 |             <p>&copy; Copyright. All Rights Reserved. Created by <a href="http://gaurav.jassal.me">Gaurav Jassal. </a> <a href="http://360slider.mit-license.org">Released under the MIT and GPL Licenses</a></p>
179 |           </div>
180 |         </div>
181 |       </div>
182 |     </section>
183 |     <script src="js/jquery-1.8.3.min.js"></script>
184 |     <script type="text/javascript" src='../src/threesixty.js'></script>
185 |     <script type="text/javascript" src="js/prism.js"></script>
186 |     <script type="text/javascript">
187 |     window.onload = init;
188 | 
189 |     var product;
190 |     function init(){
191 | 
192 |       car = $('.product1').ThreeSixty({
193 |         totalFrames: 52,
194 |         endFrame: 52,
195 |         currentFrame: 1,
196 | 
197 |         imgList: '.threesixty_images',
198 |         progress: '.spinner',
199 |         imagePath:'img/car/',
200 |         filePrefix: '',
201 |         ext: '.png',
202 |         height: 447,
203 |         width: 1000,
204 |         navigation: false,
205 |         disableSpin: true
206 |       });
207 | 
208 |       $('.custom_previous').bind('click', function(e) {
209 |         car.previous();
210 |       });
211 | 
212 |       $('.custom_next').bind('click', function(e) {
213 |         car.next();
214 |       });
215 | 
216 |       $('.custom_play').bind('click', function(e) {
217 |         car.play();
218 |       });
219 | 
220 |       $('.custom_stop').bind('click', function(e) {
221 |         car.stop();
222 |       });
223 |     }
224 | 
225 |   </script>
226 |   </body>
227 | 
228 | </html>
229 | 


--------------------------------------------------------------------------------
/demo/default_control.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 |   <head>
  5 |     <title>Threesixty Slider</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  8 |     <link rel="stylesheet" href="css/bootstrap.css">
  9 |     <link rel="stylesheet" href="css/bootstrap-responsive.css">
 10 |     <link rel="stylesheet" href="css/theme.css">
 11 |     <link rel="stylesheet" href="css/styles.css">
 12 |     <link rel="stylesheet" href="css/prism.css">
 13 |     <link rel="stylesheet" href="../styles/threesixty.css">
 14 | 
 15 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
 16 |     <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 17 |     <script type="text/javascript" src="js/modernizr.custom.66977.js"></script>
 18 |   </head>
 19 | 
 20 |   <body>
 21 |     <nav class="navbar navbar-inverse navbar-fixed-top">
 22 |       <div class="navbar-inner">
 23 |         <div class="container-fluid">
 24 |           <a class="brand" href="#">Threesixty Slider</a>
 25 |           <div class="navbar-content">
 26 |             <ul class="nav pull-right">
 27 |               <li class="active">
 28 |                 <a href="default_control.html">Default Settings</a>
 29 |               </li>
 30 |               <li>
 31 |                 <a href="custom_controls.html">Custom Controls</a>
 32 |               </li>
 33 |               <li>
 34 |                 <a href="responsive.html">Responsive Slider</a>
 35 |               </li>
 36 |               <li>
 37 |                 <a href="plugins.html">Plugins</a>
 38 |               </li>
 39 |               <li>
 40 |                 <a href="full_page_scrolling.html">Full Page Scrolling</a>
 41 |               </li>
 42 |               <li></li>
 43 |             </ul>
 44 |           </div>
 45 |         </div>
 46 |       </div>
 47 |     </nav>
 48 | <iframe src="http://ghbtns.com/github-btn.html?user=creativeaura&amp;type=follow&amp;count=true&amp;size=large"
 49 |   allowtransparency="true" frameborder="0" scrolling="0" width="270" height="30" class="github_follow"></iframe>
 50 | 
 51 |     <section class="container-fluid" id="container">
 52 |       <div class="threesixty product1">
 53 |         <div class="spinner">
 54 |           <span>0%</span>
 55 |         </div>
 56 |         <ol class="threesixty_images"></ol>
 57 |       </div>
 58 |     </section>
 59 |     <section class="code container-fluid">
 60 |       <h3>HTML Snippet</h3>
 61 | 
 62 | <pre><code class="language-markup">&lt;div class="threesixty car"&gt;
 63 |     &lt;div class="spinner"&gt;
 64 |         &lt;span&gt;0%&lt;/span&gt;
 65 |     &lt;/div&gt;
 66 |     &lt;ol class="threesixty_images"&gt;&lt;/ol&gt;
 67 | &lt;/div&gt;
 68 | </code></pre>
 69 | 
 70 | <h3>Javascript</h3>
 71 | 
 72 | <pre><code class="language-javascript">window.onload = init;
 73 | 
 74 | var car;
 75 | function init(){
 76 | 
 77 |     car = $('.car').ThreeSixty({
 78 |         totalFrames: 52, // Total no. of image you have for 360 slider
 79 |         endFrame: 52, // end frame for the auto spin animation
 80 |         currentFrame: 1, // This the start frame for auto spin
 81 |         imgList: '.threesixty_images', // selector for image list
 82 |         progress: '.spinner', // selector to show the loading progress
 83 |         imagePath:'assets/car/', // path of the image assets
 84 |         filePrefix: '', // file prefix if any
 85 |         ext: '.png', // extention for the assets
 86 |         height: 1000,
 87 |         width: 447,
 88 |         navigation: true
 89 |     });
 90 | 
 91 | }
 92 | </code></pre>
 93 | </section>
 94 |     <section id="twitter">
 95 |       <div class="container">
 96 |         <div class="row">
 97 |           <div class="span12 text-center">
 98 |             <a class="btn btn-inverse btn-large"><i class="icon-github icon-large"> </i> View on Github</a>
 99 |             <a class="btn btn-large btn-danger"><i class="icon-download icon-large" > </i> Download v1.0.2</a>
100 |             <p class="dark-text">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.</p>
101 |           </div>
102 |         </div>
103 |       </div>
104 |     </section>
105 | 
106 |     </section>
107 |     <section id="bottom">
108 |       <div class="container" id="social-buttons">
109 |         <ul class="unstyled inline social">
110 |           <li>
111 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
112 |           </li>
113 |           <li>
114 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
115 |           </li>
116 |           <li class="follow-btn">
117 |             <a href="https://twitter.com/intent/tweet?screen_name=gauravjassal" class="twitter-mention-button" data-related="gauravjassal">Tweet to @gauravjassal</a>
118 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
119 |           </li>
120 |           <li class="tweet-btn hidden-phone">
121 |             <a href="https://twitter.com/share" class="twitter-share-button" data-via="gauravjassal">Tweet</a>
122 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
123 |           </li>
124 |         </ul>
125 |       </div>
126 | 
127 |       <div class="container">
128 |         <div class="row margin-40">
129 |           <div class="span10 offset1 text-center">
130 |             <p>For support and question please contact at    <a href="mailto:gaurav@jassal.me"><i class="icon-envelope-alt"></i> gaurav@jassal.me</a></p>
131 |             <hr>
132 |           </div>
133 |         </div>
134 | 
135 |         <div class="row">
136 |           <div class="span10 offset1 text-center">
137 |             <h3>This plugin is supported in all browsers including our beloved IE 6</h3>
138 |             <img src="img/browsers.png" alt="Firebox Safari Chrome IE Opera">
139 |           </div>
140 |         </div>
141 | 
142 |       </div>
143 |     </section>
144 | 
145 |     <section id="footer">
146 |       <div class="container">
147 |         <div class="row">
148 |           <div class="span12 text-center">
149 |             <p>&copy; Copyright. All Rights Reserved. Created by <a href="http://gaurav.jassal.me">Gaurav Jassal. </a> <a href="http://360slider.mit-license.org">Released under the MIT and GPL Licenses</a></p>
150 |           </div>
151 |         </div>
152 |       </div>
153 |     </section>
154 |     <script src="js/jquery-1.10.2.min.js"></script>
155 |     <script type="text/javascript" src='../dist/threesixty.min.js'></script>
156 |     <script type="text/javascript" src="js/prism.js"></script>
157 |     <script type="text/javascript">
158 |     window.onload = init;
159 | 
160 |     var product;
161 |     function init(){
162 | 
163 |       product1 = $('.product1').ThreeSixty({
164 |         totalFrames: 52,
165 |         endFrame: 30,
166 |         currentFrame: 1,
167 | 
168 |         imgList: '.threesixty_images',
169 |         progress: '.spinner',
170 |         imagePath:'img/car/',
171 |         filePrefix: '',
172 |         ext: '.png',
173 |         height: 447,
174 |         width: 1000,
175 |         navigation: true,
176 |         disableSpin: false
177 |       });
178 | 
179 |     }
180 | 
181 |   </script>
182 |   </body>
183 | 
184 | </html>
185 | 


--------------------------------------------------------------------------------
/demo/full_page_scrolling.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 |   <head>
  5 |     <title>Threesixty Slider</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  8 |     <link rel="stylesheet" href="css/bootstrap.css">
  9 |     <link rel="stylesheet" href="css/bootstrap-responsive.css">
 10 |     <link rel="stylesheet" href="css/theme.css">
 11 |     <link rel="stylesheet" href="css/styles.css">
 12 |     <link rel="stylesheet" href="css/prism.css">
 13 |     <link rel="stylesheet" href="../styles/threesixty.css">
 14 | 
 15 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
 16 |     <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 17 |     <script type="text/javascript" src="js/modernizr.custom.66977.js"></script>
 18 |     
 19 |   </head>
 20 | 
 21 |   <body>
 22 |     <nav class="navbar navbar-inverse navbar-fixed-top">
 23 |       <div class="navbar-inner">
 24 |         <div class="container-fluid">
 25 |           <a class="brand" href="#">Threesixty Slider</a>
 26 |           <div class="navbar-content">
 27 |             <ul class="nav pull-right">
 28 |               <li>
 29 |                 <a href="default_control.html">Default Settings</a>
 30 |               </li>
 31 |               <li>
 32 |                 <a href="custom_controls.html">Custom Controls</a>
 33 |               </li>
 34 |               <li>
 35 |                 <a href="responsive.html">Responsive Slider</a>
 36 |               </li>
 37 |               <li>
 38 |                 <a href="plugins.html">Plugins</a>
 39 |               </li>
 40 |               <li class="active">
 41 |                 <a href="full_page_scrolling.html">Full Page Scrolling</a>
 42 |               </li>
 43 |             </ul>
 44 |           </div>
 45 |         </div>
 46 |       </div>
 47 |     </nav>
 48 | <iframe src="http://ghbtns.com/github-btn.html?user=creativeaura&amp;type=follow&amp;count=true&amp;size=large"
 49 |   allowtransparency="true" frameborder="0" scrolling="0" width="270" height="30" class="github_follow"></iframe>
 50 |     <section class="container-fluid" id="container">
 51 |       <div class="threesixty product1">
 52 |         <div class="spinner">
 53 |           <span>0%</span>
 54 |         </div>
 55 |         <ol class="threesixty_images"></ol>
 56 |       </div>
 57 |     </section>
 58 | 
 59 |     <section id="tutorials" class="container-fluid">
 60 |       <div class="row">
 61 |         <div class="span12">
 62 |           <h3>Full page scrolling</h3>
 63 |           <p>This is a very basic demo for full page scrolling. I will be creating another standalone page to showcase the demo. </p>
 64 |         </div>
 65 |       </div>
 66 |     </section>
 67 |     <section class="code container-fluid">
 68 |       <h3>HTML Snippet</h3>
 69 | 
 70 | <pre><code class="language-markup">&lt;div class="threesixty car"&gt;
 71 |     &lt;div class="spinner"&gt;
 72 |         &lt;span&gt;0%&lt;/span&gt;
 73 |     &lt;/div&gt;
 74 |     &lt;ol class="threesixty_images"&gt;&lt;/ol&gt;
 75 | &lt;/div&gt;
 76 | </code></pre>
 77 | 
 78 | <h3>Javascript</h3>
 79 | 
 80 | <pre><code class="language-javascript">window.onload = init;
 81 | 
 82 | var car;
 83 | function init(){
 84 | 
 85 |   car = $('.car').ThreeSixty({
 86 |     totalFrames: 52, // Total no. of image you have for 360 slider
 87 |     endFrame: 52, // end frame for the auto spin animation
 88 |     currentFrame: 1, // This the start frame for auto spin
 89 |     imgList: '.threesixty_images', // selector for image list
 90 |     progress: '.spinner', // selector to show the loading progress
 91 |     imagePath:'assets/car/', // path of the image assets
 92 |     filePrefix: '', // file prefix if any
 93 |     ext: '.png', // extention for the assets
 94 |     height: 1000,
 95 |     width: 447,
 96 |     navigation: false,
 97 | 
 98 |   });
 99 | }
100 | 
101 | $(window).scroll(function(event) {
102 |   var page_percentage, frame_value, page_offset;
103 |   page_offset = $(window)[0].pageYOffset;
104 |   if(page_offset) {
105 |     if(page_offset > 700) {
106 |       page_offset = 700;
107 |     }
108 |     page_percentage = page_offset / 700 * 100;
109 |     frame_value = Math.abs(Math.floor(40 / 100 * page_percentage));
110 |     slider.gotoAndPlay(frame_value);
111 |   }
112 | });
113 | 
114 | // Calculate the frame with window scroll
115 | 
116 | //slider.gotoAndPlay(frame_value);
117 | </code></pre>
118 | </section>
119 |     <section id="twitter">
120 |       <div class="container">
121 |         <div class="row">
122 |           <div class="span12 text-center">
123 |             <a class="btn btn-inverse btn-large"><i class="icon-github icon-large"> </i> View on Github</a>
124 |             <a class="btn btn-large btn-danger"><i class="icon-download icon-large" > </i> Download v1.0.2</a>
125 |             <p class="dark-text">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.</p>
126 |           </div>
127 |         </div>
128 |       </div>
129 |     </section>
130 | 
131 |     </section>
132 |     <section id="bottom">
133 |       <div class="container" id="social-buttons">
134 |         <ul class="unstyled inline social">
135 |           <li>
136 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
137 |           </li>
138 |           <li>
139 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
140 |           </li>
141 |           <li class="follow-btn">
142 |             <a href="https://twitter.com/intent/tweet?screen_name=gauravjassal" class="twitter-mention-button" data-related="gauravjassal">Tweet to @gauravjassal</a>
143 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
144 |           </li>
145 |           <li class="tweet-btn hidden-phone">
146 |             <a href="https://twitter.com/share" class="twitter-share-button" data-via="gauravjassal">Tweet</a>
147 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
148 |           </li>
149 |         </ul>
150 |       </div>
151 | 
152 |       <div class="container">
153 |         <div class="row margin-40">
154 |           <div class="span10 offset1 text-center">
155 |             <p>For support and question please contact at    <a href="mailto:gaurav@jassal.me"><i class="icon-envelope-alt"></i> gaurav@jassal.me</a></p>
156 |             <hr>
157 |           </div>
158 |         </div>
159 | 
160 |         <div class="row">
161 |           <div class="span10 offset1 text-center">
162 |             <h3>This plugin is supported in all browsers including our beloved IE 6</h3>
163 |             <img src="img/browsers.png" alt="Firebox Safari Chrome IE Opera">
164 |           </div>
165 |         </div>
166 | 
167 |       </div>
168 |     </section>
169 | 
170 |     <section id="footer">
171 |       <div class="container">
172 |         <div class="row">
173 |           <div class="span12 text-center">
174 |             <p>&copy; Copyright. All Rights Reserved. Created by <a href="http://gaurav.jassal.me">Gaurav Jassal. </a> <a href="http://360slider.mit-license.org">Released under the MIT and GPL Licenses</a></p>
175 |           </div>
176 |         </div>
177 |       </div>
178 |     </section>
179 |     <script src="js/jquery-1.8.3.min.js"></script>
180 |     <script type="text/javascript" src='../src/threesixty.js'></script>
181 |     <script type="text/javascript" src="js/prism.js"></script>
182 |     <script type="text/javascript">
183 |     window.onload = init;
184 | 
185 |     var slider;
186 |     function init(){
187 | 
188 |       slider = $('.product1').ThreeSixty({
189 |         totalFrames: 40,
190 |         endFrame: 2,
191 |         currentFrame: 1,
192 | 
193 |         imgList: '.threesixty_images',
194 |         progress: '.spinner',
195 |         imagePath:'img/forward_reverse/',
196 |         filePrefix: 'forward-reverse_',
197 |         ext: '.jpg',
198 |         height: 740,
199 |         width: 960,
200 |         navigation: false,
201 |         responsive: false
202 |       });
203 | 
204 |     }
205 | 
206 |     $(window).scroll(function(event) {
207 |       var page_percentage, frame_value, page_offset;
208 |       page_offset = $(window)[0].pageYOffset;
209 |       if(page_offset) {
210 |         if(page_offset > 700) {
211 |           page_offset = 700;
212 |         }
213 |         page_percentage = page_offset / 700 * 100;
214 |         frame_value = Math.abs(Math.floor(40 / 100 * page_percentage));
215 |         slider.gotoAndPlay(frame_value);
216 |       }
217 |     });
218 | 
219 |   </script>
220 |   </body>
221 | 
222 | </html>
223 | 


--------------------------------------------------------------------------------
/demo/img/-help.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/-help.gif


--------------------------------------------------------------------------------
/demo/img/360_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/360_icon.png


--------------------------------------------------------------------------------
/demo/img/360_logo_orange.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/360_logo_orange.jpg


--------------------------------------------------------------------------------
/demo/img/360_logo_orange_70x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/360_logo_orange_70x.jpg


--------------------------------------------------------------------------------
/demo/img/browsers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/browsers.png


--------------------------------------------------------------------------------
/demo/img/car/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/1.png


--------------------------------------------------------------------------------
/demo/img/car/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/10.png


--------------------------------------------------------------------------------
/demo/img/car/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/11.png


--------------------------------------------------------------------------------
/demo/img/car/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/12.png


--------------------------------------------------------------------------------
/demo/img/car/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/13.png


--------------------------------------------------------------------------------
/demo/img/car/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/14.png


--------------------------------------------------------------------------------
/demo/img/car/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/15.png


--------------------------------------------------------------------------------
/demo/img/car/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/16.png


--------------------------------------------------------------------------------
/demo/img/car/17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/17.png


--------------------------------------------------------------------------------
/demo/img/car/18.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/18.png


--------------------------------------------------------------------------------
/demo/img/car/19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/19.png


--------------------------------------------------------------------------------
/demo/img/car/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/2.png


--------------------------------------------------------------------------------
/demo/img/car/20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/20.png


--------------------------------------------------------------------------------
/demo/img/car/21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/21.png


--------------------------------------------------------------------------------
/demo/img/car/22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/22.png


--------------------------------------------------------------------------------
/demo/img/car/23.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/23.png


--------------------------------------------------------------------------------
/demo/img/car/24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/24.png


--------------------------------------------------------------------------------
/demo/img/car/25.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/25.png


--------------------------------------------------------------------------------
/demo/img/car/26.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/26.png


--------------------------------------------------------------------------------
/demo/img/car/27.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/27.png


--------------------------------------------------------------------------------
/demo/img/car/28.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/28.png


--------------------------------------------------------------------------------
/demo/img/car/29.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/29.png


--------------------------------------------------------------------------------
/demo/img/car/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/3.png


--------------------------------------------------------------------------------
/demo/img/car/30.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/30.png


--------------------------------------------------------------------------------
/demo/img/car/31.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/31.png


--------------------------------------------------------------------------------
/demo/img/car/32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/32.png


--------------------------------------------------------------------------------
/demo/img/car/33.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/33.png


--------------------------------------------------------------------------------
/demo/img/car/34.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/34.png


--------------------------------------------------------------------------------
/demo/img/car/35.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/35.png


--------------------------------------------------------------------------------
/demo/img/car/36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/36.png


--------------------------------------------------------------------------------
/demo/img/car/37.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/37.png


--------------------------------------------------------------------------------
/demo/img/car/38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/38.png


--------------------------------------------------------------------------------
/demo/img/car/39.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/39.png


--------------------------------------------------------------------------------
/demo/img/car/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/4.png


--------------------------------------------------------------------------------
/demo/img/car/40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/40.png


--------------------------------------------------------------------------------
/demo/img/car/41.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/41.png


--------------------------------------------------------------------------------
/demo/img/car/42.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/42.png


--------------------------------------------------------------------------------
/demo/img/car/43.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/43.png


--------------------------------------------------------------------------------
/demo/img/car/44.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/44.png


--------------------------------------------------------------------------------
/demo/img/car/45.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/45.png


--------------------------------------------------------------------------------
/demo/img/car/46.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/46.png


--------------------------------------------------------------------------------
/demo/img/car/47.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/47.png


--------------------------------------------------------------------------------
/demo/img/car/48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/48.png


--------------------------------------------------------------------------------
/demo/img/car/49.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/49.png


--------------------------------------------------------------------------------
/demo/img/car/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/5.png


--------------------------------------------------------------------------------
/demo/img/car/50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/50.png


--------------------------------------------------------------------------------
/demo/img/car/51.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/51.png


--------------------------------------------------------------------------------
/demo/img/car/52.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/52.png


--------------------------------------------------------------------------------
/demo/img/car/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/6.png


--------------------------------------------------------------------------------
/demo/img/car/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/7.png


--------------------------------------------------------------------------------
/demo/img/car/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/8.png


--------------------------------------------------------------------------------
/demo/img/car/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/car/9.png


--------------------------------------------------------------------------------
/demo/img/cusor-move.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/cusor-move.ico


--------------------------------------------------------------------------------
/demo/img/demo.mov:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/demo.mov


--------------------------------------------------------------------------------
/demo/img/demo.mov.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/demo.mov.gif


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_1.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_10.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_11.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_12.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_13.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_14.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_15.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_16.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_17.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_18.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_19.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_2.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_20.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_21.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_22.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_22.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_23.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_23.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_24.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_24.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_25.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_25.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_26.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_26.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_27.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_27.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_28.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_28.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_29.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_29.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_3.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_30.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_30.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_31.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_31.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_32.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_32.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_33.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_33.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_34.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_34.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_35.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_35.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_36.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_36.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_37.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_37.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_38.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_38.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_39.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_39.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_4.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_40.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_40.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_5.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_6.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_7.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_8.jpg


--------------------------------------------------------------------------------
/demo/img/forward_reverse/forward-reverse_9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/forward_reverse/forward-reverse_9.jpg


--------------------------------------------------------------------------------
/demo/img/fs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/fs.png


--------------------------------------------------------------------------------
/demo/img/glyphicons-halflings-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/glyphicons-halflings-white.png


--------------------------------------------------------------------------------
/demo/img/glyphicons-halflings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/glyphicons-halflings.png


--------------------------------------------------------------------------------
/demo/img/hand_closed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/hand_closed.png


--------------------------------------------------------------------------------
/demo/img/hand_open.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/hand_open.png


--------------------------------------------------------------------------------
/demo/img/loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/loader.gif


--------------------------------------------------------------------------------
/demo/img/sprites.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/demo/img/sprites.png


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 |   <head>
  5 |     <title>Threesixty Slider</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  8 |     <link rel="stylesheet" href="css/bootstrap.css">
  9 |     <link rel="stylesheet" href="css/bootstrap-responsive.css">
 10 |     <link rel="stylesheet" href="css/theme.css">
 11 |     <link rel="stylesheet" href="css/styles.css">
 12 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
 13 |     <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 14 |     <script type="text/javascript" src="js/modernizr.custom.66977.js"></script>
 15 |   </head>
 16 | 
 17 |   <body>
 18 |     <nav class="navbar navbar-inverse navbar-fixed-top">
 19 |       <div class="navbar-inner">
 20 |         <div class="container-fluid">
 21 |           <a class="brand" href="/">Threesixty Slider</a>
 22 |           <div class="navbar-content">
 23 |              <ul class="nav pull-right">
 24 |               <li>
 25 |                 <a href="default_control.html">Default Settings</a>
 26 |               </li>
 27 |               <li>
 28 |                 <a href="custom_controls.html">Custom Controls</a>
 29 |               </li>
 30 |               <li>
 31 |                 <a href="responsive.html">Responsive Slider</a>
 32 |               </li>
 33 |               <li>
 34 |                 <a href="plugins.html">Plugins</a>
 35 |               </li>
 36 |               <li>
 37 |                 <a href="full_page_scrolling.html">Full Page Scrolling</a>
 38 |               </li>
 39 |             </ul>
 40 |             </ul>
 41 |           </div>
 42 |         </div>
 43 |       </div>
 44 |     </nav>
 45 | <iframe src="http://ghbtns.com/github-btn.html?user=creativeaura&amp;type=follow&amp;count=true&amp;size=large"
 46 |   allowtransparency="true" frameborder="0" scrolling="0" width="270" height="30" class="github_follow"></iframe>
 47 |     <section class="container-fluid" id="main">
 48 |       <div class="video-container text-center">
 49 |         <img src="img/demo.mov.gif" alt="Demo" width="750" height="351" class="demo_video">
 50 |       </div>
 51 |     </section>
 52 | 
 53 |     <section id="twitter">
 54 |       <div class="container">
 55 |         <div class="row">
 56 |           <div class="span12 text-center">
 57 |             <a class="btn btn-inverse btn-large"><i class="icon-github icon-large"> </i> View on Github</a>
 58 |             <a class="btn btn-large btn-danger"><i class="icon-download icon-large" > </i> Download v1.0.2</a>
 59 | 
 60 |             <p class="dark-text">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.</p>
 61 |           </div>
 62 |         </div>
 63 |       </div>
 64 |     </section>
 65 | 
 66 |     <section id="bottom">
 67 | 
 68 |       <div class="container" id="social-buttons">
 69 |         <ul class="unstyled inline social">
 70 |           <li>
 71 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
 72 |           </li>
 73 |           <li>
 74 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
 75 |           </li>
 76 |           <li class="follow-btn">
 77 |             <a href="https://twitter.com/intent/tweet?screen_name=gauravjassal" class="twitter-mention-button" data-related="gauravjassal">Tweet to @gauravjassal</a>
 78 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
 79 |           </li>
 80 |           <li class="tweet-btn hidden-phone">
 81 |             <a href="https://twitter.com/share" class="twitter-share-button" data-via="gauravjassal">Tweet</a>
 82 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
 83 |           </li>
 84 |         </ul>
 85 |       </div>
 86 | 
 87 |       <div class="container">
 88 |         <div class="row margin-40">
 89 |           <div class="span10 offset1 text-center">
 90 |             <p>For support and question please contact at    <a href="mailto:gaurav@jassal.me"><i class="icon-envelope-alt"></i> gaurav@jassal.me</a></p>
 91 |             <hr>
 92 |           </div>
 93 |         </div>
 94 | 
 95 |         <div class="row">
 96 |           <div class="span10 offset1 text-center">
 97 |             <h3>This plugin is supported in all browsers including our beloved IE 6</h3>
 98 |             <img src="img/browsers.png" alt="Firebox Safari Chrome IE Opera">
 99 |           </div>
100 |         </div>
101 | 
102 |       </div>
103 |     </section>
104 | 
105 |     <section id="footer">
106 |       <div class="container">
107 |         <div class="row">
108 |           <div class="span12 text-center">
109 |             <p>&copy; Copyright. All Rights Reserved. Created by <a href="http://gaurav.jassal.me">Gaurav Jassal. </a> <a href="http://360slider.mit-license.org">Released under the MIT and GPL Licenses</a></p>
110 |           </div>
111 |         </div>
112 |       </div>
113 |     </section>
114 |     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
115 |     <script type="text/javascript" src='../dist/threesixty.min.js'></script>
116 |   </body>
117 | 
118 | </html>
119 | 


--------------------------------------------------------------------------------
/demo/js/modernizr.custom.66977.js:
--------------------------------------------------------------------------------
1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
2 |  * Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-flexboxlegacy-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-cssclasses-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load
3 |  */
4 | ;window.Modernizr=function(a,b,c){function C(a){j.cssText=a}function D(a,b){return C(n.join(a+";")+(b||""))}function E(a,b){return typeof a===b}function F(a,b){return!!~(""+a).indexOf(b)}function G(a,b){for(var d in a){var e=a[d];if(!F(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function H(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:E(f,"function")?f.bind(d||b):f}return!1}function I(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return E(b,"string")||E(b,"undefined")?G(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),H(e,b,c))}function J(){e.input=function(c){for(var d=0,e=c.length;d<e;d++)u[c[d]]=c[d]in k;return u.list&&(u.list=!!b.createElement("datalist")&&!!a.HTMLDataListElement),u}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d<i;d++)k.setAttribute("type",f=a[d]),e=k.type!=="text",e&&(k.value=l,k.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(f)&&k.style.WebkitAppearance!==c?(g.appendChild(k),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(k,null).WebkitAppearance!=="textfield"&&k.offsetHeight!==0,g.removeChild(k)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=k.checkValidity&&k.checkValidity()===!1:e=k.value!=l)),t[a[d]]=!!e;return t}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k=b.createElement("input"),l=":)",m={}.toString,n=" -webkit- -moz- -o- -ms- ".split(" "),o="Webkit Moz O ms",p=o.split(" "),q=o.toLowerCase().split(" "),r={svg:"http://www.w3.org/2000/svg"},s={},t={},u={},v=[],w=v.slice,x,y=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["&#173;",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=E(e[d],"function"),E(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),A={}.hasOwnProperty,B;!E(A,"undefined")&&!E(A.call,"undefined")?B=function(a,b){return A.call(a,b)}:B=function(a,b){return b in a&&E(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return I("flexWrap")},s.flexboxlegacy=function(){return I("boxDirection")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!E(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!I("indexedDB",a)},s.hashchange=function(){return z("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return C("background-color:rgba(150,255,150,.5)"),F(j.backgroundColor,"rgba")},s.hsla=function(){return C("background-color:hsla(120,40%,100%,.5)"),F(j.backgroundColor,"rgba")||F(j.backgroundColor,"hsla")},s.multiplebgs=function(){return C("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return I("backgroundSize")},s.borderimage=function(){return I("borderImage")},s.borderradius=function(){return I("borderRadius")},s.boxshadow=function(){return I("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return D("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return I("animationName")},s.csscolumns=function(){return I("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return C((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),F(j.backgroundImage,"gradient")},s.cssreflections=function(){return I("boxReflect")},s.csstransforms=function(){return!!I("transform")},s.csstransforms3d=function(){var a=!!I("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return I("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="<svg/>",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var K in s)B(s,K)&&(x=K.toLowerCase(),e[x]=s[K](),v.push((e[x]?"":"no-")+x));return e.input||J(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)B(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},C(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.hasEvent=z,e.testProp=function(a){return G([a])},e.testAllProps=I,e.testStyles=y,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};


--------------------------------------------------------------------------------
/demo/js/prism.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Prism: Lightweight, robust, elegant syntax highlighting
 3 |  * MIT license http://www.opensource.org/licenses/mit-license.php/
 4 |  * @author Lea Verou http://lea.verou.me
 5 |  */(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){return n.stringify(t.tokenize(e,r),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();;
 6 | Prism.languages.markup={comment:/&lt;!--[\w\W]*?-->/g,prolog:/&lt;\?.+?\?>/,doctype:/&lt;!DOCTYPE.+?>/,cdata:/&lt;!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/&lt;\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^&lt;\/?[\w:-]+/i,inside:{punctuation:/^&lt;\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&amp;#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&amp;/,"&"))});;
 7 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/ig,inside:{tag:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
 8 | Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}}, number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|&lt;=?|>=?|={1,3}|(&amp;){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};;
 9 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/ig,inside:{tag:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});;
10 | 


--------------------------------------------------------------------------------
/demo/multiple_sliders.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 |   <head>
  5 |     <title>Threesixty Slider</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  8 |     <link rel="stylesheet" href="css/bootstrap.css">
  9 |     <link rel="stylesheet" href="css/bootstrap-responsive.css">
 10 |     <link rel="stylesheet" href="css/theme.css">
 11 |     <link rel="stylesheet" href="css/styles.css">
 12 |     <link rel="stylesheet" href="css/prism.css">
 13 |     <link rel="stylesheet" href="../styles/threesixty.css">
 14 | 
 15 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
 16 |     <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 17 |     <script type="text/javascript" src="js/modernizr.custom.66977.js"></script>
 18 |   </head>
 19 | 
 20 |   <body>
 21 |     <nav class="navbar navbar-inverse navbar-fixed-top">
 22 |       <div class="navbar-inner">
 23 |         <div class="container-fluid">
 24 |           <a class="brand" href="#">Threesixty Slider</a>
 25 |           <div class="navbar-content">
 26 |             <ul class="nav pull-right">
 27 |               <li>
 28 |                 <a href="default_control.html">Default Settings</a>
 29 |               </li>
 30 |               <li class="active">
 31 |                 <a href="multiple_sliders.html">Multiple Slider</a>
 32 |               </li>
 33 |               <li>
 34 |                 <a href="custom_controls.html">Custom Controls</a>
 35 |               </li>
 36 |               <li>
 37 |                 <a href="responsive.html">Responsive Slider</a>
 38 |               </li>
 39 |               <li>
 40 |                 <a href="plugins.html">Plugins</a>
 41 |               </li>
 42 |               <li>
 43 |                 <a href="full_page_scrolling.html">Full Page Scrolling</a>
 44 |               </li>
 45 |             </ul>
 46 |           </div>
 47 |         </div>
 48 |       </div>
 49 |     </nav>
 50 | 
 51 |     <section class="container-fluid" id="container">
 52 |       <div class="threesixty product1">
 53 |         <div class="spinner">
 54 |           <span>0%</span>
 55 |         </div>
 56 |         <ol class="threesixty_images"></ol>
 57 |       </div>
 58 |     </section>
 59 | 
 60 | 
 61 | 
 62 |     <section class="code container-fluid">
 63 |       <h3>HTML Snippet</h3>
 64 | 
 65 | <pre><code class="language-markup">&lt;div class="threesixty car"&gt;
 66 |     &lt;div class="spinner"&gt;
 67 |         &lt;span&gt;0%&lt;/span&gt;
 68 |     &lt;/div&gt;
 69 |     &lt;ol class="threesixty_images"&gt;&lt;/ol&gt;
 70 | &lt;/div&gt;
 71 | </code></pre>
 72 | 
 73 | <h3>Javascript</h3>
 74 | 
 75 | <pre><code class="language-javascript">window.onload = init;
 76 | 
 77 | var car;
 78 | function init(){
 79 | 
 80 |     car = $('.car').ThreeSixty({
 81 |         totalFrames: 52, // Total no. of image you have for 360 slider
 82 |         endFrame: 52, // end frame for the auto spin animation
 83 |         currentFrame: 1, // This the start frame for auto spin
 84 |         imgList: '.threesixty_images', // selector for image list
 85 |         progress: '.spinner', // selector to show the loading progress
 86 |         imagePath:'assets/car/', // path of the image assets
 87 |         filePrefix: '', // file prefix if any
 88 |         ext: '.png', // extention for the assets
 89 |         height: 1000,
 90 |         width: 447,
 91 |         navigation: true
 92 |     });
 93 | 
 94 | }
 95 | </code></pre>
 96 | </section>
 97 |     <section id="twitter">
 98 |       <div class="container">
 99 |         <div class="row">
100 |           <div class="span12 text-center">
101 |             <a class="btn btn-inverse btn-large"><i class="icon-github icon-large"> </i> View on Github</a>
102 |             <a class="btn btn-large btn-danger"><i class="icon-download icon-large" > </i> Download v1.0.2</a>
103 |             <p class="dark-text">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.</p>
104 |           </div>
105 |         </div>
106 |       </div>
107 |     </section>
108 | 
109 |     </section>
110 |     <section id="bottom">
111 |       <div class="container" id="social-buttons">
112 |         <ul class="unstyled inline social">
113 |           <li>
114 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
115 |           </li>
116 |           <li>
117 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
118 |           </li>
119 |           <li class="follow-btn">
120 |             <a href="https://twitter.com/intent/tweet?screen_name=gauravjassal" class="twitter-mention-button" data-related="gauravjassal">Tweet to @gauravjassal</a>
121 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
122 |           </li>
123 |           <li class="tweet-btn hidden-phone">
124 |             <a href="https://twitter.com/share" class="twitter-share-button" data-via="gauravjassal">Tweet</a>
125 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
126 |           </li>
127 |         </ul>
128 |       </div>
129 | 
130 |       <div class="container">
131 |         <div class="row margin-40">
132 |           <div class="span10 offset1 text-center">
133 |             <p>For support and question please contact at    <a href="mailto:gaurav@jassal.me"><i class="icon-envelope-alt"></i> gaurav@jassal.me</a></p>
134 |             <hr>
135 |           </div>
136 |         </div>
137 | 
138 |         <div class="row">
139 |           <div class="span10 offset1 text-center">
140 |             <h3>This plugin is supported in all browsers including our beloved IE 6</h3>
141 |             <img src="img/browsers.png" alt="Firebox Safari Chrome IE Opera">
142 |           </div>
143 |         </div>
144 | 
145 |       </div>
146 |     </section>
147 | 
148 |     <section id="footer">
149 |       <div class="container">
150 |         <div class="row">
151 |           <div class="span12 text-center">
152 |             <p>&copy; Copyright. All Rights Reserved. Created by <a href="http://gaurav.jassal.me">Gaurav Jassal. </a> <a href="http://360slider.mit-license.org">Released under the MIT and GPL Licenses</a></p>
153 |           </div>
154 |         </div>
155 |       </div>
156 |     </section>
157 |     <script src="js/jquery-1.8.3.min.js"></script>
158 |     <script type="text/javascript" src='../src/threesixty.js'></script>
159 |     <script type="text/javascript" src="js/prism.js"></script>
160 |     <script type="text/javascript">
161 |     window.onload = init;
162 | 
163 |     var product;
164 |     function init(){
165 | 
166 |       product1 = $('.product1').ThreeSixty({
167 |         totalFrames: 52,
168 |         endFrame: 52,
169 |         currentFrame: 1,
170 | 
171 |         imgList: '.threesixty_images',
172 |         progress: '.spinner',
173 |         imagePath:'img/car/',
174 |         filePrefix: '',
175 |         ext: '.png',
176 |         height: 447,
177 |         width: 1000,
178 |         navigation: true,
179 |         disableSpin: true
180 |       });
181 | 
182 |     }
183 | 
184 |   </script>
185 |   </body>
186 | 
187 | </html>
188 | 


--------------------------------------------------------------------------------
/demo/plugins.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 |   <head>
  5 |     <title>Threesixty Slider</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  8 |     <link rel="stylesheet" href="css/bootstrap.css">
  9 |     <link rel="stylesheet" href="css/bootstrap-responsive.css">
 10 |     <link rel="stylesheet" href="css/theme.css">
 11 |     <link rel="stylesheet" href="css/styles.css">
 12 |     <link rel="stylesheet" href="css/prism.css">
 13 |     <link rel="stylesheet" href="../styles/threesixty.css">
 14 | 
 15 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
 16 |     <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 17 |     <script type="text/javascript" src="js/modernizr.custom.66977.js"></script>
 18 |   </head>
 19 | 
 20 |   <body>
 21 |     <nav class="navbar navbar-inverse navbar-fixed-top">
 22 |       <div class="navbar-inner">
 23 |         <div class="container-fluid">
 24 |           <a class="brand" href="#">Threesixty Slider</a>
 25 |           <div class="navbar-content">
 26 |             <ul class="nav pull-right">
 27 |               <li>
 28 |                 <a href="default_control.html">Default Settings</a>
 29 |               </li>
 30 |               <li>
 31 |                 <a href="custom_controls.html">Custom Controls</a>
 32 |               </li>
 33 |               <li>
 34 |                 <a href="responsive.html">Responsive Slider</a>
 35 |               </li>
 36 |               <li class="active">
 37 |                 <a href="plugins.html">Plugins</a>
 38 |               </li>
 39 |               <li>
 40 |                 <a href="full_page_scrolling.html">Full Page Scrolling</a>
 41 |               </li>
 42 |             </ul>
 43 |           </div>
 44 |         </div>
 45 |       </div>
 46 |     </nav>
 47 | <iframe src="http://ghbtns.com/github-btn.html?user=creativeaura&amp;type=follow&amp;count=true&amp;size=large"
 48 |   allowtransparency="true" frameborder="0" scrolling="0" width="270" height="30" class="github_follow"></iframe>
 49 |     <section class="container-fluid" id="container">
 50 |       <div class="threesixty product1">
 51 |         <div class="spinner">
 52 |           <span>0%</span>
 53 |         </div>
 54 |         <ol class="threesixty_images"></ol>
 55 |       </div>
 56 |     </section>
 57 |     <section class="container-fluid">
 58 |       <p>You can use  plugin to view 360 in fullscreen. Include <strong>threesixty.fullscreen.js</strong> and init <strong>plugins: ['ThreeSixtyFullscreen']</strong> in config</p>
 59 |     </section>
 60 |     <section class="code container-fluid">
 61 |       <h3>HTML Snippet</h3>
 62 | 
 63 | <pre><code class="language-markup">&lt;div class="threesixty car"&gt;
 64 |     &lt;div class="spinner"&gt;
 65 |         &lt;span&gt;0%&lt;/span&gt;
 66 |     &lt;/div&gt;
 67 |     &lt;ol class="threesixty_images"&gt;&lt;/ol&gt;
 68 | &lt;/div&gt;
 69 | </code></pre>
 70 | 
 71 | <h3>Javascript</h3>
 72 | 
 73 | <pre><code class="language-javascript">window.onload = init;
 74 | 
 75 | var car;
 76 | function init(){
 77 | 
 78 |     car = $('.car').ThreeSixty({
 79 |         totalFrames: 52, // Total no. of image you have for 360 slider
 80 |         endFrame: 52, // end frame for the auto spin animation
 81 |         currentFrame: 1, // This the start frame for auto spin
 82 |         imgList: '.threesixty_images', // selector for image list
 83 |         progress: '.spinner', // selector to show the loading progress
 84 |         imagePath:'assets/car/', // path of the image assets
 85 |         filePrefix: '', // file prefix if any
 86 |         ext: '.png', // extention for the assets
 87 |         height: 1000,
 88 |         width: 447,
 89 |         navigation: true,
 90 |         plugins: ['ThreeSixtyFullscreen']
 91 |     });
 92 | 
 93 | }
 94 | </code></pre>
 95 | </section>
 96 |     <section id="twitter">
 97 |       <div class="container">
 98 |         <div class="row">
 99 |           <div class="span12 text-center">
100 |             <a class="btn btn-inverse btn-large"><i class="icon-github icon-large"> </i> View on Github</a>
101 |             <a class="btn btn-large btn-danger"><i class="icon-download icon-large" > </i> Download v1.0.2</a>
102 |             <p class="dark-text">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.</p>
103 |           </div>
104 |         </div>
105 |       </div>
106 |     </section>
107 | 
108 |     </section>
109 |     <section id="bottom">
110 |       <div class="container" id="social-buttons">
111 |         <ul class="unstyled inline social">
112 |           <li>
113 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
114 |           </li>
115 |           <li>
116 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
117 |           </li>
118 |           <li class="follow-btn">
119 |             <a href="https://twitter.com/intent/tweet?screen_name=gauravjassal" class="twitter-mention-button" data-related="gauravjassal">Tweet to @gauravjassal</a>
120 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
121 |           </li>
122 |           <li class="tweet-btn hidden-phone">
123 |             <a href="https://twitter.com/share" class="twitter-share-button" data-via="gauravjassal">Tweet</a>
124 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
125 |           </li>
126 |         </ul>
127 |       </div>
128 | 
129 |       <div class="container">
130 |         <div class="row margin-40">
131 |           <div class="span10 offset1 text-center">
132 |             <p>For support and question please contact at    <a href="mailto:gaurav@jassal.me"><i class="icon-envelope-alt"></i> gaurav@jassal.me</a></p>
133 |             <hr>
134 |           </div>
135 |         </div>
136 | 
137 |         <div class="row">
138 |           <div class="span10 offset1 text-center">
139 |             <h3>This plugin is supported in all browsers including our beloved IE 6</h3>
140 |             <img src="img/browsers.png" alt="Firebox Safari Chrome IE Opera">
141 |           </div>
142 |         </div>
143 | 
144 |       </div>
145 |     </section>
146 | 
147 |     <section id="footer">
148 |       <div class="container">
149 |         <div class="row">
150 |           <div class="span12 text-center">
151 |             <p>&copy; Copyright. All Rights Reserved. Created by <a href="http://gaurav.jassal.me">Gaurav Jassal. </a> <a href="http://360slider.mit-license.org">Released under the MIT and GPL Licenses</a></p>
152 |           </div>
153 |         </div>
154 |       </div>
155 |     </section>
156 |     <script src="js/jquery-1.8.3.min.js"></script>
157 |     <script type="text/javascript" src='../src/threesixty.js'></script>
158 |     <script type="text/javascript" src='../src/plugins/threesixty.fullscreen.js'></script>
159 |     <script type="text/javascript" src="js/prism.js"></script>
160 |     <script type="text/javascript">
161 |     window.onload = init;
162 | 
163 |     var product;
164 |     function init(){
165 | 
166 |       product1 = $('.product1').ThreeSixty({
167 |         totalFrames: 52,
168 |         endFrame: 30,
169 |         currentFrame: 1,
170 | 
171 |         imgList: '.threesixty_images',
172 |         progress: '.spinner',
173 |         imagePath:'img/car/',
174 |         filePrefix: '',
175 |         ext: '.png',
176 |         height: 447,
177 |         width: 1000,
178 |         navigation: true,
179 |         disableSpin: false,
180 |         plugins: ['ThreeSixtyFullscreen']
181 |       });
182 | 
183 |     }
184 | 
185 |   </script>
186 |   </body>
187 | 
188 | </html>
189 | 


--------------------------------------------------------------------------------
/demo/responsive.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 |   <head>
  5 |     <title>Threesixty Slider</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  8 |     <link rel="stylesheet" href="css/bootstrap.css">
  9 |     <link rel="stylesheet" href="css/bootstrap-responsive.css">
 10 |     <link rel="stylesheet" href="css/theme.css">
 11 |     <link rel="stylesheet" href="css/styles.css">
 12 |     <link rel="stylesheet" href="css/prism.css">
 13 |     <link rel="stylesheet" href="../styles/threesixty.css">
 14 | 
 15 |     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
 16 |     <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 17 |     <script type="text/javascript" src="js/modernizr.custom.66977.js"></script>
 18 |   </head>
 19 | 
 20 |   <body>
 21 |     <nav class="navbar navbar-inverse navbar-fixed-top">
 22 |       <div class="navbar-inner">
 23 |         <div class="container-fluid">
 24 |           <a class="brand" href="#">Threesixty Slider</a>
 25 |           <div class="navbar-content">
 26 |             <ul class="nav pull-right">
 27 |               <li>
 28 |                 <a href="default_control.html">Default Settings</a>
 29 |               </li>
 30 |               <li>
 31 |                 <a href="custom_controls.html">Custom Controls</a>
 32 |               </li>
 33 |               <li class="active">
 34 |                 <a href="responsive.html">Responsive Slider</a>
 35 |               </li>
 36 |               <li>
 37 |                 <a href="plugins.html">Plugins</a>
 38 |               </li>
 39 |               <li>
 40 |                 <a href="full_page_scrolling.html">Full Page Scrolling</a>
 41 |               </li>
 42 |             </ul>
 43 |           </div>
 44 |         </div>
 45 |       </div>
 46 |     </nav>
 47 | <iframe src="http://ghbtns.com/github-btn.html?user=creativeaura&amp;type=follow&amp;count=true&amp;size=large"
 48 |   allowtransparency="true" frameborder="0" scrolling="0" width="270" height="30" class="github_follow"></iframe>
 49 |     <section class="container-fluid" id="container">
 50 |       <div class="threesixty product1">
 51 |         <div class="spinner">
 52 |           <span>0%</span>
 53 |         </div>
 54 |         <ol class="threesixty_images"></ol>
 55 |       </div>
 56 |     </section>
 57 |     <section class="code container-fluid">
 58 |       <h3>HTML Snippet</h3>
 59 | 
 60 | <pre><code class="language-markup">&lt;div class="threesixty car"&gt;
 61 |     &lt;div class="spinner"&gt;
 62 |         &lt;span&gt;0%&lt;/span&gt;
 63 |     &lt;/div&gt;
 64 |     &lt;ol class="threesixty_images"&gt;&lt;/ol&gt;
 65 | &lt;/div&gt;
 66 | </code></pre>
 67 | 
 68 | <h3>Javascript</h3>
 69 | 
 70 | <pre><code class="language-javascript">window.onload = init;
 71 | 
 72 | var car;
 73 | function init(){
 74 | 
 75 |     car = $('.car').ThreeSixty({
 76 |         totalFrames: 52, // Total no. of image you have for 360 slider
 77 |         endFrame: 52, // end frame for the auto spin animation
 78 |         currentFrame: 1, // This the start frame for auto spin
 79 |         imgList: '.threesixty_images', // selector for image list
 80 |         progress: '.spinner', // selector to show the loading progress
 81 |         imagePath:'assets/car/', // path of the image assets
 82 |         filePrefix: '', // file prefix if any
 83 |         ext: '.png', // extention for the assets
 84 |         height: 1000,
 85 |         width: 447,
 86 |         navigation: true,
 87 |         responsive: true
 88 |     });
 89 | 
 90 | }
 91 | </code></pre>
 92 | </section>
 93 |     <section id="twitter">
 94 |       <div class="container">
 95 |         <div class="row">
 96 |           <div class="span12 text-center">
 97 |             <a class="btn btn-inverse btn-large"><i class="icon-github icon-large"> </i> View on Github</a>
 98 |             <a class="btn btn-large btn-danger"><i class="icon-download icon-large" > </i> Download v1.0.2</a>
 99 |             <p class="dark-text">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.</p>
100 |           </div>
101 |         </div>
102 |       </div>
103 |     </section>
104 | 
105 |     </section>
106 |     <section id="bottom">
107 |       <div class="container" id="social-buttons">
108 |         <ul class="unstyled inline social">
109 |           <li>
110 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
111 |           </li>
112 |           <li>
113 |             <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=creativeaura&repo=threesixty-slider&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
114 |           </li>
115 |           <li class="follow-btn">
116 |             <a href="https://twitter.com/intent/tweet?screen_name=gauravjassal" class="twitter-mention-button" data-related="gauravjassal">Tweet to @gauravjassal</a>
117 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
118 |           </li>
119 |           <li class="tweet-btn hidden-phone">
120 |             <a href="https://twitter.com/share" class="twitter-share-button" data-via="gauravjassal">Tweet</a>
121 |             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
122 |           </li>
123 |         </ul>
124 |       </div>
125 | 
126 |       <div class="container">
127 |         <div class="row margin-40">
128 |           <div class="span10 offset1 text-center">
129 |             <p>For support and question please contact at    <a href="mailto:gaurav@jassal.me"><i class="icon-envelope-alt"></i> gaurav@jassal.me</a></p>
130 |             <hr>
131 |           </div>
132 |         </div>
133 | 
134 |         <div class="row">
135 |           <div class="span10 offset1 text-center">
136 |             <h3>This plugin is supported in all browsers including our beloved IE 6</h3>
137 |             <img src="img/browsers.png" alt="Firebox Safari Chrome IE Opera">
138 |           </div>
139 |         </div>
140 | 
141 |       </div>
142 |     </section>
143 | 
144 |     <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
145 |       <div class="modal-header">
146 |         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
147 |         <h3 id="myModalLabel">Modal header</h3>
148 |       </div>
149 |       <div class="modal-body">
150 |         <p>One fine body…</p>
151 |       </div>
152 |       <div class="modal-footer">
153 |         <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
154 |         <button class="btn btn-primary">Save changes</button>
155 |       </div>
156 |     </div>
157 | 
158 |     <section id="footer">
159 |       <div class="container">
160 |         <div class="row">
161 |           <div class="span12 text-center">
162 |             <p>&copy; Copyright. All Rights Reserved. Created by <a href="http://gaurav.jassal.me">Gaurav Jassal. </a> <a href="http://360slider.mit-license.org" id="licence">
163 |               Released under the MIT and GPL Licenses</a></p>
164 |           </div>
165 |         </div>
166 |       </div>
167 |     </section>
168 |     <script src="js/jquery-1.8.3.min.js"></script>
169 |     <script type="text/javascript" src='../src/threesixty.js'></script>
170 |     <script type="text/javascript" src="js/prism.js"></script>
171 |     <script type="text/javascript">
172 |     window.onload = init;
173 | 
174 |     var product;
175 |     function init(){
176 | 
177 |       product1 = $('.product1').ThreeSixty({
178 |         totalFrames: 52,
179 |         endFrame: 52,
180 |         currentFrame: 1,
181 | 
182 |         imgList: '.threesixty_images',
183 |         progress: '.spinner',
184 |         imagePath:'img/car/',
185 |         filePrefix: '',
186 |         ext: '.png',
187 |         height: 447,
188 |         width: 1000,
189 |         navigation: true,
190 |         responsive: true
191 |       });
192 | 
193 |     }
194 | 
195 |   </script>
196 |   </body>
197 | 
198 | </html>
199 | 


--------------------------------------------------------------------------------
/dist/threesixty.min.js:
--------------------------------------------------------------------------------
1 | /*! threesixty-slider 2013-11-22 verison 1.0.6-vml */
2 | /* http://github.com/vml-webdev/threesixty-slider.git */
3 | !function(a){"use strict";a.ThreeSixty=function(b,c){var d,e=this,f=[];e.$el=a(b),e.el=b,e.$el.data("ThreeSixty",e),e.init=function(){d=a.extend({},a.ThreeSixty.defaultOptions,c),d.parallel||e.loadImages(),d.disableSpin&&(d.currentFrame=1,d.endFrame=1),e.initProgress()},e.initProgress=function(){e.$el.css({width:d.width+"px",height:d.height+"px","background-image":"none !important"}).css(d.styles),d.responsive&&e.$el.css({width:"100%"}),e.$el.find(d.progress).css({marginTop:d.height/2-15+"px"}),e.$el.find(d.progress).fadeIn("slow"),e.$el.find(d.imgList).hide()},e.loadImages=function(){var b,c,g,h;b=document.createElement("li"),h=d.zeroBased?0:1,c=d.domain+d.imagePath+d.filePrefix+e.zeroPad(d.loadedImages+h)+d.ext+(e.browser.isIE()?"?"+(new Date).getTime():""),g=a("<img>").attr("src",c).addClass("previous-image").appendTo(b),f.push(g),e.$el.find(d.imgList).append(b),a(g).load(function(){e.imageLoaded()})},e.imageLoaded=function(){d.loadedImages+=1,a(d.progress+" span").text(Math.floor(d.loadedImages/d.totalFrames*100)+"%"),d.loadedImages>=d.totalFrames?(d.disableSpin&&f[0].removeClass("previous-image").addClass("current-image"),a(d.progress).fadeOut("slow",function(){a(this).hide(),e.showImages(),e.showNavigation()})):e.loadImages()},e.showImages=function(){e.$el.find(".txtC").fadeIn(),e.$el.find(d.imgList).fadeIn(),e.ready=!0,d.ready=!0,e.initEvents(),e.refresh(),e.initPlugins()},e.initPlugins=function(){a.each(d.plugins,function(b,c){if("function"!=typeof a[c])throw new Error(c+" not available.");a[c].call(e,e.$el,d)})},e.showNavigation=function(){if(d.navigation&&!d.navigation_init){var b,c,f,g;b=a("<div/>").attr("class","nav_bar"),c=a("<a/>").attr({href:"#","class":"nav_bar_next"}).html("next"),f=a("<a/>").attr({href:"#","class":"nav_bar_previous"}).html("previous"),g=a("<a/>").attr({href:"#","class":"nav_bar_play"}).html("play"),b.append(f),b.append(g),b.append(c),e.$el.prepend(b),c.bind("mousedown touchstart",e.next),f.bind("mousedown touchstart",e.previous),g.bind("mousedown touchstart",e.play_stop),d.navigation_init=!0}},e.play_stop=function(b){b.preventDefault(),d.autoplay?(d.autoplay=!1,a(b.currentTarget).removeClass("nav_bar_stop").addClass("nav_bar_play"),clearInterval(d.play),d.play=null):(d.autoplay=!0,d.play=setInterval(e.moveToNextFrame,40),a(b.currentTarget).removeClass("nav_bar_play").addClass("nav_bar_stop"))},e.next=function(a){a&&a.preventDefault(),d.endFrame-=5,e.refresh()},e.previous=function(a){a&&a.preventDefault(),d.endFrame+=5,e.refresh()},e.play=function(){d.autoplay||(d.autoplay=!0,d.play=setInterval(e.moveToNextFrame,40))},e.stop=function(){d.autoplay&&(d.autoplay=!1,clearInterval(d.play),d.play=null)},e.moveToNextFrame=function(){1===d.autoplayDirection?d.endFrame-=1:d.endFrame+=1,e.refresh()},e.gotoAndPlay=function(a){if(d.disableWrap)d.endFrame=a,e.refresh();else{var b=Math.ceil(d.endFrame/d.totalFrames);0===b&&(b=1);var c=b>1?d.endFrame-(b-1)*d.totalFrames:d.endFrame,f=d.totalFrames-c,g=0;g=a-c>0?a-c<c+(d.totalFrames-a)?d.endFrame+(a-c):d.endFrame-(c+(d.totalFrames-a)):f+a>c-a?d.endFrame-(c-a):d.endFrame+(f+a),c!==a&&(d.endFrame=g,e.refresh())}},e.initEvents=function(){e.$el.bind("mousedown touchstart touchmove touchend mousemove click",function(a){a.preventDefault(),"mousedown"===a.type&&1===a.which||"touchstart"===a.type?(d.pointerStartPosX=e.getPointerEvent(a).pageX,d.dragging=!0):"touchmove"===a.type?e.trackPointer(a):"touchend"===a.type&&(d.dragging=!1)}),a(document).bind("mouseup",function(){d.dragging=!1,a(this).css("cursor","none")}),a(document).bind("mousemove",function(a){d.dragging?(a.preventDefault(),!e.browser.isIE&&d.showCursor&&e.$el.css("cursor","url(assets/images/hand_closed.png), auto")):!e.browser.isIE&&d.showCursor&&e.$el.css("cursor","url(assets/images/hand_open.png), auto"),e.trackPointer(a)})},e.getPointerEvent=function(a){return a.originalEvent.targetTouches?a.originalEvent.targetTouches[0]:a},e.trackPointer=function(a){d.ready&&d.dragging&&(d.pointerEndPosX=e.getPointerEvent(a).pageX,d.monitorStartTime<(new Date).getTime()-d.monitorInt&&(d.pointerDistance=d.pointerEndPosX-d.pointerStartPosX,d.endFrame=d.currentFrame+Math.ceil((d.totalFrames-1)*d.speedMultiplier*(d.pointerDistance/e.$el.width())),d.disableWrap&&(d.endFrame=Math.min(d.totalFrames-(d.zeroBased?1:0),d.endFrame),d.endFrame=Math.max(d.zeroBased?0:1,d.endFrame)),e.refresh(),d.monitorStartTime=(new Date).getTime(),d.pointerStartPosX=e.getPointerEvent(a).pageX))},e.refresh=function(){0===d.ticker&&(d.ticker=setInterval(e.render,Math.round(1e3/d.framerate)))},e.render=function(){var a;d.currentFrame!==d.endFrame?(a=d.endFrame<d.currentFrame?Math.floor(.1*(d.endFrame-d.currentFrame)):Math.ceil(.1*(d.endFrame-d.currentFrame)),e.hidePreviousFrame(),d.currentFrame+=a,e.showCurrentFrame()):(window.clearInterval(d.ticker),d.ticker=0)},e.hidePreviousFrame=function(){f[e.getNormalizedCurrentFrame()].removeClass("current-image").addClass("previous-image")},e.showCurrentFrame=function(){f[e.getNormalizedCurrentFrame()].removeClass("previous-image").addClass("current-image")},e.getNormalizedCurrentFrame=function(){var a,b;return d.disableWrap?(a=Math.min(d.currentFrame,d.totalFrames-(d.zeroBased?1:0)),b=Math.min(d.endFrame,d.totalFrames-(d.zeroBased?1:0)),a=Math.max(a,d.zeroBased?0:1),b=Math.max(b,d.zeroBased?0:1),d.currentFrame=a,d.endFrame=b):(a=Math.ceil(d.currentFrame%d.totalFrames),0>a&&(a+=d.totalFrames-1)),a},e.zeroPad=function(a){function b(a,b){var c=a.toString();if(d.zeroPadding)for(;c.length<b;)c="0"+c;return c}var c=Math.log(d.totalFrames)/Math.LN10,e=1e3,f=Math.round(c*e)/e,g=Math.floor(f)+1;return b(a,g)},e.browser={},e.browser.isIE=function(){return!a.support.leadingWhitespace},e.init()},a.ThreeSixty.defaultOptions={dragging:!1,ready:!1,pointerStartPosX:0,pointerEndPosX:0,pointerDistance:0,monitorStartTime:0,monitorInt:10,ticker:0,speedMultiplier:7,totalFrames:180,currentFrame:0,endFrame:0,loadedImages:0,framerate:60,domains:null,domain:"",parallel:!1,queueAmount:8,idle:0,filePrefix:"",ext:"png",height:300,width:300,styles:{},navigation:!1,autoplay:!1,autoplayDirection:1,disableSpin:!1,disableWrap:!1,responsive:!1,zeroPadding:!1,zeroBased:!1,plugins:[],showCursor:!1},a.fn.ThreeSixty=function(b){return Object.create(new a.ThreeSixty(this,b))}}(jQuery),"function"!=typeof Object.create&&(Object.create=function(a){"use strict";function b(){}return b.prototype=a,new b});


--------------------------------------------------------------------------------
/images/360.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/images/360.png


--------------------------------------------------------------------------------
/images/browser_logos-64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/images/browser_logos-64.png


--------------------------------------------------------------------------------
/images/fs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vml-webdev/threesixty-slider/07a45c899afe12ccf1b1dbbbd53e5711f5cb2c41/images/fs.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "threesixty-slider",
 3 |   "description": "360 degree Image Slider",
 4 |   "version": "1.0.6-vml",
 5 |   "repository" : {
 6 |       "type" : "git",
 7 |       "url" : "http://github.com/vml-webdev/threesixty-slider.git"
 8 |   },
 9 |   "ignore": [
10 |     ".jshintrc",
11 |     ".editorconfig",
12 |     ".bowerrc"
13 |   ],
14 |   "dependencies": {},
15 |   "devDependencies": {
16 |     "grunt": "~0.4.1",
17 |     "grunt-contrib-uglify": "~0.2.2",
18 |     "grunt-contrib-connect": "~0.3.0",
19 |     "grunt-contrib-less": "~0.6.4",
20 |     "grunt-contrib-watch": "~0.4.4",
21 |     "grunt-contrib-jshint": "~0.6.2",
22 |     "time-grunt": "~0.1.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/plugins/threesixty.fullscreen.js:
--------------------------------------------------------------------------------
  1 | /*global $, window, CanvasLoader, jQuery, alert, requestAnimationFrame, cancelAnimationFrame */
  2 | /*jslint browser:true, devel:true */
  3 | 
  4 | /*!
  5 |  * 360 degree Image Slider Fullscreen plugin v1.0.0
  6 |  * http://gaurav.jassal.me/lab
  7 |  *
  8 |  * Copyright 2013, gaurav@jassal.me
  9 |  * Dual licensed under the MIT or GPL Version 3 licenses.
 10 |  *
 11 |  */
 12 | 
 13 | 
 14 | (function($) {
 15 |   'use strict';
 16 |   $.ThreeSixtyFullscreen = function(el, options) {
 17 |     var plugin = this,
 18 |       $el = el,
 19 |       opts = options,
 20 |       $button = $('<a href=\'#\'>Fullscreen</a>'),
 21 |       isFullscreen = false,
 22 |       pfx = ['webkit', 'moz', 'ms', 'o', ''];
 23 | 
 24 |     // Attach event to the plugin
 25 |     $button.bind('click', function(event) {
 26 |       plugin.onClickHandler.apply(this, event);
 27 |     });
 28 | 
 29 |     /**
 30 |      * Set styles for the plugin interface.
 31 |      * @return {Object} this
 32 |      */
 33 |     plugin.setStyles = function() {
 34 |       $button.css({
 35 |         'z-index': 12,
 36 |         'display': 'block',
 37 |         'position': 'absolute',
 38 |         'background': 'url(img/fs.png) no-repeat',
 39 |         'width': '20px',
 40 |         'height': '20px',
 41 |         'text-indent': '-99999px',
 42 |         'right': '5px',
 43 |         'bottom': '5px',
 44 |         'background-position': '0px -20px'
 45 |       });
 46 |       return this;
 47 |     };
 48 | 
 49 |     plugin.RunPrefixMethod = function(obj, method) {
 50 |       var p = 0,
 51 |         m, t;
 52 |       while (p < pfx.length && !obj[m]) {
 53 |         m = method;
 54 |         if (pfx[p] === '') {
 55 |           m = m.substr(0, 1).toLowerCase() + m.substr(1);
 56 |         }
 57 |         m = pfx[p] + m;
 58 |         t = typeof obj[m];
 59 |         if (t !== 'undefined') {
 60 |           pfx = [pfx[p]];
 61 |           return (t === 'function' ? obj[m]() : obj[m]);
 62 |         }
 63 |         p++;
 64 |       }
 65 |     };
 66 |     /**
 67 |      * Initilize the fullscreen plugin
 68 |      * @param  {Object} opt override options
 69 |      */
 70 |     plugin.init = function() {
 71 |       plugin.setStyles();
 72 |       $el.prepend($button);
 73 |     };
 74 | 
 75 |     plugin.onClickHandler = function(e) {
 76 |       var elem;
 77 |       if (typeof $el.attr('id') !== 'undefined') {
 78 |         elem = document.getElementById($el.attr('id'));
 79 |       } else if (typeof $el.parent().attr('id') !== 'undefined') {
 80 |         elem = document.getElementById($el.parent().attr('id'));
 81 |       } else {
 82 |         return false;
 83 |       }
 84 | 
 85 |       plugin.toggleFullscreen(elem);
 86 |     };
 87 | 
 88 |     plugin.toggleButton = function() {
 89 |       if (isFullscreen) {
 90 |         $button.css({
 91 |           'background-position': '0px 0px'
 92 |         });
 93 |       } else {
 94 |         $button.css({
 95 |           'background-position': '0px -20px'
 96 |         });
 97 |       }
 98 |     };
 99 | 
100 |     plugin.toggleFullscreen = function(elem) {
101 |       if (plugin.RunPrefixMethod(document, 'FullScreen') || plugin.RunPrefixMethod(document, 'IsFullScreen')) {
102 |         plugin.RunPrefixMethod(document, 'CancelFullScreen');
103 |       }
104 |       else {
105 |         plugin.RunPrefixMethod(elem, 'RequestFullScreen');
106 |       }
107 |       plugin.toggleButton();
108 |     };
109 |     plugin.init();
110 |   };
111 | }(jQuery));


--------------------------------------------------------------------------------
/src/threesixty.js:
--------------------------------------------------------------------------------
  1 | /*global $, window, CanvasLoader, jQuery, alert, requestAnimationFrame, cancelAnimationFrame */
  2 | /*jslint browser:true, devel:true */
  3 | 
  4 | /*!
  5 |  * 360 degree Image Slider v1.0.6
  6 |  * http://gaurav.jassal.me/lab
  7 |  *
  8 |  * Copyright 2013, gaurav@jassal.me
  9 |  * Dual licensed under the MIT or GPL Version 3 licenses.
 10 |  *
 11 |  */
 12 | 
 13 | (function ($) {
 14 |   'use strict';
 15 |    /**
 16 |    * @class ThreeSixty
 17 |    * **The ThreeSixty slider class**.
 18 |    *
 19 |    * This as jQuery plugin to create 360 degree product image slider.
 20 |    * The plugin is full customizable with number of options provided. The plugin
 21 |    * have the power to display images in any angle 360 degrees. This feature can be
 22 |    * used successfully in many use cases e.g. on an e-commerce site to help customers
 23 |    * look products in detail, from any angle they desire.
 24 |    *
 25 |    * **Features**
 26 |    *
 27 |    * - Smooth Animation
 28 |    * - Plenty of option parameters for customization
 29 |    * - Api interaction
 30 |    * - Simple mouse interaction
 31 |    * - Custom behavior tweaking
 32 |    * - Support for touch devices
 33 |    * - Easy to integrate
 34 |    * - No flash
 35 |    *
 36 |    * Example code:
 37 |    *      var product1 = $('.product1').ThreeSixty({
 38 |    *        totalFrames: 72,
 39 |    *        endFrame: 72,
 40 |    *        currentFrame: 1,
 41 |    *        imgList: '.threesixty_images',
 42 |    *        progress: '.spinner',
 43 |    *        imagePath:'/assets/product1/',
 44 |    *        filePrefix: 'ipod-',
 45 |    *        ext: '.jpg',
 46 |    *        height: 265,
 47 |    *        width: 400,
 48 |    *        navigation: true
 49 |    *      });
 50 |    * **Note:** There are loads other options that you can override to customize
 51 |    * this plugin.
 52 | 
 53 |    * @extends jQuery
 54 |    * @singleton
 55 |    * @param {String} [el] jQuery selector string for the parent container
 56 |    * @param {Object} [options] An optional config object
 57 |    *
 58 |    * @return this
 59 |    */
 60 | 
 61 |   $.ThreeSixty = function (el, options) {
 62 |     // To avoid scope issues, use 'base' instead of 'this'
 63 |     // to reference this class from internal events and functions.
 64 |     var base = this, AppCongif, frames = [], VERSION = '1.0.2';
 65 | 
 66 |     // Access to jQuery and DOM versions of element
 67 |     /**
 68 |      * @property {$el}
 69 |      * jQuery Dom node attached to the slider inherits all jQuery public functions.
 70 |      */
 71 | 
 72 |     base.$el = $(el);
 73 |     base.el = el;
 74 | 
 75 |     // Add a reverse reference to the DOM object
 76 |     base.$el.data('ThreeSixty', base);
 77 | 
 78 |     /**
 79 |      * @method init
 80 |      * The function extends the user options with default settings for the
 81 |      * slider and initilize the slider.
 82 |      * **Style Override example**
 83 |      *
 84 |      *      var product1 = $('.product1').ThreeSixty({
 85 |      *        totalFrames: 72,
 86 |      *        endFrame: 72,
 87 |      *        currentFrame: 1,
 88 |      *        imgList: '.threesixty_images',
 89 |      *        progress: '.spinner',
 90 |      *        imagePath:'/assets/product1/',
 91 |      *        filePrefix: 'ipod-',
 92 |      *        ext: '.jpg',
 93 |      *        height: 265,
 94 |      *        width: 400,
 95 |      *        navigation: true,
 96 |      *        styles: {
 97 |      *          border: 2px solide #b4b4b4,
 98 |      *          background: url(http://example.com/images/loader.gif) no-repeat
 99 |      *        }
100 |      *      });
101 |      * @return this
102 |      */
103 |     base.init = function () {
104 |       AppCongif = $.extend({}, $.ThreeSixty.defaultOptions, options);
105 |       if (!AppCongif.parallel) {
106 |         base.loadImages();
107 |       }
108 |       if(AppCongif.disableSpin) {
109 | 				AppCongif.currentFrame = 1;
110 | 				AppCongif.endFrame = 1;
111 |       }
112 |       base.initProgress();
113 |     };
114 | 
115 |     /**
116 |      * @method initProgress
117 |      * @private
118 |      * This function setup the progress indicator styles.
119 |      * If you want to overreide the default styles of the progress indicator
120 |      * you need to pass the css styles in the styles property in plugin options.
121 |      *
122 |      */
123 |     base.initProgress = function() {
124 |       base.$el.css({
125 |         width: AppCongif.width + 'px',
126 |         height: AppCongif.height + 'px',
127 |         'background-image': 'none !important'
128 |       }).css(AppCongif.styles);
129 | 
130 |       if(AppCongif.responsive) {
131 |          base.$el.css({ width: '100%' });
132 |       }
133 |       base.$el.find(AppCongif.progress).css({
134 |         marginTop: ((AppCongif.height / 2) - 15) + 'px'
135 |       });
136 | 
137 |       base.$el.find(AppCongif.progress).fadeIn('slow');
138 | 
139 |       base.$el.find(AppCongif.imgList).hide();
140 |     };
141 | 
142 |     /**
143 |      * @method loadImages
144 |      * @private
145 |      * The function asynchronously loads images and inject into the slider.
146 |      */
147 |     base.loadImages = function() {
148 |       var li, imageName, image, host, baseIndex;
149 |       li = document.createElement('li');
150 |       baseIndex = AppCongif.zeroBased ? 0 : 1;
151 |       imageName = AppCongif.domain + AppCongif.imagePath + AppCongif.filePrefix + base.zeroPad((AppCongif.loadedImages + baseIndex)) + AppCongif.ext + ((base.browser.isIE()) ? '?' + new Date().getTime() : '');
152 |       image = $('<img>').attr('src', imageName).addClass('previous-image').appendTo(li);
153 | 
154 |       frames.push(image);
155 | 
156 |       base.$el.find(AppCongif.imgList).append(li);
157 | 
158 |       $(image).load(function () {
159 |         base.imageLoaded();
160 |       });
161 |     };
162 |     /**
163 |      * @method loadImages
164 |      * @private
165 |      * The function gets triggers once the image is loaded. We also update
166 |      * the progress percentage in this function.
167 |      */
168 |     base.imageLoaded = function () {
169 |       AppCongif.loadedImages += 1;
170 |       $(AppCongif.progress + ' span').text(Math.floor(AppCongif.loadedImages / AppCongif.totalFrames * 100) + '%');
171 |       if (AppCongif.loadedImages >= AppCongif.totalFrames) {
172 |         if(AppCongif.disableSpin) {
173 |           frames[0].removeClass('previous-image').addClass('current-image');
174 |         }
175 |         $(AppCongif.progress).fadeOut('slow', function () {
176 |           $(this).hide();
177 |           base.showImages();
178 |           base.showNavigation();
179 |         });
180 |       } else {
181 |         base.loadImages();
182 |       }
183 |     };
184 | 
185 |     /**
186 |      * @method loadImages
187 |      * @private
188 |      * This function is called when all the images are loaded.
189 |      * **The function does following operations**
190 |      * - Removes background image placeholder
191 |      * - Displays the 360 images
192 |      * - Initilizes mouse intraction events
193 |      */
194 |     base.showImages = function () {
195 |       base.$el.find('.txtC').fadeIn();
196 |       base.$el.find(AppCongif.imgList).fadeIn();
197 |       base.ready = true;
198 |       AppCongif.ready = true;
199 | 
200 |       base.initEvents();
201 |       base.refresh();
202 |       base.initPlugins();
203 |     };
204 | 
205 |     /**
206 |      * The function to initilize external plugin
207 |      */
208 |     base.initPlugins = function () {
209 |       $.each(AppCongif.plugins, function(i, plugin) {
210 |         if(typeof $[plugin] === 'function') {
211 |           $[plugin].call(base, base.$el, AppCongif);
212 |         } else {
213 |           throw new Error(plugin + ' not available.');
214 |         }
215 |       });
216 |     };
217 | 
218 |     /**
219 |      * @method showNavigation
220 |      * Creates a navigation panel if navigation is set to true in the
221 |      * settings.
222 |      */
223 |     base.showNavigation = function() {
224 |       if (AppCongif.navigation && !AppCongif.navigation_init) {
225 |         var nav_bar, next, previous, play_stop;
226 | 
227 |         nav_bar = $('<div/>').attr('class', 'nav_bar');
228 | 
229 |         next = $('<a/>').attr({
230 |           'href': '#',
231 |           'class': 'nav_bar_next'
232 |         }).html('next');
233 | 
234 |         previous = $('<a/>').attr({
235 |           'href': '#',
236 |           'class': 'nav_bar_previous'
237 |         }).html('previous');
238 | 
239 |         play_stop = $('<a/>').attr({
240 |           'href': '#',
241 |           'class': 'nav_bar_play'
242 |         }).html('play');
243 | 
244 |         nav_bar.append(previous);
245 |         nav_bar.append(play_stop);
246 |         nav_bar.append(next);
247 | 
248 |         base.$el.prepend(nav_bar);
249 | 
250 |         next.bind('mousedown touchstart', base.next);
251 |         previous.bind('mousedown touchstart', base.previous);
252 |         play_stop.bind('mousedown touchstart', base.play_stop);
253 |         AppCongif.navigation_init = true;
254 |       }
255 |     };
256 | 
257 |     /**
258 |      * @method play_stop
259 |      * @private
260 |      * Function toggles the autoplay rotation of 360 slider
261 |      * @param {Object} [event] jQuery events object.
262 |      *
263 |      */
264 | 
265 |     base.play_stop = function(event) {
266 |       event.preventDefault();
267 | 
268 |       if (!AppCongif.autoplay) {
269 |         AppCongif.autoplay = true;
270 |         AppCongif.play = setInterval(base.moveToNextFrame, 40);
271 |         $(event.currentTarget).removeClass('nav_bar_play').addClass('nav_bar_stop');
272 |       } else {
273 |         AppCongif.autoplay = false;
274 |         $(event.currentTarget).removeClass('nav_bar_stop').addClass('nav_bar_play');
275 |         clearInterval(AppCongif.play);
276 |         AppCongif.play = null;
277 |       }
278 |     };
279 | 
280 |     /**
281 |      * @method next
282 |      * Using this function you can rotate 360 to next 5 frames.
283 |      * @param {Object} [event] jQuery events object.
284 |      *
285 |      */
286 | 
287 |     base.next = function(event) {
288 |       if (event) { event.preventDefault(); }
289 |       AppCongif.endFrame -= 5;
290 |       base.refresh();
291 |     };
292 | 
293 |     /**
294 |      * @method previous
295 |      * Using this function you can rotate 360 to previous 5 frames.
296 |      * @param {Object} [event] jQuery events object.
297 |      *
298 |      */
299 |     base.previous = function(event) {
300 |       if (event) { event.preventDefault(); }
301 |       AppCongif.endFrame += 5;
302 |       base.refresh();
303 |     };
304 | 
305 |     /**
306 |      * @method play
307 |      * You are start the auto rotaion for the slider with this function.
308 |      *
309 |      */
310 |     base.play = function() {
311 |       if (!AppCongif.autoplay) {
312 |         AppCongif.autoplay = true;
313 |         AppCongif.play = setInterval(base.moveToNextFrame, 40);
314 |       }
315 |     };
316 | 
317 |     /**
318 |      * @method stop
319 |      * You can stop the auto rotation of the 360 slider with this function.
320 |      *
321 |      */
322 | 
323 |     base.stop = function() {
324 |       if (AppCongif.autoplay) {
325 |         AppCongif.autoplay = false;
326 |         clearInterval(AppCongif.play);
327 |         AppCongif.play = null;
328 |       }
329 |     };
330 | 
331 |     /**
332 |      * @method endFrame
333 |      * @private
334 |      * Function animates to previous frame
335 |      *
336 |      */
337 |     base.moveToNextFrame = function () {
338 |       if (AppCongif.autoplayDirection === 1) {
339 |         AppCongif.endFrame -= 1;
340 |       } else {
341 |         AppCongif.endFrame += 1;
342 |       }
343 |       base.refresh();
344 |     };
345 | 
346 |     /**
347 |      * @method gotoAndPlay
348 |      * @public
349 |      * Function animates to previous frame
350 |      *
351 |      */
352 |     base.gotoAndPlay = function (n) {
353 |       if( AppCongif.disableWrap ) {
354 |         AppCongif.endFrame = n;
355 |         base.refresh();
356 |       } else {
357 |         // Since we could be looped around grab the multiplier
358 |         var multiplier = Math.ceil(AppCongif.endFrame / AppCongif.totalFrames);
359 |         if(multiplier === 0) {
360 |           multiplier = 1;
361 |         }
362 | 
363 |         // Figure out the quickest path to the requested frame
364 |         var realEndFrame = (multiplier > 1) ?
365 |           AppCongif.endFrame - ((multiplier - 1) * AppCongif.totalFrames) :
366 |           AppCongif.endFrame;
367 | 
368 |         var currentFromEnd = AppCongif.totalFrames - realEndFrame;
369 | 
370 |         // Jump past end if it's faster
371 |         var newEndFrame = 0;
372 |         if(n - realEndFrame > 0) {
373 |           // Faster to move the difference ahead?
374 |           if(n - realEndFrame < realEndFrame + (AppCongif.totalFrames - n)) {
375 |             newEndFrame = AppCongif.endFrame + (n - realEndFrame);
376 |           } else {
377 |             newEndFrame = AppCongif.endFrame - (realEndFrame + (AppCongif.totalFrames - n));
378 |           }
379 |         } else {
380 |             // Faster to move the distance back?
381 |             if(realEndFrame - n < currentFromEnd + n) {
382 |               newEndFrame = AppCongif.endFrame - (realEndFrame - n);
383 |             } else {
384 |               newEndFrame = AppCongif.endFrame + (currentFromEnd + n);
385 |             }
386 |         }
387 | 
388 |         // Now set the end frame
389 |         if(realEndFrame !== n) {
390 |           AppCongif.endFrame = newEndFrame;
391 |           base.refresh();
392 |         }
393 |       }
394 |     };
395 | 
396 | 
397 |     /**
398 |      * @method initEvents
399 |      * @private
400 |      * Function initilizes all the mouse and touch events for 360 slider movement.
401 |      *
402 |      */
403 |     base.initEvents = function () {
404 |       base.$el.bind('mousedown touchstart touchmove touchend mousemove click', function (event) {
405 | 
406 |         event.preventDefault();
407 | 
408 |         if ((event.type === 'mousedown' && event.which === 1) || event.type === 'touchstart') {
409 |           AppCongif.pointerStartPosX = base.getPointerEvent(event).pageX;
410 |           AppCongif.dragging = true;
411 |         } else if (event.type === 'touchmove') {
412 |           base.trackPointer(event);
413 |         } else if (event.type === 'touchend') {
414 |           AppCongif.dragging = false;
415 |         }
416 |       });
417 | 
418 |       $(document).bind('mouseup', function (event) {
419 |         //event.preventDefault();
420 |         AppCongif.dragging = false;
421 |         $(this).css('cursor', 'none');
422 |       });
423 | 
424 |       $(document).bind('mousemove', function (event) {
425 |         if (AppCongif.dragging) {
426 |           event.preventDefault();
427 |           if(!base.browser.isIE && AppCongif.showCursor) {
428 |             base.$el.css('cursor', 'url(assets/images/hand_closed.png), auto');
429 |           }
430 |         } else {
431 |           if(!base.browser.isIE && AppCongif.showCursor) {
432 |             base.$el.css('cursor', 'url(assets/images/hand_open.png), auto');
433 |           }
434 |         }
435 |         base.trackPointer(event);
436 | 
437 |       });
438 |     };
439 | 
440 |     /**
441 |      * @method getPointerEvent
442 |      * @private
443 |      * Function returns touch pointer events
444 |      *
445 |      * @params {Object} [event]
446 |      */
447 |     base.getPointerEvent = function (event) {
448 |       return event.originalEvent.targetTouches ? event.originalEvent.targetTouches[0] : event;
449 |     };
450 | 
451 |     /**
452 |      * @method trackPointer
453 |      * @private
454 |      * Function calculates the distance between the start pointer and end pointer/
455 |      *
456 |      * @params {Object} [event]
457 |      */
458 |     base.trackPointer = function (event) {
459 |       if (AppCongif.ready && AppCongif.dragging) {
460 |         AppCongif.pointerEndPosX = base.getPointerEvent(event).pageX;
461 |         if (AppCongif.monitorStartTime < new Date().getTime() - AppCongif.monitorInt) {
462 |           AppCongif.pointerDistance = AppCongif.pointerEndPosX - AppCongif.pointerStartPosX;
463 |           AppCongif.endFrame = AppCongif.currentFrame + Math.ceil((AppCongif.totalFrames - 1) * AppCongif.speedMultiplier * (AppCongif.pointerDistance / base.$el.width()));
464 | 
465 |           if( AppCongif.disableWrap ) {
466 |             AppCongif.endFrame = Math.min(AppCongif.totalFrames - (AppCongif.zeroBased ? 1 : 0), AppCongif.endFrame);
467 |             AppCongif.endFrame = Math.max((AppCongif.zeroBased ? 0 : 1), AppCongif.endFrame);
468 |           }
469 |           base.refresh();
470 |           AppCongif.monitorStartTime = new Date().getTime();
471 |           AppCongif.pointerStartPosX = base.getPointerEvent(event).pageX;
472 |         }
473 |       }
474 |     };
475 | 
476 |     /**
477 |      * @method refresh
478 |      * @public
479 |      * Function refeshes the timer and set interval for render cycle.
480 |      *
481 |      */
482 | 
483 |     base.refresh = function () {
484 |       if (AppCongif.ticker === 0) {
485 |         AppCongif.ticker = setInterval(base.render, Math.round(1000 / AppCongif.framerate));
486 |       }
487 |     };
488 | 
489 |      /**
490 |      * @method refresh
491 |      * @private
492 |      * Function render the animation frames on the screen with easing effect.
493 |      */
494 | 
495 |     base.render = function () {
496 |       var frameEasing;
497 |       if (AppCongif.currentFrame !== AppCongif.endFrame) {
498 |         frameEasing = AppCongif.endFrame < AppCongif.currentFrame ? Math.floor((AppCongif.endFrame - AppCongif.currentFrame) * 0.1) : Math.ceil((AppCongif.endFrame - AppCongif.currentFrame) * 0.1);
499 |         base.hidePreviousFrame();
500 |         AppCongif.currentFrame += frameEasing;
501 |         base.showCurrentFrame();
502 |       } else {
503 |         window.clearInterval(AppCongif.ticker);
504 |         AppCongif.ticker = 0;
505 |       }
506 |     };
507 | 
508 |     /**
509 |      * @method hidePreviousFrame
510 |      * @private
511 |      * Function hide the previous frame in the animation loop.
512 |      */
513 | 
514 |     base.hidePreviousFrame = function () {
515 |       frames[base.getNormalizedCurrentFrame()].removeClass('current-image').addClass('previous-image');
516 |     };
517 | 
518 |     /**
519 |      * @method showCurrentFrame
520 |      * @private
521 |      * Function shows the current frame in the animation loop.
522 |      */
523 |     base.showCurrentFrame = function () {
524 |       frames[base.getNormalizedCurrentFrame()].removeClass('previous-image').addClass('current-image');
525 |     };
526 | 
527 |     /**
528 |      * @method getNormalizedCurrentFrame
529 |      * @private
530 |      * Function normalize and calculate the current frame once the user release the mouse and release touch event.
531 |      */
532 | 
533 |     base.getNormalizedCurrentFrame = function () {
534 |       var c, e;
535 | 
536 |       if ( !AppCongif.disableWrap ) {
537 |         c = Math.ceil(AppCongif.currentFrame % AppCongif.totalFrames);
538 |         if (c < 0) {
539 |           c += (AppCongif.totalFrames - 1);
540 |         }
541 |       } else {
542 |         c = Math.min(AppCongif.currentFrame, AppCongif.totalFrames - (AppCongif.zeroBased ? 1 : 0));
543 |         e = Math.min(AppCongif.endFrame, AppCongif.totalFrames - (AppCongif.zeroBased ? 1 : 0));
544 |         c = Math.max(c, (AppCongif.zeroBased ? 0 : 1));
545 |         e = Math.max(e, (AppCongif.zeroBased ? 0 : 1));
546 |         AppCongif.currentFrame = c;
547 |         AppCongif.endFrame = e;
548 |       }
549 | 
550 |       return c;
551 |     };
552 |     /**
553 |      * Function to return with zero padding.
554 |      */
555 |     base.zeroPad = function (num) {
556 |         function pad(number, length) {
557 |           var str = number.toString();
558 |           if(AppCongif.zeroPadding) {
559 |             while (str.length < length) {
560 |                 str = '0' + str;
561 |             }
562 |           }
563 |           return str;
564 |         }
565 | 
566 |         var approximateLog = Math.log(AppCongif.totalFrames) / Math.LN10;
567 |         var roundTo = 1e3;
568 |         var roundedLog = Math.round(approximateLog * roundTo) / roundTo;
569 |         var numChars = Math.floor(roundedLog) + 1;
570 |         return pad(num, numChars);
571 |     };
572 | 
573 |     base.browser = {};
574 | 
575 |     /**
576 |      * Function to detect if the brower is IE
577 |      * @return {boolean}
578 |      */
579 |     base.browser.isIE = function () {
580 |       return !$.support.leadingWhitespace;
581 |     };
582 | 
583 |     base.init();
584 |   };
585 | 
586 |   $.ThreeSixty.defaultOptions = {
587 |     /**
588 |      * @cfg {Boolean} dragging [dragging=false]
589 |      * @private
590 |      * Private propery contains a flags if users is in dragging mode.
591 |      */
592 |     dragging: false,
593 |     /**
594 |      * @cfg {Boolean} ready [ready=false]
595 |      * @private
596 |      * Private propery is set to true is all assets are loading and application is
597 |      * ready to render 360 slider.
598 |      */
599 |     ready: false,
600 |     /**
601 |      * @cfg {Number} pointerStartPosX
602 |      * @private
603 |      * private property mouse pointer start x position when user starts dragging slider.
604 |      */
605 |     pointerStartPosX: 0,
606 |     /**
607 |      * @cfg {Number} pointerEndPosX
608 |      * @private
609 |      * private property mouse pointer start x position when user end dragging slider.
610 |      */
611 |     pointerEndPosX: 0,
612 |     /**
613 |      * @cfg {Number} pointerDistance
614 |      * @private
615 |      * private property contains the distance between the pointerStartPosX and pointerEndPosX
616 |      */
617 |     pointerDistance: 0,
618 |     /**
619 |      * @cfg {Number} monitorStartTime
620 |      * @private
621 |      * private property contains time user took in dragging mouse from pointerStartPosX and pointerEndPosX
622 |      */
623 |     monitorStartTime: 0,
624 |     monitorInt: 10,
625 |     /**
626 |      * @cfg {Number} ticker
627 |      * @private
628 |      * Timer event that renders the 360
629 |      */
630 |     ticker: 0,
631 |     /**
632 |      * @cfg {Number} speedMultiplier
633 |      * This property controls the sensitivity for the 360 slider
634 |      */
635 |     speedMultiplier: 7,
636 |     /**
637 |      * @cfg {Number} totalFrames
638 |      * Set total number for frames used in the 360 rotation
639 |      */
640 |     totalFrames: 180,
641 |     /**
642 |      * @cfg {Number} currentFrame
643 |      * Current frame of the slider.
644 |      */
645 |     currentFrame: 0,
646 |     /**
647 |      * @cfg {Array} endFrame
648 |      * Private perperty contains information about the end frame when user slides the slider.
649 |      */
650 |     endFrame: 0,
651 |     /**
652 |      * @cfg {Number} loadedImages
653 |      * Private property contains count of loaded images.
654 |      */
655 |     loadedImages: 0,
656 |     /**
657 |      * @cfg {Array} framerate
658 |      * Set framerate for the slider animation
659 |      */
660 |     framerate: 60,
661 |     /**
662 |      * @cfg {String} domains
663 |      * Set comma seprated list of all parallel domain from where 360 assets needs to be loaded.
664 |      */
665 |     domains: null,
666 |     /**
667 |      * @cfg {String} domain
668 |      * Domain from where assets needs to be loaded. Use this propery is you want to load all assets from
669 |      * single domain.
670 |      */
671 |     domain: '',
672 |     /**
673 |      * @cfg {Boolean} parallel
674 |      * Set to true if you want to load assets from parallel domain. Default false
675 |      */
676 |     parallel: false,
677 |     /**
678 |      * @cfg {Number} queueAmount
679 |      * Set number of calls to be made on parallel domains.
680 |      */
681 |     queueAmount: 8,
682 |     /**
683 |      * @cfg {Number} idle
684 |      * Mouse Inactivite idle time in seconds. If set more than 0 will auto spine the slider
685 |      */
686 |     idle: 0,
687 |     /**
688 |      * @cfg {String} filePrefix
689 |      * Prefix for the image file name before the numeric value.
690 |      */
691 |     filePrefix: '',
692 |     /**
693 |      * @cfg {String} ext [ext=.png]
694 |      * Slider image extension.
695 |      */
696 |     ext: 'png',
697 |     /**
698 |      * @cfg {Object} height [300]
699 |      * Height of the slider
700 |      */
701 |     height: 300,
702 |     /**
703 |      * @cfg {Number} width [300]
704 |      * Width of the slider
705 |      */
706 |     width: 300,
707 | 
708 |     /**
709 |      * @cfg {Object} styles
710 |      * CSS Styles for the 360 slider
711 |      */
712 |     styles: {},
713 |     /**
714 |      * @cfg {Boolean} navigation[false]
715 |      * State if navigation controls are visible or not.
716 |      */
717 |     navigation: false,
718 |     /**
719 |      * @cfg {Boolean} autoplay[false]
720 |      * Autoplay the 360 animation
721 |      */
722 |     autoplay: false,
723 |     /**
724 |      * @cfg {number} autoplayDirection [1]
725 |      * Direction for autoplay the 360 animation. 1 for right spin, and -1 for left spin.
726 |      */
727 |     autoplayDirection: 1,
728 |     /**
729 |      * Property to disable auto spin
730 |      * @type {Boolean}
731 |      */
732 |     disableSpin: false,
733 |     /**
734 |      * Property to disable infinite wrap
735 |      * @type {Boolean}
736 |      */
737 |     disableWrap: false,
738 |     /**
739 |      * Responsive width
740 |      * @type {Boolean}
741 |      */
742 |     responsive: false,
743 |     /**
744 |      * Zero Padding for filenames
745 |      * @type {Boolean}
746 |      */
747 |     zeroPadding: false,
748 |     /**
749 |      * Zero based for image filenames starting at 0
750 |      * @type {Boolean}
751 |      */
752 |      zeroBased: false,
753 |     /**
754 |      * @type {Array}
755 |      * List of plugins
756 |      */
757 |     plugins: [],
758 |     /**
759 |      * @type {Boolean}
760 |      * Show hand cursor on drag
761 |      */
762 |     showCursor: false
763 | 
764 |   };
765 | 
766 | 
767 |   $.fn.ThreeSixty = function (options) {
768 |     return Object.create(new $.ThreeSixty(this, options));
769 |   };
770 | 
771 | }(jQuery));
772 | 
773 | /**
774 |  *
775 |  * Object.create method for perform as a fallback if method not available.
776 |  * The syntax just takes away the illusion that JavaScript uses Classical Inheritance.
777 |  */
778 | if (typeof Object.create !== 'function') {
779 |   Object.create = function (o) {
780 | 		'use strict';
781 |     function F() {}
782 |     F.prototype = o;
783 |     return new F();
784 |   };
785 | }
786 | 


--------------------------------------------------------------------------------
/styles/threesixty.css:
--------------------------------------------------------------------------------
 1 | #container .threesixty {
 2 |   position: relative;
 3 |   overflow: hidden;
 4 |   margin: 0 auto;
 5 | }
 6 | #container .threesixty .threesixty_images {
 7 |   display: none;
 8 |   list-style: none;
 9 |   margin: 0;
10 |   padding: 0;
11 | }
12 | #container .threesixty .threesixty_images img {
13 |   position: absolute;
14 |   top: 0;
15 |   width: 100%;
16 |   height: auto;
17 | }
18 | #container .threesixty .threesixty_images img.previous-image {
19 |   visibility: hidden;
20 |   width: 0;
21 | }
22 | #container .threesixty .threesixty_images img.current-image {
23 |   visibility: visible;
24 |   width: 100%;
25 | }
26 | #container .threesixty .spinner {
27 |   width: 60px;
28 |   display: block;
29 |   margin: 0 auto;
30 |   height: 30px;
31 |   background: #333;
32 |   background: rgba(0, 0, 0, 0.7);
33 |   -webkit-border-radius: 5px;
34 |   -moz-border-radius: 5px;
35 |   border-radius: 5px;
36 | }
37 | #container .threesixty .spinner span {
38 |   font-family: Arial, "MS Trebuchet", sans-serif;
39 |   font-size: 12px;
40 |   font-weight: bolder;
41 |   color: #FFF;
42 |   text-align: center;
43 |   line-height: 30px;
44 |   display: block;
45 | }
46 | #container .threesixty .nav_bar {
47 |   position: absolute;
48 |   top: 10px;
49 |   right: 10px;
50 |   z-index: 11;
51 | }
52 | #container .threesixty .nav_bar a {
53 |   display: block;
54 |   width: 32px;
55 |   height: 32px;
56 |   float: left;
57 |   background: url(/demo/img/sprites.png) no-repeat;
58 |   text-indent: -99999px;
59 | }
60 | #container .threesixty .nav_bar a.nav_bar_play {
61 |   background-position: 0 0;
62 | }
63 | #container .threesixty .nav_bar a.nav_bar_previous {
64 |   background-position: 0 -73px;
65 | }
66 | #container .threesixty .nav_bar a.nav_bar_stop {
67 |   background-position: 0 -37px;
68 | }
69 | #container .threesixty .nav_bar a.nav_bar_next {
70 |   background-position: 0 -104px;
71 | }
72 | /* html */
73 | #container:-webkit-full-screen {
74 |   background: #ffffff;
75 |   width: 100%;
76 |   height: 100%;
77 |   margin-top: 0;
78 |   padding-top: 200px;
79 | }
80 | #container:-moz-full-screen {
81 |   background: #ffffff;
82 |   width: 100%;
83 |   height: 100%;
84 |   margin-top: 0;
85 |   padding-top: 200px;
86 | }
87 | 


--------------------------------------------------------------------------------
/styles/threesixty.less:
--------------------------------------------------------------------------------
 1 | #container {
 2 |     .threesixty {
 3 |         position: relative;
 4 |         overflow: hidden;
 5 |         margin: 0 auto;
 6 |         .threesixty_images {
 7 |             display: none;
 8 |             list-style: none;
 9 |             margin: 0;
10 |             padding: 0;
11 |             img {
12 |                 position: absolute;
13 |                 top: 0;
14 |                 width: 100%;
15 |                 height: auto;
16 |             }
17 |             img.previous-image {
18 |                 visibility: hidden;
19 |                 width: 0;
20 |             }
21 |             img.current-image {
22 |                 visibility: visible;
23 |                 width: 100%;
24 |             }
25 |         }
26 |         .spinner {
27 |             width: 60px;
28 |             display: block;
29 |             margin: 0 auto;
30 |             height: 30px;
31 |             background: #333;
32 |             background: rgba(0, 0, 0, 0.7);
33 |             -webkit-border-radius: 5px;
34 |             -moz-border-radius: 5px;
35 |             border-radius: 5px;
36 |             span {
37 |                 font-family: Arial, "MS Trebuchet", sans-serif;
38 |                 font-size: 12px;
39 |                 font-weight: bolder;
40 |                 color: #FFF;
41 |                 text-align: center;
42 |                 line-height: 30px;
43 |                 display: block;
44 |             }
45 |         }
46 |         .nav_bar {
47 |             position: absolute;
48 |             top: 10px;
49 |             right: 10px;
50 |             z-index: 11;
51 |             a {
52 |                 display: block;
53 |                 width: 32px;
54 |                 height: 32px;
55 |                 float: left;
56 |                 background: url(/demo/img/sprites.png) no-repeat;
57 |                 text-indent: -99999px;
58 |             }
59 |             a.nav_bar_play {
60 |                 background-position: 0 0;
61 |             }
62 |             a.nav_bar_previous {
63 |                 background-position: 0 -73px;
64 |             }
65 |             a.nav_bar_stop {
66 |                 background-position: 0 -37px;
67 |             }
68 |             a.nav_bar_next {
69 |                 background-position: 0 -104px;
70 |             }
71 |         }
72 |     }
73 | }
74 | 
75 | /* html */
76 | #container:-webkit-full-screen {
77 |     background:#ffffff;
78 |     width: 100%;
79 |     height: 100%;
80 |     margin-top: 0;
81 |     padding-top: 200px;
82 | }
83 | 
84 | #container:-moz-full-screen {
85 |     background:#ffffff;
86 |     width: 100%;
87 |     height: 100%;
88 |     margin-top: 0;
89 |     padding-top: 200px;
90 | }


--------------------------------------------------------------------------------