x

360 image embedding

Hi guys! I need to embed a 360 image into my Weebly site. I'm currently on the free plan but have plans to upgrade once I know that I can get it up and working. 

I'm looking to follow this link (and someone has done it with wordpress here)to embed my image but I'm not sure how I can host the image on weebly AND get it to work in 360. I'm not a developer but I do know some basic HTML/CSS. 

It would be of great help if someone could point me to where I should upload my images and where I should plonk my codes as I'm not familiar with Weebly's HTML/CSS code editor, I'm more used to the one page "notepad" that most other places have. 

Thanks in advance! 

-Alison 

6,531 Views
Message 1 of 10
Report
1 Best Answer

Best Answer

Hi ! Just checking back! 

I've solved my problem. 

I tried Sirv but it dosn't work as it is catered for 3D objects rather than 360 images. I trial and error-ed the google web embed till I got it. 

What I did was just use a file uploading site like photo bucket to test out, and my code looked a little like this: 

<!DOCTYPE html>
<html>
<head>
<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
</head>

<body>

<div id="vrview">

</div>


<script>var vrView = new VRView.Player('#vrview', {
image:'link of image goes here',
is_stereo: false,
is_autopan_off: true,
});</script>

</body>

</html>

I just plonked this in the code embed and it worked, I have yet to adjust the size of the image though Smiley Happy 

P.s. just a note, you wont be able to view it till you publish it. 

Thanks anw for your help guys, and hope this helps anyone else stuck too! 

View Best Answer >

6,465 Views
Message 10 of 10
Report
9 REPLIES 9

It's a tall order.  There are other alternatives.

6,524 Views
Message 10 of 10
Report

Will look into that, if you have some you know of, do let me know Smiley Happy Thanks for your reply ! 

6,477 Views
Message 10 of 10
Report

6,511 Views
Message 10 of 10
Report

Im looking to upload a 360 image rather than a 3D object. But I will try it out and update you, thanks! Smiley Happy 

6,479 Views
Message 10 of 10
Report

Best Answer

Hi ! Just checking back! 

I've solved my problem. 

I tried Sirv but it dosn't work as it is catered for 3D objects rather than 360 images. I trial and error-ed the google web embed till I got it. 

What I did was just use a file uploading site like photo bucket to test out, and my code looked a little like this: 

<!DOCTYPE html>
<html>
<head>
<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
</head>

<body>

<div id="vrview">

</div>


<script>var vrView = new VRView.Player('#vrview', {
image:'link of image goes here',
is_stereo: false,
is_autopan_off: true,
});</script>

</body>

</html>

I just plonked this in the code embed and it worked, I have yet to adjust the size of the image though Smiley Happy 

P.s. just a note, you wont be able to view it till you publish it. 

Thanks anw for your help guys, and hope this helps anyone else stuck too! 

6,466 Views
Message 10 of 10
Report

Hi, thanks for making the script i'd really like to use it since im a total coding noob. But when I drop in the url for the picture it gets redirected to the weebly url automaticly and since i dont know how to host a picture on from the server of weebly i use another ftp to host my files. So the link gets like this by itself "www.weeblysite.com/otherhost/file.jpg" and that doesnt go anywhere obviously. So can someone please help me either upload my jpg to weebly or get your script to loose the local page addition to the url string.

Thank you!

5,344 Views
Message 10 of 10
Report

If you really want to upload 360 images then i want to suggest you to use Movense App.  It is one of them apps which provides you 360 degree photography on android. It allows E-commerce and product selling websites to capture and show 360 products spins online.

5,107 Views
Message 10 of 10
Report
Square

Thanks for the suggestion @geets Is this an app that you can use the Embed Element with? 

5,104 Views
Message 10 of 10
Report

Hi,

you can use Panoraven to do that. It's IMO the simplest because It's free for personal use and you don't even need to create an account to use the service.

Here is how to do this :

Step 1 : Upload your 360 photos here

panoraven-upload.png

Step 2 : After the upload finished, if all is working great you will be able to navigate your 360 photo in all directions in the panoraven viewer. Copy the embed code below the viewer.

panoraven-copy-embed.png

Step 3 : Paste the code in your weebly website

In the weebly editor, find the embed code button and place it where you want the viewer to appear :

imageembed-code-weebly

Click on the element you just created click on "edit custom html"

image

Paste the code and press enter.

image

The 360 photo viewer will appear on your workspace. You can navigate the photo in all directions in the viewer.

Enjoy! Smiley Happy

4,937 Views
Message 11 of 10
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.