Magic 360 JS Viewer - Uncaught TypeError: Cannot read property 'getAttribute' of undefined

Question

I try to use way #4 for ref. images: https://www.magictoolbox.com/magic360/integration/#images

SO here is my code:

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

Its just page from this player folder - i just added this line:

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

As result I see Large Image with loader and in console I have this error:

Uncaught TypeError: Cannot read property 'getAttribute' of undefined

did you manage to fix it? I also use dynamic URLs. Thanks!
– slownage
Commented Oct 27, 2016 at 1:29 — slownage, Commented Oct 27, 2016 at 1:29

Dan Roberts · Accepted Answer · 2016-01-26 04:04:37Z

1

Can you upload the page and share the URL? It would be easier to investigate the error than just the code.

Based on the code you've shared, you should change this:

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

to this:

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

Change the numbers in rows:1; columns:36; to however many images are in your sequence.

answered Jan 26, 2016 at 4:04

Dan Roberts

5177 silver badges14 bronze badges

No I want to put here url(s) to images - because all images located in aws (s3) and I return from server - array of presigned urls to images
– David
Commented Jan 27, 2016 at 1:13
What is the location of the images on S3? Please give the URL of at least 1 image.
– Dan Roberts
Commented Jan 28, 2016 at 2:54
I generate presigned url when i do request - and its dynamic - so magic cant do his logic( imeah just replace 01 - to 02) - this is problem
– David
Commented Jan 28, 2016 at 4:18
Why do you use a dynamic URL for the images? Is it to serve different size images for different screens?
– Dan Roberts
Commented Jan 29, 2016 at 12:49
If you want to serve different size images to different screens, or apply watermarks, or protect your images, then you may be better off using a solution like my.sirv.com/#/signup. It serves responsive spins with a Magic 360 experience, with HTTP request domain control and processing options like crop, watermark, text overlay, retina and color effects. Otherwise, the URL of your page would be extremely helpful in suggesting a Magic 360 solution to your question.
– Dan Roberts
Commented Jan 30, 2016 at 23:14

Add a comment |

slownage · Accepted Answer · 2016-10-27 13:21:35Z

The default columns are set to 36. However if you don't have 36 images then you will get the following error: Uncaught TypeError: Cannot read property 'getAttribute' of undefined.

You have to add columns: NUMBER_OF_IMAGES; in the data-options:

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

advisable is to use data-options instead of data-magic360-options — slownage, Commented Oct 27, 2016 at 13:22

Collectives™ on Stack Overflow

Magic 360 JS Viewer - Uncaught TypeError: Cannot read property 'getAttribute' of undefined

2 Answers 2

Not the answer you're looking for? Browse other questions tagged
javascript
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Not the answer you're looking for? Browse other questions tagged javascript or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
javascript
or ask your own question.