• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

creativeaura/threesixty-slider: jQuery 360 image slider plugin

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

creativeaura/threesixty-slider

开源软件地址:

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

开源编程语言:

JavaScript 87.6%

开源软件介绍:

Hello All, I am not maintaining this plugin anymore.

Three Sixty Image slider plugin

Three Sixty Image slider plugin v2.0.5

Bitdeli Badge Build Status Gitter

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

Features

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

Plugins

Installation

Git

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

Or install using bower

bower install threesixty-slider

Example 1

Javascript

window.onload = init;

var product;
function init(){

    product1 = $('.product1').ThreeSixty({
        totalFrames: 72, // Total no. of image you have for 360 slider
        endFrame: 72, // end frame for the auto spin animation
        currentFrame: 1, // This the start frame for auto spin
        imgList: '.threesixty_images', // selector for image list
        progress: '.spinner', // selector to show the loading progress
        imagePath:'assets/product1/', // path of the image assets
        filePrefix: 'ipod-', // file prefix if any
        ext: '.jpg', // extention for the assets
        height: 265,
        width: 400,
        navigation: true,
        disableSpin: true // Default false
    });

}

HTML Snippet

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

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

Documentation

Methods

Public methods to control the slider after initialization.

Method NameDescription
.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.

ConfigDefault valueTypeDescription
totalFrames180NumberSet total number for frames used in the 360 rotation
currentFrame1NumberSet the starting from of the auto spin on initilize
endFrame180NumberSet the frame where you want the auto spin to stop
framerate60NumberFramerate for the spin animation
filePrefix''Stringfile prefiex for the assets if you assets name is nike_boot_1.png then filePrefix will be nike_boot_
extpngStringFile extension for all the assets
height300NumberHeight you want to set for the three sixty container
width300NumberWidth you want to set for the three sixty container
style{}ObjectObject container styles for the preloader similar to jQuery.css({})
navigationtrueBooleanSet false if you don't want default navigation controls
autoplayDirection1NumberControl the direction of the spin depending on your assets. You can use 1 or -1
dragtrueBooleanSet false if you want to disable mouse and touch events on the slider.
disableSpinfalseBooleanWill disable the initial spin on load
zeroPaddingfalseBooleantrue will add 0 padding for file names 1 - 9
responsivefalseBooleanEnable responsive width for 360
onReadyfunction() {}FunctionCallback triggers once all images are loaded and ready to render on the screen
playSpeed100NumberValue to control the speed (in milliseconds) of play button rotation
zeroBasedfalseBooleanZero based for image filenames starting at 0

Demo

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.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
kossnocorp/jquery.turbolinks: 发布时间:2022-07-07
下一篇:
EasyUI - helps you build your web pages easily发布时间:2022-07-08
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap