@medvejonok79 wrote:
Hello Community,
all the bits seem to be there but I am not succeeding in working out how (especially where) to put them together.
My goal is to use an external component that is packaged in NPM (“kaleidoscopejs”) and that displays 360 spherical images
Because it is packaged in NPM it is possible to use ember-auto-import to use it. How this is done is not clear to me yet.
The example the package gives of how to use it in a webpage looks like this:
[refer in head to minified component script]
<body> <div id="container360"></div> <script type="text/javascript" charset="utf-8"> (function() { var viewer = new Kaleidoscope.Image({ source: 'http://thiago.me/image-360/Polie_Academy_53.JPG', containerId: '#container360', height: window.innerHeight, width: window.innerWidth, }); viewer.render(); window.onresize = function() { viewer.setSize({height: window.innerHeight, width: window.innerWidth}); }; })(); </script> </body>So… how does one in an ember App display such a viewer in a particular route’s page?
should "import { Kaleidoscope } from ‘kaleidoscopejs’ " go in the app.js? In the route.js? should viewer.render() be used to display the component? Should this be coded in the route’s handlebars template e.g. within a “script” section? In the route’s model function?? None of the combinations I have experimented with yet give the expected result.
Thanks in advance for any pointers!
Rj
Posts: 2
Participants: 1