代码拉取完成，页面将自动刷新
Docs • Demo • Code Sandbox • Video Tutorial • Why
A simple, interactive resource that can be used to provide a virtual tour of your product.
powered by Cloudimage (Watch the video here)
To see the Cloudimage 360 view plugin in action, please check out the Demo page.
Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.0.7/js-cloudimage-360-view.min.js"></script>
You may also use major version number instead of fixed version to have the latest version available.
<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script>
After adding the js-cloudimage-360-view lib, simply initialize it with class name "cloudimage-360", server folder path, file name and amount of images:
<div
class="cloudimage-360"
data-folder="https://scaleflex.cloudimg.io/crop/1920x700/n/https://scaleflex.airstore.io/demo/360-car/"
data-filename="iris-{index}.jpeg"
data-amount="36"
></div>
The selector for js-cloudimage-360-view lib.
Your images folder on server.
The filename pattern for your 360 image. Must include {index}, which the library will replace with a number between 1 and data-amount.
Amount of images to load for 360 view.
Support for 360 spin by pressing arrow keys on keyboard.
Autoplay 360 spin view on load.
Open 360 spin view in full screen modal.
Magnifier to zoom image.
Prevents page from jumping.
Autoplay 360 spin view on load.
Speed of changing frames for autoplay in milliseconds.
Speed Factor of changing frames on drag event.
Spin direction, by default it uses counterclockwise (image indexes from 1 to data-amount).
Apply box shadow for container.
Display 360 view line at the bottom of container.
Bottom offset for 360 view line.
Only 360 view images close to the client's viewport will be loaded, hence accelerating the page loading time. If set to true, an additional script must be included, see Lazy loading
Helper class to apply lazy-loading depending on library you choose, see Lazy loading
See how it works (article on Medium)
To use the Cloudimage Responsive plugin, you will need a Cloudimage token to deliver your images over CDN. Don't worry, it only takes seconds to get one by registering here. Once your token is created, you can configure it as described below. This token allows you to use 25GB of image cache and 25GB of worldwide CDN traffic per month for free.
Enables cloudimage responsive plugin for 360 view.
Applies default Cloudimage filters to your image, e.g. fcontrast, fpixelate, fgaussian, backtransparent,
rotation... Multiple filters can be applied, separated by "." (dot).
Lazy loading is not included into js-cloudimage-360-view by default. There are well thought libraries to achieve that. If you enable lazy loading in the configuration, you need to add an additional library like lazysizes, yall.js (Yet Another Lazy Loader), lozad.js to handle it.
Implementation example with lazysizes
Implementation example with yall.js
Implementation example with lozad.js
to save API calls you man want to use one of our cdn bundles:
CDN link to js-cloudimage-360-view 1.1.0 + lazysizes 4.1.7
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lazysizes.min.js"></script>
CDN link to js-cloudimage-360-view 1.1.0 + yall.js 3.1.1
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.yall.min.js"></script>
CDN link to js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lozad.min.js"></script>
Tested in all modern browsers and IE 11, 10, 9.
All contributions are super welcome!
JS Cloudimage 360 View is provided under the MIT License
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手