{"_id":"@ashivliving/threesixty","_rev":"1-d05d2ae305b3bb39310e0654b759f8dd","name":"@ashivliving/threesixty","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@ashivliving/threesixty","version":"0.0.1","title":"ThreeSixty.js","description":"360 product image view library","author":{"name":"Ashiv Gupta"},"scripts":{"build":"webpack","test":"mocha --require test/setup.js test/**/*.test.js"},"main":"dist/threesixty.js","devDependencies":{"@babel/cli":"^7.7.x","@babel/core":"7.7.x","@babel/plugin-proposal-class-properties":"^7.7.x","@babel/preset-env":"7.7.x","babel-loader":"8.0.x","chai":"^4.2.0","jsdom":"^15.2.1","mocha":"^7.0.0","webpack":"4.41.x","webpack-cli":"3.3.x"},"keywords":["360","image","product","vanilla JS"],"repository":{"type":"git","url":"git+https://github.com/ashivliving/threesixty.git"},"homepage":"https://github.com/ashivliving/threesixty","license":"MIT","gitHead":"076bff7c5848519a65c895ed75532c050665033a","bugs":{"url":"https://github.com/ashivliving/threesixty/issues"},"_id":"@ashivliving/threesixty@0.0.1","_nodeVersion":"11.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-wINJII1n6L43GafWu3jGq6IfNbVa02BYySgp9XCiVcPeDOQ8dEqpZIIet91uROkMG3DcACp29Fxjw4AO8mVQLQ==","shasum":"1911b3181f1814d410cff8f1b881e0f856e5335c","tarball":"https://registry.npmjs.org/@ashivliving/threesixty/-/threesixty-0.0.1.tgz","fileCount":5,"unpackedSize":22299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhWGRCRA9TVsSAnZWagAAeJcP/0I0U76JqEmAuM8J2eFB\ntDLIlm5W1/MvPCbERhuC95ZJqUA7EYz1ijkYQBjxzdg04ehnRqQUtMParWKW\n/kt0WmJZxDSWqmHjuRG4+t4Q6+HrTJuOVac3h1PR70FlXB2WvJUWcabX/XCo\n2KcDU9M2XnfbreH/y4MHsWpCifWnZOj3RSeXGf0lwVJfBqs418hvs3KSBxdF\nCyyt4ISl4EY151daAx4yAcVfLPS2RxRjKDHjMC8Rn8FvMg6zrL2r2x2LsHVK\nSzduK5GGf1u92ahjoceI3OLzathOy7k2qQpEm0DVB2zlY2MV4vXvAelAm2Qs\nBPY+OM4w9mkEh27j6/4jIkbBx/Seqt6dxBSbDe3wDPWRxiogP0dbizET+v9R\nC61qcWJb1sH+WdFjgW9NNpgKAIHnsT4WBDewpiFd4qhbybq5VzKEASusNV+u\n2dZ1NT03sfeC5KbEuKcE+WCtX2UaN3x+nSD8lL2rO4o+Dq6ls3v2YL1i7Iqs\no1FqjNB5ubsMVqQFeHsva1Jn2JfzXzZxjdcjBCgMFe2iVXzr6CPmuyc5+cZ5\nqcCxTnrZ9tGqgYeKTrkarULjYRRAWhRbxzoMIRJMwY8U/3H73UeRzTKe0WF4\nsCp9WPk45rEyoqvzeA5xl2CZdi2hp5DCE/YGA3MY52c5H4QkU2OaPSdYy91w\ndvoN\r\n=WWRF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgtyf913p6nkiXiLtIBmd7b/mo5Md0/kZ7dgveG3gKUgIgH0eY1poCrV4WlMhApsLTbdjX8/7sexqlbeHedT4qFPU="}]},"maintainers":[{"name":"ashivliving","email":"ashivliving@gmail.com"}],"_npmUser":{"name":"ashivliving","email":"ashivliving@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/threesixty_0.0.1_1602576785233_0.9033856904459285"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-13T08:13:05.192Z","0.0.1":"2020-10-13T08:13:05.340Z","modified":"2022-04-04T15:45:41.833Z"},"maintainers":[{"name":"ashivliving","email":"ashivliving@gmail.com"}],"description":"360 product image view library","homepage":"https://github.com/ashivliving/threesixty","keywords":["360","image","product","vanilla JS"],"repository":{"type":"git","url":"git+https://github.com/ashivliving/threesixty.git"},"author":{"name":"Ashiv Gupta"},"bugs":{"url":"https://github.com/ashivliving/threesixty/issues"},"license":"MIT","readme":"\n### Install\nThreeSixty is available as NPM package\n```\nnpm i @mladenilic/threesixty.js\n```\n\nYou can also use it via a CDN\n```html\n\n```\n\n\n### Dependencies\nNo dependacies! Written in plain javascript.\n\n### Example\n\n```js\nconst threesixty = new ThreeSixty(document.getElementById('threesixty'), {\n image: 'images/example.jpg',\n count: 19,\n perRow: 4,\n prev: document.getElementById('prev'),\n next: document.getElementById('next')\n});\n\nthreesixty.play();\n```\n### Options\n\n```js\n{\n // Source image url\n image: 'images/example.jpg', // Also supports passing an array of images\n\n // Sprite options (If array of images are provided, these options are ignored)\n count: 30, // Total number of images. Default: 0\n perRow: 5, // Number of images per row. Default: 0\n\n // Width & Height\n width: 300, // Image width. Default 300\n height: 300, // Image height. Default 300\n\n // Navigation\n prev: document.getElementById('prev'), // Previous button element. Default: null\n next: document.getElementById('next'), // Next button element. Default: null\n keys: true, // Rotate image on arrow keys. Default: true\n draggable: true, // Rotate image by dragging. Default: true\n swipeable: true, // Rotate image by swiping on mobile screens. Default: true\n dragTolerance: 10, // Rotation speed when dragging. Default: 10\n swipeTolerance: 10, // Rotation speed when swiping. Default: 10\n swipeTarget: document.getElementById('wrapper'), // Element which will listen for drag/swipe events. Default: Image container\n\n // Rotation settings\n speed: 100, // Rotation speed during 'play' mode. Default: 10\n inverted: false // Inverts rotation direction,\n containerName: 'reactThreesixtyContainer' //Three sixty container name\n}\n```\n\n### Array of images\nAs an alternative to sprite image, ThreeSixty also supports using array of images:\n```js\nnew ThreeSixty(document.getElementById('threesixty'), {\n image: [\n 'images/example-1.jpeg',\n 'images/example-2.jpeg',\n 'images/example-3.jpeg',\n ...\n ],\n\n ...\n})\n```\nIn this case options `count` and `perRow` are ignored.\n\n### Methods\n\nSingle frame rotation:\n```js\nthreesixty.next(); \nthreesixty.prev(); \n```\n\nFocus *n-th* frame:\n```js\nthreesixty.goto(index);\n\nthreesixty.goto(0); // Reset position\nthreesixty.goto(1); // Focus 1st frame\nthreesixty.goto(-1); // Focus last frame\n```\n\nImage rotation:\n```js\n// Start rotation\nthreesixty.play();\n\n// Rotate in oposite direction\nthreesixty.play(true);\n\n// Stop rotation\nthreesixty.stop();\n\n// Play/Stop rotation\nthreesixty.toggle();\n```\n\nClean up registered events:\n```js\nthreesixty.destroy();\n```\n\n### Licence\n\nLicensed under the MIT license.\n","readmeFilename":"README.md"}