360度全景插件JS Cloudimage 360

 查看演示  website  立即下载

发布时间：2019-06-16 22:18:17

JS Cloudimage 360 View 是一种简单的交互式资源,可用于提供产品的虚拟浏览。

使用方法

第 1 步:安装

在正文标记中的body内容之后,将带有 CDN 链接的脚本标记添加到 js-cloudimage-360-view lib

<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.0.7/js-cloudimage-360-view.min.js"></script>

您还可以使用主要版本号而不是固定版本来提供最新版本。

<script src=""https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js""></script>

第 2 步:初始化

添加js-cloudimage-360-view lib后，只需使用类名“cloudimage-360”，服务器文件夹路径，文件名和图像数量初始化它：

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

配置

class

类型: String | 值: "cloudimage-360" | 必填

js-cloudimage-360 视图库的选择器。

data-folder (or folder)

类型: String(url) | required

服务器上的图像文件夹。

data-filename (or filename)

类型: String | Default: image-{index}.jpg | optional

360图像的文件名模式。必须包含{index}，库将替换为1和数据量之间的数字

data-amount (or amount)

类型: Number | Default: 36 | optional

要为360度视图加载的图像数量。

data-keys (or keys)

类型: Bool | Default: false | optional

通过按键盘上的箭头键支持360度旋转。

data-autoplay (or autoplay)

类型: Bool | Default: false | optional

加载时自动播放360旋转视图。

data-full-screen (or full-screen)

类型: Bool | Default: false | optional

以全屏模式打开360旋转视图。

data-magnifier (or magnifier)

类型: Number | Default: none | optional

放大镜缩放图像。

data-ratio (or ratio)

类型: Number (height / width) | Default: none | optional

防止页面跳跃。

data-autoplay-reverse (or autoplay-reverse)

类型: Bool | Default: false | optional

加载时自动播放360旋转视图。

data-speed (or speed)

类型: Number | Default: 150 | optional

更改自动播放帧的速度（以毫秒为单位）。

data-drag-speed (or drag-speed)

类型: Number | Default: 150 | optional

在拖动事件上更改帧的速度因子。

data-spin-reverse (or spin-reverse)

类型: Bool | Default: false | optional

旋转方向，默认情况下它使用逆时针方向（图像索引从1到数据量）。

data-box-shadow (or box-shadow)

类型: String (e.g. data-box-shadow="inset 0 0 100px #222") | Default: none | optional

为容器应用框阴影。

data-bottom-circle (or bottom-circle)

类型: Bool | Default: false | optional

在容器底部显示360视图行。

data-bottom-circle-offset (or bottom-circle-offset)

类型: Number | Default: 5 | optional

360视图线的底部偏移。

data-lazyload (or lazyload)

类型: Bool | Default: false | optional

将仅加载靠近客户端视口的360度视图图像，从而加快页面加载时间。如果设置为true，则必须包含其他脚本，请参阅延迟加载

data-lazyload-selector (or lazyload-selector)

类型: String | Default: lazyload | optional

Helper类根据您选择的库应用延迟加载，请参阅延迟加载

延迟加载

默认情况下，延迟加载不包含在js-cloudimage-360-view中。 有很好的库可以实现这一目标。 如果在配置中启用延迟加载，则需要添加一个额外的库，如lazysizes，yall.js（Yet Another Lazy Loader），lozad.js来处理它。

要保存API调用，您需要使用我们的cdn包中的一个：

CDN链接到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链接到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链接到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>

PREVIOUS:
NEXT:
jQuery自定义分页插件
jQuery垂直轮播图切换