- The plugin is written in a "global" syntax, meaning that it depends on
this
references towindow
. Also it creates a global variableMagic360
usingvar Magic 360 = X
. That means, that it doesn't work in CommonJS (e.g. Webpack) or AMD (e.g. RequireJS) environments. In case of Webpack it's necessary to use the script loader that runs it in the global context. - The plugin doesn't allow a way to initialize new 360 viewers by JS. The only way it can work is by parsing elements with a class
Magic360
on DOM ready. This means that you can't e.g. provide settings by JS for a single instance. You need to provide all options globally for all instances. Also, this means that if you're using AJAX you can't use this plugin, as the plugin doesn't re-parse the DOM after a XMLHttpRequest was done. Also, this means that you need to pass an instance "id" on every method call, which brings an incredible overhead (you would also create an id attribute on every viewer HTML root element) - The API is incomplete. For example it offers a method to open the fullscreen, but no method to close it.
- The plugin prevents using custom controls by adding
!important
to almost ALL styles!!! This is such a bad practice that you need to replace classes by JS with custom icon classes. It also doesn't offer a way to set custom classes for custom icons with an API method. You can't event prevent the plugin from creating its icons by any API method or option. - There is no ready event for the fullscreen. If you need to patch the fullscreen close button with a custom icon, you can only add it with a timeout as it's not immediately available
- The fullscreen close button isn't visible in the latest Safari on macOS
Link: https://www.magictoolbox.com/magic360/integration/ Date: July 2017