Gullfaxi171/angular-photosphere-directive

Image hosted on Google Drive - not working

Opened this issue · 7 comments

saifullahalamin commented

Hallo,

I have an image hosted on google drive, but it is not working when I want to show the Image using your directive Florent, could you help me to solve this problem?

I use this image https://docs.google.com/uc?&id=0B9O7qe_nas1JZlVKQ2d6X3ViVU0

Gullfaxi171 commented

Hi !

This is a CORS issue.
I will fix this in the next version (in 2-3 weeks)

For now you can make it work by adding this line of code :

<script>THREE.ImageUtils.crossOrigin = 'use-credential';</script>

between the call of three.js and photosphere.min.js (like that :

<script  src="//code.angularjs.org/1.4.0-rc.2/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"></script>
<script>THREE.ImageUtils.crossOrigin = 'use-credential';</script>
<script src="http://rawgit.com/Gullfaxi171/angular-photosphere-directive/master/dist/photosphere.min.js"></script>
saifullahalamin commented

Hi Gullfaxi171,

I get error like this:
Redirect at origin 'https://docs.google.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

I will wait your next version.

Gullfaxi171 commented

Hi,

this is because CORS also has to be enabled server-side. You can't use this link :
https://docs.google.com/uc?&id=0B9O7qe_nas1JZlVKQ2d6X3ViVU0

but you have to use this one :
https://doc-10-1o-docs.googleusercontent.com/docs/securesc/1tb1h8grn2jn4dd5j3vcqrk6lm15shbp/iainh1g3v7nku2mnhd2nsm7l92758o1u/1433095200000/11470150606268658201/10076177599681084246/0B9O7qe_nas1JZlVKQ2d6X3ViVU0?nonce=v4pne02v22jk4&user=10076177599681084246&hash=1ke3esoptd30romh5pfrrev7gc4fhrtv

saifullahalamin commented

I get it,

could you let me ask one more question?
can I re-render the photosphere by clicking button?, I mean what is the code to re-render it?

Gullfaxi171 commented

This is not possible right now, but I'll try to add this feature in the next version

do you mean re-rendering with the same picture, or rendering in order to switch to another photosphere ?

saifullahalamin commented 
"<photosphere src="path/img.jpg"  width="1024" height="768"  speed="10" resolution="40" controls="all"> </photosphere>"

if I have this html tag, I update the src attribute via javascript, then re-render it.

Thanks for spending your time.

Gullfaxi171 commented

I have corrected the CORS issue, but I also believe your link is not yet correct
you need to follow this tutorial : https://support.google.com/drive/answer/2881970?hl=en

you can use this version of photosphere.min.js :

http://rawgit.com/Gullfaxi171/angular-photosphere-directive/master/photosphere/dist/photosphere.min.js

Can you tell me if you manage to make it work ?