1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

360 Image rotation.

Discussion in 'HTML & Website Design' started by mitchella, Feb 9, 2018.

  1. #1
    Hi Ladies & Gents,

    I'm seeking some advise on the best way to display some images on a website with a 360 spin function similar to https://mosurban.com/products/eyre-bench/ (scroll about halfway down). Now, I have very very limited skills with web design and I'm looking at sourcing a website through Square Space or alike. I've been informed that these hosting sites don't offer this type of function and that custom coding/scripts would be required to achieve this. Does anyone have any recommendations or could point me in the right direction?

    Thanks in advanced people.
     
    mitchella, Feb 9, 2018 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    You probably want something like this:

    https://jsfiddle.net/bghj5mhc/

    
    <html>
      <head>
        <meta charset="utf-8">
        <title>360&deg; Image</title>
        <meta name="description" content="360&deg; Image - A-Frame">
        <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
          <a-sky src="https://raw.githubusercontent.com/aframevr/aframe/v0.7.0/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
    
          <a-text font="kelsonsans" value="Puy de Sancy, France" width="6" position="-2.5 0.25 -1.5"
                  rotation="0 15 0"></a-text>
        </a-scene>
      </body>
    </html>
    
    Code (markup):
     
    qwikad.com, Feb 9, 2018 IP
  3. mitchella

    mitchella Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thanks for your response qwikad.com. Rather than having a 360(panoramic) image rotating as you have kindly suggested, I'm more in the hunt for something that will allow me to display a series of images to give a product a 3D rotation (just side to side). I've attached a website that has a similar function.
     

    Attached Files:

    mitchella, Feb 10, 2018 IP
  4. mitchella

    mitchella Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    second image
     

    Attached Files:

    mitchella, Feb 10, 2018 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #5
    qwikad.com, Feb 11, 2018 IP
  6. Leonial

    Leonial Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    Hi Mitchella,

    In this case, I would recommand using a simple webapp like Panoraven to do that. It's easy, free and it does not require you to create an accountto upload a 360 image.

    Quickly, here is how you could do it :

    Step 1 : Upload your 360 photo here

    [​IMG]

    Step 2 : After the upload, if all is working fine you should access to the viewer. Just copy the embed code like the picture below.

    [​IMG]

    Step 3 : Here is how to insert the code in a squarespace website : From the page or post editor, click an Insert Point or the + -> Select Embed from the menu and paste the code like in the picture below.

    [​IMG]

    That's it, you should be able to use navigate your image in all directions direclty on your website!

    Please let me know if it helps you !

    ;)
     
    Leonial, Jun 13, 2018 IP