Magic 360 JS Viewer - 未捕获类型错误:无法读取未定义的属性“getAttribute”
Magic 360 JS Viewer - Uncaught TypeError: Cannot read property 'getAttribute' of undefined
我尝试使用方式#4作为参考图像：https://www.magictoolbox.com/magic360/integration/#images
所以这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>API controls</title>
<style type="text/css">
.sep { margin-bottom: 10px; }
</style>
<link rel="stylesheet" type="text/css" href="magic360/magic360.css" />
<script type="text/javascript" src="magic360/magic360.js"></script>
<style type="text/css"><!--
body { background:#fff; margin:0; padding:0; font-size: 100%; }
body, td { font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; line-height: 1.5em; }
h1, h2, h3, h4 { font-weight:normal; color:#555; }
h1 { font-size:1.5em; }
h2 { font-size:1.3em; }
h2.caption { margin: 2em 0 0;}
h3 { font-size:1.1em; }
h3.pad { margin: 2em 0 1em; }
h4 { font-size: 1em; }
a { outline: none; }
img { border: 0; }
p, li { font-size: 0.9em; }
p.pad { margin-top: 4em; }
input { width: 100%; }
acronym { border-bottom: 1px dotted #666; cursor: help; }
table { margin:0; padding:0; border-collapse: collapse; }
th { background:#CCC; text-align: left; padding: 2px 4px; font-weight: normal; }
td { vertical-align: top; border: 1px; }
.leftcol { background:#EDF6CA; padding: 20px; height: 100%; }
.nav li, .keynote-list li { font-size: 1em; }
.nav { width: 180px; }
.nav h2 { background: #658F11; margin: 10px 0 0 0; padding: 3px 3px 5px 10px; font-size: 0.9em; color: #fff; }
.nav ul { list-style-type: none; padding: 0 0 10px 0; margin: 0 0 20px; background: #99CC33; }
.nav li a {
display: block;
text-decoration: none;
padding: 5px 3px 5px 10px;
margin: 0;
font-size: 0.9em;
color: #fff;
line-height: normal;
zoom: 1;
}
.nav li a:hover { background: #B5DF61; }
.active { font-weight: bold; }
.arrow { text-align: right; }
.menuTd a { color: #fff; font-weight: bold; }
.code { font-size: 12px; line-height: 18px; margin: 10px 0; display: block; padding: 3px; border: 1px solid #aaa; }
.comment { color: #999; }
.clear { clear: both; }
.fleft { float: left; }
.fright { float: right; }
.r-margin-100 { margin-right: 100px; }
span.r { color:red; }
span.g { color:green; }
span.b { color:blue; }
div.exmpl { margin: 0 0 5px 0; font-weight: bold; }
caption {
text-align: left;
padding: 4px 12px;
background: #999;
color: #fff;
font-size: 1.1em;
margin: 0 0 0 -1px;
}
caption a { color: #fff; padding: 2px; }
caption a:hover { background: #fff; color: #999; }
table.params { background: #aaa; margin-bottom: 20px; font-size: 0.9em; border: 1px solid #999; }
.params th, .params td { background: #fff; padding: 4px 8px 4px 16px; }
.params td { vertical-align: top; text-alilgn: left; border-bottom: 1px #f0f0f0 solid; }
.params .sline, .params .sline td { background: #eee; }
.params td.name { font-weight: bold; white-space: nowrap; }
.params td .new { color: red; font-weight: bold; }
.params .last td { border-bottom: 0; }
.params th.caption { background: #c0c0c0; padding: 6px 10px; font-weight: normal; font-size: 125%; }
.params .header th { border-bottom: 1px solid #ccc; }
table.tbl { background: #aaa; margin-bottom: 20px; font-size: 0.9em; border: 1px solid #999; }
.tbl th { background: #c0c0c0; padding: 4px 8px 4px 16px; }
.tbl td { background: #fff; padding: 4px 8px 4px 16px; vertical-align: top; border-bottom: 1px #999 solid; }
.tbl .tr1 td { background: #fff; }
.tbl .tr2 td { background: #f2f2f2; }
.tbl tr.odd td { background: #f3f3f3; }
.mtbl { width: 100%; height: 100%; }
.rTd { padding: 20px; width: 100%;}
.html4strict {
border: 1px solid #AAAAAA;
display: block;
font-size: 12px;
line-height: 18px;
margin: 10px 0pt;
padding: 3px;
}
.html4strict .de1, .html4strict .de2 {
font: normal normal 1em/1.2em monospace;
margin: 0;
padding: 0;
background: none;
vertical-align: top;
}
.html4strict { font-family:monospace; }
.html4strict .imp { font-weight: bold; color: red; }
.html4strict li, .html4strict .li1 { font-weight: normal; vertical-align: top; }
.html4strict .ln { width: 1px; text-align: right; margin: 0; padding: 0 2px; vertical-align: top; }
.html4strict .li2 { font-weight: bold; vertical-align: top; }
.html4strict .kw2 { color: #000000; font-weight: bold; }
.html4strict .kw3 { color: #000066; }
.html4strict .es0 { color: #000099; font-weight: bold; }
.html4strict .br0 { color: #66cc66; }
.html4strict .sy0 { color: #66cc66; }
.html4strict .st0 { color: #ff0000; }
.html4strict .nu0 { color: #cc66cc;}
.html4strict .sc-1 { color: #808080; font-style: italic; }
.html4strict .sc0 { color: #00bbdd; }
.html4strict .sc1 { color: #ddbb00; }
.html4strict .sc2 { color: #009900; }
.html4strict .ln-xtra, .html4strict li.ln-xtra, .html4strict div.ln-xtra { background-color: #ffc; }
.html4strict span.xtra { display: block; }
p.buttons { float: right; margin: -40px 0px 10px 0; }
p.buttons a {
background: #FA9C0F;
padding: 4px 10px 4px 12px;
margin-right: 6px;
font-size: 1em;
color: #fff;
text-decoration: none;
line-height: 1em;
outline: none;
border: 1px solid #CF7E00;
}
p.buttons a:hover { background: #FFBA4F; }
div.source {
font-size: 1em;
margin: 0.5em 0 1em 0;
padding: 0 10px 0 20px;
border: 1px solid #c3c38a;
background: #ffffb2;
}
div.source.tiny { width: 500px; }
div.source p { border-color: #e1e19e; word-wrap: break-word; }
div.apply-btn { text-align: center; }
div.apply-btn button { font-size: 1.4em; }
ul.carts { list-style: none; margin: 0; padding:0; }
ul.carts li { display: block; margin: 0 10px 0 0; float: left; }
ul.carts li a { display: block; border: 2px solid #FFFFFF; line-height: 0; font-size: 0; }
ul.carts li a:hover { border: 2px solid #93be1c; }
ul.carts li a span {
border: 4px solid #FFFFFF;
border-right-width: 6px;
border-left-width: 6px;
display: block;
width: 80px;
height: 20px;
text-indent: -5000px;
background-image: url(images/platforms.jpg);
line-height: 0;
font-size: 0;
}
.we span { background-position:0 -617px; }
.eb span { background-position:0 -597px; }
.vm span { background-position:0 -20px; }
.vm1 span { background-position:0 -1077px; }
.vm2 span { background-position:0 -1097px; }
.xt span { background-position:0 -40px; }
.oc span { background-position:0 -60px; }
.xc span { background-position:0 -80px; }
.xn span { background-position:0 -1217px; }
.wp span { background-position:0 -100px; }
.gl span { background-position:0 -120px; }
.dp span { background-position:0 -140px; }
.zc span { background-position:0 -160px; }
.ma span { background-position:0 -180px; }
.ns span { background-position:0 -200px; }
.cc span { background-position:0 -220px; }
.cl span { background-position:0 -240px; }
.wy span { background-position:0 -260px; }
.cs span { background-position:0 -280px; }
.et span { background-position:0 -300px; }
.ox span { background-position:0 -320px; }
.om span { background-position:0 -340px; }
.ps span { background-position:0 -360px; }
.rs span { background-position:0 -997px; }
.ek span { background-position:0 -1137px; }
.cs2 span { background-position:0 -1157px; }
.cs3 span { background-position:0 -1177px; }
.asp span { background-position:0 -897px; }
.blv span { background-position:0 -917px; }
.ltc span { background-position:0 -937px; }
.mmr span { background-position:0 -957px; }
.sf span { background-position:0 -977px; }
.js span { background-position:0 -1117px; }
.wc span { background-position:0 -1197px; }
.op span { background-position:0 -637px; }
.vt span { background-position:0 -657px; }
.dp5 span { background-position:0 -677px; }
.dp6 span { background-position:0 -697px; }
.dp7 span { background-position:0 -717px; }
.jm1 span { background-position:0 -737px; }
.jm15 span { background-position:0 -757px; }
.jm16 span { background-position:0 -817px; }
.jm17 span { background-position:0 -1022px; }
.oc2 span { background-position:0 -777px; }
.oc3 span { background-position:0 -797px; }
.gl2 span { background-position:0 -857px; }
.gl3 span { background-position:0 -877px; }
.av span { background-position:0 -837px; }
.cc34 span { background-position:0 -1037px; }
.cc5 span { background-position:0 -1057px; }
.hs span { background-position:0 -1237px; }
--></style>
</head>
<body>
<table class="mtbl">
<tr>
<td class="rTd">
<h1>API controls</h1>
<p class="buttons"><a href="http://www.magictoolbox.com/buy/magic360/">Buy now</a> <a href="http://www.magictoolbox.com/support/">Get support</a></p>
<p>You can start and stop Magic 360, spin and magnify image by using the API.</p>
<!-- <a id="spin-1" class="Magic360" href="images/bag/bag-800-01-01.jpg" data-magic360-options="rows: 4; columns:12; autospin: off;"><img src="images/bag/bag-400-01-01.jpg" alt="" /></a>
-->
<a href="#" class="Magic360" data-magic360-options="images: images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg; large-images: images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg;"><img src="images/bag/bag-800-01-01.jpg"/></a>
</td>
</tr></table></body></html>
它只是来自这个播放器文件夹的页面 - 我刚刚添加了这一行：
<a href="#" class="Magic360" data-magic360-options="images: images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg; large-images: images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg;"><img src="images/bag/bag-800-01-01.jpg"/></a>
结果，我看到带有加载程序的大图像，并且在控制台中出现此错误：
未捕获的类型错误：无法读取未定义的属性"getAttribute"
您可以上传页面并共享网址吗？调查错误比调查代码更容易。
根据您共享的代码，您应该更改以下内容：
<a href="#" class="Magic360" data-magic360-options="images: images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg; large-images: images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg;"><img src="images/bag/bag-800-01-01.jpg"/></a>
对此：
<a href="#" class="Magic360" data-magic360-options="filename:images/bag/bag-800-{row}-{col}.jpg; rows:1; columns:36;"><img src="bag-01-01.jpg"/></a>
1;列：36;中的数字更改为序列中的图像数。
默认列设置为 36。但是，如果您没有36张图像，则会收到以下错误：Uncaught TypeError: Cannot read property 'getAttribute' of undefined。
您必须在data-options中添加columns: NUMBER_OF_IMAGES;：
<a href="#" class="Magic360" data-magic360-options="columns: 4; images: images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg; large-images: images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg images/bag/bag-800-01-01.jpg;"><img src="images/bag/bag-800-01-01.jpg"/></a>
相关文章：
- TypeError:无法读取属性'推'未定义的JavaScript
- 未捕获的TypeError无法读取未定义的属性socialsharing
- 未捕获的类型错误:无法读取属性'删除'的未定义
- AngularJS指令出错-无法读取属性'编译'的未定义
- 看到“;未捕获的类型错误:无法读取属性'weight'未定义的“;尽管按照字面上的指示
- angularjs无法读取未定义的属性then
- 无法读取属性'材料'未定义的Three.js
- 得到"TypeError:无法读取属性'filename'未定义的“;调用“npm start
- Soundcloud api"未捕获的类型错误:无法读取属性'uri'“未定义”;
- JavaScript承诺-无法读取属性'那么'的未定义
- 未捕获的类型错误:无法读取属性'中止'的未定义
- 角度推入数组给出:TypeError:无法读取属性'推'的未定义
- Javascript未捕获类型错误:无法读取属性'0'的未定义
- jQuery控制台错误:无法读取属性'top'的未定义
- TypeError:无法读取属性'findAll'的未定义
- 无法读取属性'errcap'未定义的jqgrid
- 无法读取未定义的属性“rid”
- 未捕获的类型错误: 无法读取未定义的属性“图像”
- 可以't读取'getHTML'未定义的Liferay CK Editor内容
- 在node.js中未定义读取属性错误
