Skip to content

Latest commit

 

History

History
291 lines (264 loc) · 9.21 KB

README.md

File metadata and controls

291 lines (264 loc) · 9.21 KB
Raw

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

Three Sixty Image slider plugin

Three Sixty Image slider plugin v2.5.2

Tested with BrowserStack Built with Grunt

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

Features

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

Installation

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

npm install -g grunt-cli

npm install

grunt build

grunt

Example 1

JavaScript

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

HTML Snippet

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

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

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

Documentation

Methods

Public methods to control the slider after initialization.

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

Configuration

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

Browsers Supported

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 or follow at @gauravjassal

LICENSE

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