产品画廊

云化产品库是一个交互用户界面,供网站或应用程序向用户显示产品产品图片库只需要纯JavaScript集成,易于在网络开发框架内使用,并消除开发内部交互式媒体画廊的需要,只有几行代码

关于可用参数、类型、ENUMS、事件和实例方法的细节见产品库参考.

快速示例

Cloudinary产品库部件使用网站,包括远程JavaScript文件并具体说明调用时的下列信息艺廊部件初始化部件法 :

• 云化产品环境云名.
• 上头内含上页元素
• 上头媒体资产弹出部件-在此例中 :
  • 所有图像贴上标签electric_car_product_gallery_demo
  • 所有视频贴上electric_car_product_gallery_demo
  • 360旋转集由所有贴上标签的图像组成electric_car_360_product_gallery_demo

上头造型方法调用显示初始化部件

代码探索者:产品库部件示例

试一下 JavaScript中样本配置变化产品画廊沙盒.

工作流

将云化产品库部件添加到网站

预设条件 :确保客户端资产列表启动.

1. 包含 JavaScript文件:https://product-gallery.www.aaaalireno.com/all.js.
2. 添加元件内含元素.
3. 初始化产品库部件并发cloudinary.galleryWidget(options)方法论
4. Render产品库构件并发mel()方法论
5. 可选性更新产品库部件并发更新(选项)方法论

预设条件:确保客户端资产列表启动

产品库需要访问客户端资产列表.默认情况下,此送送类型受限

允许控制台设置导航设置 > 安全 > 受限媒体类型并确信资源链表复选框安全

开工包含 JavaScript文件

产品图片库所有功能都包含https://product-gallery.www.aaaalireno.com/all.jsJavaScript文件文件优化后通过快速CDN交付

例举 :

二叉添加元件内含元素

将HTML元素放入页面确保元素有独有性标识符属性(如果多元素带指定的ID存在,第一个元素将用作部件容器)部件响应并取出元素所有可用宽度:必要时使用风格化属性约束宽度

例举 :

3级初始化产品库部件

JavaScript初始化方法公诸于众云化并授予访问权限cloudinary.galleryWidget(options)方法论方法创建产品图片库实例内存选项表示产品库参数地图应用

选项必须包括以下3项参数:

• 云化产品环境云化Name参数化
• 上头容器内页面元素部件
• 上头媒体集合参数所有媒体都标注为数组资产数组中的单个资产可用a描述资产类对象或公共标识字符串

完整参数列表可配置产品库部件,见参数表格中

初始化新部件 嵌入所有图象并贴上“时钟标签 ” :

可额外定义数选配置参数.举个例子,如果你高级计划用户私自CDN自定义分布式设置私有Cdn并安全性参数真实化并配置secureDistribution参数匹配设置并确保部件使用正确URL交付资产

看吧下方显示更多例子填充带资产的产品图片集部件

4级Render产品库构件

上头艺廊部件方法创建并初始化部件,但直到mel()返回实例方法调用

例举 :

5级可选性更新产品库部件

使用更新(选项)方法,如果你想更新已经建构部件,哪里选项产品库构件映射参数类应用程序

例举 :

产品图片库视频教程

教程遍历上文描述的阶梯

教程内容

浏览视频后继续读下段获取细节定制并增强产品库

显示资产

产品图片集部件可显示图片制作,视频播放,360旋转集并三维模型.使用媒体安全参数用所有媒体填充资产对象数组数组中的单个对象可用a描述资产类对象或公共标识字符串

所有资产均按上移顺序按字母顺序显示可添加排序方式参数如果想改变资产排序方式

举例说,用所有图像填充带shoe标签的部件:

视频播放

产品库部件播放视频媒体安全带参数资产类对象:指定标签识别所有视频使用同标签或指定公共标识并具体说明视频资产介质类型属性值为“视频”。

比方说,用所有视频填充配有T恤标签的部件:

360旋转集

360旋转集允许用户环绕中心轴旋转产品产品库部件为显示360旋转集取所有带标签图像并合并成单个实体,每个图像都列成360旋转集单框(按公有标识排序字母数)。

添加360旋转集媒体安全带参数资产类对象:指定标签识别360旋转集中所有图像使用并指定介质类型带值spin

举例说,用单360旋转集填充部件演示文集产品环境时钟360标签 :

全景360图像自旋集

