Coder Social home page Coder Social logo

threesixty-slider's Introduction

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.0

Built with Grunt

This is a jQuery plugin to create 360 degree image sliders. The plugin is full customizable with 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/Eugene/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 no. of image you have for 360 slider
    endFrame: 72, // end frame for the auto spin animation
    currentFrame: 1, // This the start frame for auto spin
    imgList: '.threesixty_images', // selector for image list
    progress: '.spinner', // selector to show the loading progress
    imagePath:'assets/product1/', // path of the image assets
    filePrefix: 'ipod-', // file prefix if any
    ext: '.jpg', // extention for the assets
    height: 265,
    width: 400,
    navigation: true,
    disableSpin: false,
    responsive: true,
    fullscreen: true,
    theme: 'dark'
});

});

HTML Snippet

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

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

Documentation

Methods

Public methods to control the slider after initialization.

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.
Config Here are the list of config value you can pass in while you initilize your 360 slider.
Config Default value Type Description
totalFrames 180 Number Set total number for frames used in the 360 rotation
currentFrame 1 Number Set the starting from of the auto spin on initilize
endFrame 180 Number Set the frame where you want the auto spin to stop
framerate 60 Number Framerate for the spin animation
filePrefix '' String file prefiex for the assets if you assets name is nike_boot_1.png then filePrefix will be nike_boot_
ext png String File extension for all the assets
width 300 Number Width you want to set for the three sixty container
height 300 Number Height you want to set for the three sixty container
style {} Object Object container styles for the preloader similar to jQuery.css({})
navigation true Boolean Set false if you don't want default navigation controls
theme dark String Set the navigation and fullscreen button to light or dark, depending on your images
fullscreen false Boolean Set to true if you want to go fullscreen
autoplayDirection 1 Number Control the direction of the spin depending on your assets. You can use 1 or -1
drag true Boolean Set false if you want to disable mouse and touch events on the slider.
disableSpin false Boolean Will disable the initial spin on load
zeroPadding false Boolean true will add 0 padding until the number of digits match
responsive false Boolean Enable a fully responsive 360
onReady function() {} Function Callback triggers once all images are loaded and ready to render on the screen
playSpeed 100 Number Value to control the speed (in milliseconds) of play button rotation
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

Support

For support and question please contact at [email protected] or follow at @gauravjassal

LICENSE

Copyright 2013 Gaurav Jassal

Released under the MIT and GPL Licenses.

threesixty-slider's People

Contributors

arthuryeti avatar bitdeli-chef avatar bitstorm avatar creativeaura avatar etetlow avatar gjassal-aimia avatar igloczek avatar olsonkr avatar rivol avatar simshanith avatar takeshionishi avatar waffle-iron avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.