As a way to get to grips with Xway I want to try building a version of my PanoramaPhotographer.com site, at this stage specifically looking at embedding (terminology? inserting? including?) a 360 panorama in a page.
These are constructed from a complete HTML page plus a set of files (CSS/JS/XML/images) that it calls. These files are generated by one of my pano tour production tools. The pano media is shown 100% width and height in its HTML page, so this should automatically fill whatever box/space/area it is inserted into.
My goal is to show an interactive 360 panorama within an Xway layout, with elements both over and under the ‘pano box’. (Elements to go over the pano would include menus, and under would be a graphic shadow image, perhaps a CSS-generated shadow later on.)
How should I approach this in Xway b1?
Are there going to be other ways of approaching this in future versions of Xway?
k
Heh. Well, it’s been a while so the details are very hazy – but yes, I used iFrames. I also set up preview images that show until an item is clicked, which hides the preview and loads the pano in the iFrame. Good grief what a smartass! I wonder how I did that?
Anyway, I’ve been trying out basic iFrame code in a markup item, and it’s working to an extent straight out of the box.
Is there a reason why markup items are always tiny? I’d find it helpful to be able to scale those things (and maybe colour them?) in the layout, at least to help design-time layout decisions. Or is this the old print designer instinct kicking in when I should be channeling my inner code geek?
Is there a reason why markup items are always tiny? I’d find it helpful to be able to scale those things (and maybe colour them?) in the layout, at least to help design-time layout decisions. Or is this the old print designer instinct kicking in when I should be channeling my inner code geek?
They’re tiny because Xway/Freeway doesn’t know how much space they will take.
We’re hoping to display previews for non-inline markup items in a future version of Xway. This would allow them to be displayed at their natural size.
[Inline markup items are more tricky, because they could be split across several lines of text.]
I tried to add shadow to a background (box, for navigation like Keith did for his Photographer360 site, which I thought is really clean looking, and, copy being a form of flattery and all)
Extended properties :
box-shadow.
10 px.
And nothing happened.
Mind you, I have only designed sites with WYSIWYG
iweb etc., freeway was my first attempt at something deeper.
I tried to add shadow to a background (box, for navigation like Keith did for his Photographer360 site, which I thought is really clean looking, and, copy being a form of flattery and all)
Extended properties :
box-shadow.
10 px.
And nothing happened.
Mind you, I have only designed sites with WYSIWYG
iweb etc., freeway was my first attempt at something deeper.
The horizontal value controls the left/right position of the shadow, and is required. Negative values shift the shadow to the left.
The vertical value controls the up/down position of the shadow, and is required. Negative values shift the shadow upwards.
Blur radius isn’t a required value. If you don’t supply one the ‘shadow’ will be as sharp as a scalpel cutout, as if you’d given a value of zero.
Spread radius isn’t required but if used does require a blur radius value (even just zero) so that it’s clear this is the fourth item. This affects the scale of the shadow; negative values shrink it down from the default size, positive values grow the shadow.
Shadow colour is only required if you want something other than a neutral black for the shadow. You can use any valid method of specifying colour, including rgba( ) which provides control of the overall opacity of the shadow colour (separately from the translucency of the blur).
Although these are visually separated with commas here for ease of reading the values should be separated only by a space, not a comma. The only times you’d use commas are within rgb or rgba colour specifications and if you’re stacking up multiple shadows in one box-shadow extended property. This is a really cool capability if you’d like to try for something a little more photorealistic, or at least a little less corny. Each complete SET of values must be separated by a comma. The example below strings two shadow values together to create a large hazy pale shadow (using rgba to set half-strength/0.5 opacity) and a denser one (although grey rather than default black shadow colour) more immediately ‘behind’ the object:
0px 10px 10px -5px rgba(0,0,0,0.5), 0px 25px 30px gray
Put that straight into the ‘value’ part of an object’s Extended Properties ‘box-shadow’ name and preview in a browser to see how it looks. Have fun!
• The horizontal value controls the left/right position of the shadow, and is required. Negative values shift the shadow to the left.
• The vertical value controls the up/down position of the shadow, and is required. Negative values shift the shadow upwards.
• Blur radius isn’t a required value. If you don’t supply one the ‘shadow’ will be as sharp as a scalpel cutout, as if you’d given a value of zero.
• Spread radius isn’t required but if used does require a blur radius value (even just zero) so that it’s clear this is the fourth item. This affects the scale of the shadow; negative values shrink it down from the default size, positive values grow the shadow.
• Shadow colour is only required if you want something other than a neutral black for the shadow. You can use any valid method of specifying colour, including rgba( ) which provides control of the overall opacity of the shadow colour (separately from the translucency of the blur).
Although these are visually separated with commas here for ease of reading the values should be separated only by a space, not a comma. The only times you’d use commas are within rgb or rgba colour specifications and if you’re stacking up multiple shadows in one box-shadow extended property. This is a really cool capability if you’d like to try for something a little more photorealistic, or at least a little less corny. Each complete SET of values must be separated by a comma. The example below strings two shadow values together to create a large hazy pale shadow (using rgba to set half-strength/0.5 opacity) and a denser one (although grey rather than default black shadow colour) more immediately ‘behind’ the object:
0px 10px 10px -5px rgba(0,0,0,0.5), 0px 25px 30px gray
Put that straight into the ‘value’ part of an object’s Extended Properties ‘box-shadow’ name and preview in a browser to see how it looks. Have fun!