旋转集有趣的用例是显示360全景图像,用户也可以旋转这些图像,使用户看到360视图时转置效果产品图片库显示360旋转集和原创景观图像更多细节和简单脚本制作全景图像旋转集见博客文章如何将360全景图像转换成360自旋集.

三维模型

三维模型是用户从多角度与产品交互并在线浏览的最佳方法之一产品库部件支持3D模型,这些模型已被拉链并上传到云形系统(见上传三维模型获取更多信息)

添加三维模型媒体安全带参数资产类对象:指定公共标识单模型或标签识别多模型)并指定介质类型值三维

并控制影由三维模型投影,并控制添加按钮允许用户透视模型增强现实ar3dprops参数化

举个例子,用三维模型填充部件演示文集产品环境公开标识损重Helmet3D并允许用户用AR查看

显示模式

下视频简单展示产品图片库的不同显示方式

云产品库构件可配置以下参数显示程序对象 :

• 模式化:
  

  • 经典资产逐次显示主查看器
    
  • 扩展主查看器扩展,所有资产显示垂直列移动设备不支持部件常使用经典模式
    
    

  下参数显示程序对象仅在当模式化参数设置为“扩展 ” :

• 间距资产间距像素

• 列内列数同时显示(1列默认显示)。

• 顶套旋转木马和从页面顶部选用像素资产相抵(记录页面上的其他元素,像菜单)

• 底片套接旋转木马和页面底部所选资产相抵像素

配置部件显示扩展查看器中所有资产

响应性资产

云产品库部件自动调整大小以适应HTML组件可用宽度特征中包括自动响应式解决方案显示资产工作如下:

• 云型动态变换URL自动建在苍蝇上交付资产,根据可用宽度和分辨率缩放至最接近断点步数(默认百分位数)
• 窗口相应扩展后,新的高分辨率资产自动交付,同时使用断点步骤(默认百分位数)防止生成和交付过多资产
• 窗口缩放时使用客户端缩放,而不是提供新图像

要改变断点步数大小,可包括下列可选语法:

• 图像破点覆盖图像值和360旋转集资产
• 视频破点覆盖视频资产值(默认值:100)。

切分步数修改为每150像素图像和200像素视频

应用变换

默认时部件应用如下变换媒体资产显示部件 :

• 面向图像360旋转集

• 视频播放:

添加默认变换变换参数到资产类对象弹出时带媒体安全参数化

例举使用填充裁剪模式代之以默认程序板裁剪模式 :

如果要添加其他变换参数,请使用变换对象设置排成一行变换参数类.举个例子,添加贴上“shirt”标签的图片并加加叠cloudinary_icon_blue右上角图像

可同时覆盖变换参数和提供附加参数举个例子,添加贴上“shirt”并使用填充裁剪模式并加加cloudinary_icon_blue右上角图像

弹出部件示例

上头媒体安全参数用于填充部件参数接受数组值,每个数组都可用a描述资产类对象或公共标识字符串

下图示例值媒体安全参数 :

1. 所有图片贴上shirt

2. 所有视频资产贴上包

3. 所有图片贴上bag标签和所有视频贴上mugage

4. 视频资产PublicIDT恤
   

5. 360旋转集从所有静态图像上贴上 my-360-tag
   

6. 图像公用ID包应用卡通效果
   

7. 图像从视频资产中间框生成
   

8. 公共标识集360旋转集贴上360书贴上所有静态图片并录下公共标识集book-vid
   

自定义样式

产品图片库接口可广度定制性,无论你是否需要提高旋转木马缩略图尺寸,移动缩放查看器位置或实施自定义色化方案看产品库参考文档列表所有定制选项

旋转木马选项

旋转木马是部件组件的组件,用于表示资产量,显示主查看器中当前显示哪些资产,并循环处理资产有2样式定义旋转木马,可随身设置旋转木马Style参数 :

• 缩略图小缩图
• 指示器一连串小图标
• 无- 无旋转键组件显示:只有主浏览器导航按钮可供资产循环使用

两种样式高度可定制性,默认值可通过压倒缩略图props带新参数缩略图Props对象或压倒指标Props带新参数指数Props对象.

定义缩图样式显示 75x75图像, 设置图像间距4像素并颜色导航按钮绿化

生成产品图片库资产代码

自媒体库选择图像、视频和360旋转集并自动生成产品库代码,内含这些资产使用此选项时,产品库生成器UI开机显示产品库预览并预设样式和旋转选项并使用生成UI选项定制Gallery样式和旋转选项选择时预览和画廊代码自动更新

