Loading Profile...
Using photozoom URL with seadragon-ajax openDzi() doesn't work for me
I followed the instructions on the seadragon-ajax/library/getting started page.
On that page, it says "After the Viewer has been instantiated, you can open a Deep Zoom Image by calling the openDzi() method with the URL of the image"
I used in the URL for one of my photozoom images.
(It seems this should be a .dzi file, but on photozoom, on the individual image page, the Deep Zoom Image File is an xml file)
So I used that xml file, but when I view my page, the error shows: "It looks like a security restriction stoped us from loading this deep zoom file"
Any advice on what i'm missing here...?? thanks a lot,
th
On that page, it says "After the Viewer has been instantiated, you can open a Deep Zoom Image by calling the openDzi() method with the URL of the image"
I used in the URL for one of my photozoom images.
(It seems this should be a .dzi file, but on photozoom, on the individual image page, the Deep Zoom Image File is an xml file)
So I used that xml file, but when I view my page, the error shows: "It looks like a security restriction stoped us from loading this deep zoom file"
Any advice on what i'm missing here...?? thanks a lot,
th
I’m feeling that this is very typical of instructions, they never give enough detail
1
person has this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
The best answers from the company
-
Hey tre,
No need to apologize! Sorry for being unclear. =)
The extra parameter is literally the contents of the XML. You can pull this content manually:
- Navigate to the XML file in your browser (e.g. http://seadragon.com/content/images/c... ).
- Right-click > View Source.
- Select everything and copy it to your clipboard.
- In your Javascript, type in a single quote ('), paste the XML, and type in another single quote.
By doing that, you're passing in the XML contents as a Javascript string. Here's what it might look like for the above example:
viewer = new Seadragon.Viewer("container");
viewer.openDzi("http://seadragon.com/content/images/carinanebula.dzi", '<?xml version="1.0" encoding="UTF-8"?><Image TileSize="254" Overlap="1" Format="jpg" xmlns="http://schemas.microsoft.com/deepzoom/2008"><Size Width="29566" Height="14321"/></Image>');
By doing this, Seadragon Ajax no longer needs to actually make a request to the XML file (which the browser will reject since it's from a different domain). You're effectively making a shortcut.
So that should do it!
As for Boyd's comment, yep, it's not completely applicable to you since you're interested in the full library rather than the embed, but he was just explaining that that's how our embed works too.
For example, if you use our embed builder with that above image, you'll get back this code snippet:
<script type="text/javascript" src="http://seadragon.com/ajax/embed.js"></script><script type="text/javascript">Seadragon.embed("400px", "300px", "http://seadragon.com/content/images/carinanebula.dzi", 29566, 14321, 254, 1, "jpg");</script>
Those parameters on the end are our shorthand for doing the same thing. They give all the information for us to essentially know what the XML is (e.g. Width="29566", TileSize="254", etc.), so we don't have to fetch it directly.
Hope this helps!
Aseem
The company and 1 other person say
this answers the question
-
Hey tre,
To get around the cross-site security restriction that Boyd mentions, we provide the ability for you to pass in the XML contents directly, so that Seadragon Ajax doesn't have to actually fetch the XML.
See the Seadragon.Viewer API reference, under the openDzi() method:
"Asynchronously opens the DZI from the XML file at the given URL. If the contents of the XML are also given as a string, the XML is not actually downloaded; otherwise, it is. (The location of the XML is needed in either case to determine the location of the tiles.) Exactly one "open", "error" or "ignore" event is guaranteed to fire upon completion. "
So where you previously had:
viewer.openDzi("http://photozoom.com/.../foo.xml");
Just add an extra parameter with the contents of the XML as a string:
viewer.openDzi("http://photozoom.com/.../foo.xml", "<?xml ... ?><image>...</image>");
That should work. Let us know if you have any trouble.
Aseem
P.S. For more reading, see this article we wrote.
The company says
this answers the question
-
Inappropriate?By default, web servers do not recognize the .dzi extension, so in order to avoid having to manually register the dzi extension or to accommodate others who use a hosted web server, the xml extension is used.
As for your problem, you are running into a cross-site scripting security issue, which you can read about here: http://en.wikipedia.org/wiki/Cross_si.... In order to work around this issue, we have a service that allows you to conveniently embed Seadragon Ajax into a page, which is located at http://livelabs.com/seadragon-ajax/em.... The embed viewer safely works around the cross-site security issue and still exposes the Seadragon Ajax API. -
Inappropriate?Hey tre,
To get around the cross-site security restriction that Boyd mentions, we provide the ability for you to pass in the XML contents directly, so that Seadragon Ajax doesn't have to actually fetch the XML.
See the Seadragon.Viewer API reference, under the openDzi() method:
"Asynchronously opens the DZI from the XML file at the given URL. If the contents of the XML are also given as a string, the XML is not actually downloaded; otherwise, it is. (The location of the XML is needed in either case to determine the location of the tiles.) Exactly one "open", "error" or "ignore" event is guaranteed to fire upon completion. "
So where you previously had:
viewer.openDzi("http://photozoom.com/.../foo.xml");
Just add an extra parameter with the contents of the XML as a string:
viewer.openDzi("http://photozoom.com/.../foo.xml", "<?xml ... ?><image>...</image>");
That should work. Let us know if you have any trouble.
Aseem
P.S. For more reading, see this article we wrote.
The company says
this answers the question
-
Inappropriate?Hi guys, thanks a lot for the responses.
I am not quite clear - let me be more explicit, if you wouldn't mind a second go around of explaining...
Aseem, you say "Just add an extra parameter with the contents of the XML as a string"
- where exactly would I get that parameter from? When I look on the "individual photo" page in photo zoom, there is only 1 piece of info there, and that is the xml filename (which as stated, doesn't work because of xss issue)
Could you please elaborate a bit more on your remark? - thanks kindly!
Boyd - you say "The embed viewer safely works around the cross-site security issue and still exposes the Seadragon Ajax API."
-Well yes, I can get the embed to work no problem - but following the instructions on the same seadragon-ajax website on "getting started" using the API is when the trouble starts. Can you please elaborate a little on what you mean, use the embed code AND the API? I followed the instructions on this page:
http://livelabs.com/seadragon-ajax/li...
- and so I am not sure what you mean by referring me back to the standard embed builder - I would like to start trying to use the API....
OK< I guess I am a total newb, sorry about that, it's just not jumping out at me what to do here!
thanks again guys, Ireally appreciate the help getting started!!
th
I’m hopeful
-
Inappropriate?Hey tre,
No need to apologize! Sorry for being unclear. =)
The extra parameter is literally the contents of the XML. You can pull this content manually:
- Navigate to the XML file in your browser (e.g. http://seadragon.com/content/images/c... ).
- Right-click > View Source.
- Select everything and copy it to your clipboard.
- In your Javascript, type in a single quote ('), paste the XML, and type in another single quote.
By doing that, you're passing in the XML contents as a Javascript string. Here's what it might look like for the above example:
viewer = new Seadragon.Viewer("container");
viewer.openDzi("http://seadragon.com/content/images/carinanebula.dzi", '<?xml version="1.0" encoding="UTF-8"?><Image TileSize="254" Overlap="1" Format="jpg" xmlns="http://schemas.microsoft.com/deepzoom/2008"><Size Width="29566" Height="14321"/></Image>');
By doing this, Seadragon Ajax no longer needs to actually make a request to the XML file (which the browser will reject since it's from a different domain). You're effectively making a shortcut.
So that should do it!
As for Boyd's comment, yep, it's not completely applicable to you since you're interested in the full library rather than the embed, but he was just explaining that that's how our embed works too.
For example, if you use our embed builder with that above image, you'll get back this code snippet:
<script type="text/javascript" src="http://seadragon.com/ajax/embed.js"></script><script type="text/javascript">Seadragon.embed("400px", "300px", "http://seadragon.com/content/images/carinanebula.dzi", 29566, 14321, 254, 1, "jpg");</script>
Those parameters on the end are our shorthand for doing the same thing. They give all the information for us to essentially know what the XML is (e.g. Width="29566", TileSize="254", etc.), so we don't have to fetch it directly.
Hope this helps!
Aseem
The company and 1 other person say
this answers the question
-
Inappropriate?Aseem,
Thank you very much!!
I re-read your answer a few times, actually got very close - it was the SINGLE quote that got me - your first example unfortunately showed a double quote! Not complaining, just sayin!
I learned a lot from trying to figure it out, so it's all good!
Now I am ready to roll and get into this stuff!
Thanks again for your help, best wishes.
th
I’m happy and thankful
-
Inappropriate?Aha! Good catch. I can't go back and edit that post anymore though, otherwise I would stealthily edit it and claim ignorance. =P
Good luck with your project! Do share any feedback, etc.; we'd love to hear it.
EMPLOYEE
