I have a 360 degree panorama picture. How can I use it as a webpicture inside
a square frame, floating from left to right and backwards, so that it gives the
impression that the viewer stands in the middle? (Hope the question is clear…)
Picture was shot with an iPhone 4S.
I have a 360 degree panorama picture. How can I use it as a webpicture inside
a square frame, floating from left to right and backwards, so that it gives the
impression that the viewer stands in the middle? (Hope the question is clear…)
Picture was shot with an iPhone 4S.
Hi Tom,
To get this working in your own Freeway site you’ll need to copy the JavaScript code in the page source of Walter’s example and paste this into your page using Page > HTML Markup and placed in Before .
On your page you’ll need a container div (layer item) that will act as the mask or clipping region for the image that is 500px x 300px. Set the overflow of this item in the Inspector palette to hidden. Double-click inside this box and select Insert > HTML Item. This will place an HTML item inflow within the parent layer. With this child box selected import your panorama image as a pass though. At this point check to see if the parent box width has grown to the size of the child. If it has then reset this back to 500px wide (or whatever size you chose).
Lastly if you name your image box ‘fairport’ (the title in the Inspector palette) then the image should automatically scroll and loop when the page is viewed.
You will have to manually adjust your panorama image as it needs the left most part of the image repeated on the right (by the width of the outer container) to work correctly. Without this the image will scroll out of view before appearing again.
Here’s the example of that: Endless Scroll This page (unlike the previous) uses Prototype, so it’s a candidate for using Protaculous to set it up. Apply Protaculous to your page, and set the Library picker to prototype-packed. Grab everything inside the comments in the script tag (view source of the page) and paste it inside the top Function Body dialog. Then make sure that your left button has the Title set to ‘left’ (lower-case, no quotes) and your right to ‘right’. If your masking box is still named ‘fairport’, then you’re done.
Walter
On Jun 12, 2012, at 9:49 AM, Tim Plumb wrote:
Hi Tom,
I don’t see buttons on Walter’s example; Endless Scroll
Do you want the image to scroll when the user clicks a left or right button?
Regards,
Tim.
On 12 Jun 2012, at 14:41, TomP wrote:
Tim, sorry, one last question: is it possible to integrate buttons “left” and “right” like Walt did? (User can decide how to move…)
This means everything after //. If you added the outer script tags and the comment inside them, then you have doubled the script tag, since the Action will write all that out for you.
Walter
On Jun 14, 2012, at 4:17 AM, TomP wrote:
Grab everything inside the comments in the script tag (view source of the page)