除能快速生成产品图片库代码并实验各种定制选项外,它也可以与产品或营销管理者合作,在实施前决定首选定制的实用工具

从媒体库生成产品库代码:

1. 应用代码中包括Product JavaScript文件 和元件装件元件元素,如产品库前几步描述工作流.外加验证以下选项设置控制台设置:
   • 确定资源链表复选框清除设置 > 安全 > 受限媒体类型.
     
   • 产品环境设置使用严格变换中加入您的域设置 > 安全 > 允许严格转介域.
2. 媒体库中选择拟包含在画廊中的资产
   
   • 如果所有所需资产不存储在同一文件夹中,你可先将所有资产都添加到相同文件夹中媒体库集合或执行高级搜索依据标签值或其他常用值),所有所需资产都持相同视图易选
   • 资产类型必须由您选择上传非取用或社交媒体资产)并必须公开(不受限制)。
   • 默认时,您选择的资产会按公有ID向上字母顺序添加到画廊中如果要控制资产顺序,必须做点补偿细节见控制生成产品库中资产顺序
   • 如果要把360套旋转套装放进产品图片库中,你必须做一些准备。细节见包括360个旋转集.
   • 当前,不支持通过UI向生成产品库添加3D模型你可以添加三维模型复制嵌入码后人工输入程序或网站代码中的容器元件

3. 资产工具栏中选择生成产品库.

   

   产品图片库生成器打开并显示预览并嵌入代码

4. 定制产品库选项适应需求后使用复制到剪切板按钮捕捉产品库嵌入码并粘贴脚本编程HTML标签应用码

   生成代码假设容器识别码为美术馆.按需调整

控制生成产品库中资产顺序

资产通过公有标识添加到产品图片库时,资产显示顺序以其在内指定的顺序为基础媒体安全对象.默认时,从媒体库选择资产并输入产品图片库生成器时,这些资产将添加到产品库生成器中媒体安全对象按字母排序公有标识指令产品库生成器添加资产媒体安全对象顺序中添加上下文元数据键调用定位面向每个资产值键对每个资产应该是数值值一号表示艺廊显示的第一个资产

包括360个旋转集

要将360旋转集嵌入产品库中,你必须定义独有标签和对应上下文元数据密钥以表示带此标签的资产应被产品库识别为介质类型:.

1. 对所有资产应用独有标签组成360自旋集从媒体库很容易实现这一点,选择所有资产,然后选择标签标签从资产工具栏选择向全部选定资产添加相同标签
2. 上下文元数据项应用到组成360旋转集的所有资产,并用键调用springset_tag和匹配单标签值的值从媒体库很容易实现这一点,选择所有资产,然后选择编辑上下文元数据从资产工具栏选项向全部选定资产添加相同的上下文键和值
3. 执行总则生成产品图片库资产代码.选择资产载入产品库时, 足以选择任何一号资产旋转集因为资产包括springset_tag上下文元数据密钥,指令产品库生成器包含所有资产并标为单片介质类型:资产化
   

响应式部件

产品库部件本身也响应用户视图端口(浏览器或移动设备)可用宽度默认产品库部件单片viewportBreakpoint设置宽度520像素,产生2视图模式如下:

• 宽度超过520像素:缩略式旋转木马位居主查看器左侧(默认主构件配置)。
• 宽达520像素缩略图风格旋转木马位于主查看器下方

可自定义端口切换产品库部件viewportBreakpoints参数化本参数接受数组断点程序对象,数组中每个对象定义部件配置设置主部件配置当部件宽度大于数组中最大给定断点时使用

产品库部件三种不同的查看模式如下:

• 600多像素:缩略图风格旋转木马位居主查看器左侧
• 最大600像素:缩略图风格旋转木马位居主查看器下
• 最大300像素:指针式旋转木马位居主查看器下方,总开通导航按钮

云化视频播放器

产品图片库还支持使用云化视频播放器播放视频,而不是使用默认HTML5视频播放器云视频播放器基于avaScript视频播放器并包多值定制和集成能力,现成货币化解析

产品库内云视频播放器设置播放器类型属性视频程序参数通向clusinary这是产品库全局设置并影响产品库内所有视频播放

使用云视频播放器播放所有视频资产

云化视频播放器配置选项

可配置并定制产品图片集部件云视频播放器视频播放器配置选项中视频程序参数化所有配置选项都添加到视频程序参数会影响产品库内播放的所有视频

