https://github.com/rustamwin/threesixty-slider
https://github.com/rustamwin/threesixty-slider
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/rustamwin/threesixty-slider
- Owner: rustamwin
- Created: 2018-05-01T07:03:42.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T22:25:59.000Z (over 3 years ago)
- Last Synced: 2025-03-18T14:49:19.361Z (about 1 year ago)
- Language: JavaScript
- Size: 23.2 MB
- Stars: 9
- Watchers: 1
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Hi, have now taken on this plugin. It's had a major rewrite.
Three Sixty Image slider plugin v2.5.2
=================
[](https://gruntjs.com/)
This is a jQuery plugin to create 360 degree image sliders. The plugin is fully customizable with a number of options provided. The plugin has the ability to display images in any angle 360 degrees. This feature can be used successfully in many cases.
e.g. on an e-commerce site to help customers look at products in detail, from any angle they desire.
**Features**
- Smooth Animation
- Plenty of options
- Simple mouse interaction
- Support for touch devices
- Easy to integrate
- No flash
- Fullscreen now included as an option with the addition of [screenfull.js](https://sindresorhus.com/screenfull.js)
Installation
---------------------
git clone https://github.com/etetlow/threesixty-slider.git
npm install -g grunt-cli
npm install
grunt build
grunt
Example 1
---------------------
### JavaScript ######
$(document).ready(function() {
var product1;
product1 = $('.product1').ThreeSixty({
totalFrames: 72, // total number of images you have for 360 slider
endFrame: 72, // end frame for the auto spin animation
currentFrame: 1, // the start frame for auto spin
imgList: '.threesixty_images', // selector for image list
progress: '.spinner', // selector to show the loading progress
imagePath:'assets/product1/', // path to the images
filePrefix: 'ipod-', // file prefix if any
ext: '.jpg', // extension for the assets
height: 265, // height of images
width: 400, // width of images
navigation: true, // default navigation controls
position: 'bottom-center', // position of controls
disableSpin: false, // if you want to disable the auto spin
responsive: true, // full aspect ratio responsiveness
fullscreen: true, // fullscreen capabilities
fSBackgroundColor: '#000', // fullscreen background color
autoplayDirection: 1, // direction of play
zeroPadding: true // if your images are padded to the same number of characters by 0
});
});
### HTML Snippet ######
0%
Here we are initializing an image slider for product 1. The ThreeSixty class constructor requires a config object with properties like totalFrame, endFrame and currentFrame
NB: The image slider will now resize on load in reference to its parent element, so no matter what space is available, the image slider will accomodate as much as it can with its aspect ratio intact
Documentation
---------------------
### Methods #####
Public methods to control the slider after initialization.
Method Name
Description
.play()
Function to trigger the auto rotation of the slider
.stop()
Function to stop the auto play
.next()
Function to move the slider to next frame
.previous()
Function to move the slider to previous frame
.gotoAndPlay()
Use this function if you want the slider spin to a particular frame with animation.
.fullscreen()
Function to enter and exit fullscreen mode.
### Configuration #####
#
Config
Default value
Type
Description
1
totalFrames
180
Integer
Set total number of frames used in the 360 rotation
2
currentFrame
1
Integer
Set the starting point of the auto spin on initilise
3
endFrame
180
Integer
Set the frame where you want the auto spin to stop
4
framerate
60
Integer
Framerate for the spin animation
6
filePrefix
''
String
File prefix for your images. If your file's name is foo-bar-001.png then filePrefix will be foo-bar-
7
ext
png
String
File extension of your images
8
height
300
Integer
Height of your images
9
width
300
Integer
Width of your images
10
style
{}
Object
Object container styles for the preloader similar to jQuery.css({})
11
navigation
true
Boolean
Set false if you don't want default navigation controls
12
position
top-right
String
Sets the position of the navigation bar within the slider.
Choice of 'top-left', 'top-center,' 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'
13
autoplayDirection
1
Integer
Control the direction of the spin dependent on your images. You can use 1 or -1
14
drag
true
Boolean
Set false if you want to disable mouse and touch events on the slider
15
disableSpin
false
Boolean
Will disable the initial spin on load
16
zeroPadding
false
Boolean
Set true if your numbering is 0 padded to the same character length
17
responsive
false
Boolean
Enables full aspect-ratio responsiveness
18
fullscreen
false
Boolean
Set true to add a fullscreen icon to the navigation bar when clicked will put your slider in fullscreen
19
fSBackgroundColor
white
String
Sets the fullscreen background color
20
onReady
function() {}
Function
Callback triggers once all images are loaded and ready to render on the screen
21
playSpeed
100
Integer
Value to control the speed (in milliseconds) of play button rotation
22
zeroBased
false
Boolean
Zero based for image filenames starting at 0
Browsers Supported
---------------------
This plugin is supported in all browsers including our beloved IE 6
Some of the added features will only work in more modern browsers
Support
---------------------
For support and question please contact at [gaurav@jassal.me](mailto:gaurav@jassal.me) or follow at [@gauravjassal](http://twitter.com/gauravjassal)
LICENSE
---------
Copyright 2013 Gaurav Jassal
Released under the MIT and GPL Licenses.