Scholar

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 

9 REPLIES
Mayor

Re: 360 image embedding

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

Scholar

Re: 360 image embedding

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

Mayor

Re: 360 image embedding

Scholar

Re: 360 image embedding

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

Scholar

Re: 360 image embedding

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! 

Explorer

Re: 360 image embedding

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!

Tourist

Re: 360 image embedding

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.

Employee Moderator

Re: 360 image embedding

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

Tourist

Re: 360 image embedding

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 :

 

embed-button-weebly.pngembed-code-weebly

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

 

edit custom code.png

 

Paste the code and press enter.

 

weebly-360-photos.jpg

 

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

 

Enjoy! Smiley Happy