举例说,只显示视频初始加载时的大中心播放按钮,包括大PlayButton参数集至nit

云化视频播放器源选项

单个配置产品库内显示的视频资产(源码)视频播放源选项内videoPlayerSource物色视频资产媒体安全参数化

例举配置自适应流播放dog视频选项hls以主格式破折号退步选项不支持HLS浏览器

云式视频播放器交互视频示例

下图实例使用交互式视频产品库云视频播放器特征使用媒体安全参数,视频配置2可点击交互区视频程序参数包括显示交互功能的主题和布局定义

图片库事件

可注册各种产品库部件事件,以便在应用程序或分析跟踪中引入定制行为使用上方法初始化部件注册例举注册初始化myGallery产品图片集部件鼠标报到器事件数 :

全表可用事件见事件处理产品库引用段

多缩放

高分辨率图像时,可启动多缩放步骤部件,允许用户查看图片中的精细细节。多声波功能仅可用于播客式缩放选项,您可设置0至5间缩放阶梯数,每步缩放取值级属性也可以限制步数,以免缩放超出原图像大小,并带步态imit布林属性

例举 :

整合谷歌标签管理器

google标签管理员网页整合后,可通知产品库部件更新Google标签管理员数据馆数组时事件处理输入触发分析学布林参数集真实性.例举 :

可达性

可访问导航

产品图片库使键盘无障碍化,面向仅使用键盘(无法使用鼠标)或视障并使用键盘和屏幕阅读器的用户产品库终端用户可按无障碍标准使用键盘动作

• 标签标签并移位+Tab向前向向向
• 输入视图资产或缩放
• Esc退出缩放
• 空间栏播放/暂停视频

云化推荐最易获取经验的最佳实践配置

• showProps:{mode:扩展以扩展模式显示焦点区域更显眼
• mProp:{类型:pop放大显示弹出盒
• ViotioProps:{controls:play}- 只显示播放/暂停视频控件

可访问文本

产品图片库为每个资产添加alt文本以加强SEO和启动屏幕阅读器alt文本可以通过accessibilityProps参数接收对象详解alt文本串源对每个资产使用产品图片库可配置取此字符串上下文元数据字段或资产结构化元数据字段内如果这两个选项均不配置, 画廊默认向单值文本添加字符串, 形式为“ gallery资产nm”。

上头AccessibilityProps对象包括下列属性:

• 介质Alt源码- 之一:
  • 上下文:使用上下文元字段对每项资产的价值,按给定密钥传递到'mediaaltid'属性
  • 元数据:使用结构化元数据字段对每项资产的价值外部i传递到'mediaaltid'属性
  • 汽车: (默认)使用画廊内资产顺序使用模板 :
• 介质alti或密钥上下文元数据配对或外部i结构化元数据字段

例举 :

代码探索者:产品库无障碍

查查这个代码沙盒展示产品库无障碍特征

产品画廊技巧和考量

• 产品图片集部件仅显示媒体资产上传交付类型上传.
• 记下任何特殊配置参数需要添加时初始化产品图片集部件,例如,如果你有私房sdn分布或名码.
• 产品图片集部件与严格变换特征因数变换需要在飞上生成可能的变通方法指向设置 > 安全 > 允许严格转介域插进控制台设置并添加您的域名到列表中 。
• 最优效果视资产显示而定,你可能想使用填充裁剪模式并设置正确侧比(特别是多列扩展时)。模式化)
• 考虑压倒默认重力参数使用汽车重力计算自动裁剪详解)
• 以遵守Google自定义策略修改:
  • 带视频自播放经典模式化视频默认会哑音声音参数输入视频程序对象.
  • 带视频自播放扩展模式化中所有视频默认有哑音声音参数输入视频程序对象.
• 变换带宽取舍:默认时产品库部件优化带宽省值,通过动态变换资产最小文件大小,同时向请求设备/浏览器提供最佳图像,代价是耗用大数变换如果要减少变换数并增加带宽使用成本,可:
  • 设置大值imageBreakpoints参数减少生成图像数
  • 设置产品库固定宽度容器内元素.
  • 覆盖值缺省变换或多位dpr,fack_format,质量问题减少变换数
  • 设置placeholderImage参数假参数判定是否加载并显示低质量隐蔽图象,同时等待高质量图象,而不是显示加载旋转器(这为人慢连接提供更好的用户经验)。