JavaScript中完整的360度产品图像旋转

2021年2月24日04:58:36 发表评论 23 次浏览

产品图像和视频是现场销售中极为重要的方面, 可能会对在线零售商的成功产生重大影响。而且, 在很大程度上, Web开发人员有责任向他们的客户提供帮助, 以在可能的情况下提供促进销售的图像和图像效果。

在这篇文章中, 我将向你介绍彼得·沃斯托尔(PetrVostřel)jQuery插件, 卷轴, 它使你可以仅使用CSS和JavaScript创建360度旋转图像。

摄影

无论使用哪种技术, 创建360度产品图像都需要一些摄影。对于本文, 我拍摄了36张金属水壶的照片。我没有花很多时间来设置镜头或确保我的水壶从不相对于相机移动。

在生产环境中, 产品图像应花费大量时间和精力, 因为它们最终将决定旋转效果的质量。

准备好36张图像后, 我需要创建一个大的(认为是怪物)合成图像。并记住合成中图像的顺序。在左上角开始组合合成图像。使它宽六列。从左侧的第二行开始, 继续直到完成合成。你可以为不同数量的图像和不同的复合组织重新配置Reel。

你还需要将系列的第一帧作为图像。我想重申摄影是真正难的部分。除非你使用批处理, 否则可能需要几个小时来准备一个具有真正功能的复合材料。

默认情况下, 命名复合图像时, 应在原始图像的名称后附加" -reel"。因此, 如果第一个图像是" product.jpg", 则合成图像应该是" product-reel.jpg"。两个图像应保存在同一文件夹中。

依存关系

为了充分利用Reel, 你将需要几个JavaScript文件, 包括jQuery 1.4.x, jQuery.DisableTextSelect, jQuery鼠标轮, 当然还有Reel。

我还创建了一个其他JavaScript文件, 以容纳启动Reel所需的单行代码。

$('#image360').reel({ frames: 36, saves: false, klass: 'spinner' });

这个jQuery风格的JavaScript代码段使用了Reel的三个选项:"框架", 告诉Reel合成图像中有多少帧; "保存", 允许用户复制和保存产品图片;和" klass", 将一个CSS类添加到图像, 以便我可以添加其他样式说明。 Reel将以" klass"规范以外的任何方式擦除应用于图像的大多数CSS描述。

卷轴加价

Reel在标记方面非常灵活, 这意味着你可以进行很多自定义。

<!doctype html>
<html lang="en">
<head>
<title>REEL DEMONSTRATION on Ecommerce Developer</title>
<link type="text/css" rel="stylesheet" href="style.css"></head>
<body>

<div id="wrapper">
<h1>Some Fancy Product</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit adipiscing risus. Vestibulum gravida blandit rutrum. Etiam faucibus posuere pulvinar. Vivamus condimentum semper mi, mollis molestie magna hendrerit id. Mauris velit arcu, fermentum in porta nec, suscipit in sapien. Integer vel adipiscing enim. Praesent et turpis erat, aliquet ornare augue. Pellentesque feugiat quam in nisi posuere nec viverra nulla venenatis. Aenean pulvinar metus rutrum urna rhoncus consectetur. Ut tortor magna, vestibulum quis ultricies et, dapibus. </p>

<div><img id='image360' src='img/bottle.jpg' width="600px" height="400px"/> </div>

<h4>Add to cart</h4>
<h5>Use Your Mouse for a 360-Degree View</h5>

</div><!--end wrapper-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 <script src="jquery.reel-min.js"></script>
 <script src="inc/jquery.disabletextselect-min.js"></script>
 <script src="inc/jquery.mousewheel-min.js"></script> 
<script src="js.js"></script>

</body>
</html>

接下来, 我添加了以下CSS。

body {background: #5B5A5C;}
#wrapper {width: 900px; height: 600px; margin: 50px auto; padding: 20px; background: #fff; border:#000 solid 1px;}
#wrapper h1 {text-transform: uppercase; font-family: GeoSlab703 XBd BT; font-size: 3em; color:#3E3D40;}
#wrapper h4 {position: relative; top: -80px; left: 660px; text-transform: uppercase; font-family: GeoSlab703 XBd BT; font-size: 1.5em; color:#3E3D40;}
#wrapper h5 {position: relative; top: -60px; left: 150px; text-transform: uppercase; font-family: GeoSlab703 XBd BT; font-size: .75em; color:#3E3D40;}
#wrapper p {width: 250px; float: right; margin-top: 0;}
.spinner {border:#3E3D40 solid 5px;}

一点故障排除

我遇到了两个与Reel一起使用时可能需要注意的问题。首先, 当我浮动图像元素时, 它停止工作。而且你确实需要非常小心合成图像, 因为甚至没有错误像素的空间。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: