Displaying the same canvas at multiple locations

[Comus_Sola]

If I try to display a single canvas in multiple locations, for example in the header of all the pages on a site, I run into problems, because the js file created by Animate looks for the image files in a location relative to the page itself, resulting in 404 not found errors for all imported images.

Everything works fine except that any imported images are missing.

This must be a common problem, I'm hoping there is an easy answer, maybe an edit to the js generated by Animate, or a setting somewhere in Animate, to make it possible for the links to images in the library to be absolute rather than relative?

I have looked at the generated js, but I can't see what I need to do. I am a front-end designer rather than a developer or js expert. I have got round this in the past by putting the canvas in an iframe, but surely there is a better way?

[marjantrajkovski · Accepted solution]

Just open generated js and type in the find text box .jpg or .png or library properties and change path (src) of images.

lib.properties = {

  manifest: [

  {src:"image1.jpg", id:"image1"},

  {src:"image2.jpg", id:"image2"},

  {src:"image3.jpg", id:"image3"},

  {src:"image4.jpg", id:"image4"},

  {src:"image5.jpg", id:"image5"}

  ],

};

[Comus_Sola]

Yes, that seems to work fine. Thanks.

[ClayUUID]

Comus Sola wrote:

I have got round this in the past by putting the canvas in an iframe, but surely there is a better way?

What do you believe is wrong with using iframes?

[Comus_Sola]

Not sure, I just feel like using an iframe is kind of a quick fix, and while it would probably be fine in most cases there might be some situations where it would be better to know how to add canvas directly to the page. It seems like I would be adding an extra layer of complexity simply because I didn't have a good enough understanding of the Animate generated code.