I’m curious if anyone knows how to create the frame effect on this page in Freeway Pro? http://brandonvickfotografie.com/weddings/owen/
It’s a coworkers site that I’d like to emulate for my illustration portfolio. It looks like a simple 500px high frame that stretches from edge to edge (at any window size) and has a scroll that is as long as the number of images in it.
I tried to do it using the iFrame action, but I haven’t had any luck yet.
Thanks for any advice.
It’s even easier than that. Make sure your page is set to Align: none.
Draw an HTML box full-width across your page.
Set it to the height of the images you want to show inside, and
then set the width to 100%. (Click into the width field, erase
whatever is there, and enter 100% with no space between the 0 and the
% and then tab or click out of that field.)
Now look for the Overflow setting in the Item Inspector, and change
its setting to Scroll or Auto.
You’re done.
If you want to center the header and footer above your auto-scroll
middle, then follow these steps:
Select your header(or footer) and cut it to the clipboard. (If this
element is made up out of multiple elements, group them before this
step.)
Draw an HTML box where the element should go. Set it to 100% width
and whatever height you need for the element itself.
Double-click inside the HTML box so that you see a flashing text
cursor, and Paste. Click once on the inserted inline element, and set
its margin to Auto or Center.
If this was the header, repeat for the footer. And you’re done (again).
Thanks! I tried it but it isn’t quite working as I expected. I setup the HTML box like you said, but when I draw the graphic item boxes inside the html box and fill them with the images, then “Fit Box to Content”, the images all break onto the next lines and when I preview the page I get a vertical scroll in the frame, instead of a horizontal. Do I have to make the page width as wide as the images I have? I’m sure this is something simple I’m missing.
Thanks for the help. I’m still new to Freeway.
Try inserting the images inline within that box. Then the overflow
will actually happen. Make each of your images the same size, then use
cut / double-click into parent container / paste to insert them
inline. Or if you want to create them from scratch, double-click
inside the parent (stretchy) container and choose Insert / Graphic
Item from the main menu.
Walter
On Oct 19, 2010, at 12:04 PM, FlipFriddle wrote:
Thanks! I tried it but it isn’t quite working as I expected. I setup
the HTML box like you said, but when I draw the graphic item boxes
inside the html box and fill them with the images, then “Fit Box to
Content”, the images all break onto the next lines and when I
preview the page I get a vertical scroll in the frame, instead of a
horizontal. Do I have to make the page width as wide as the images I
have? I’m sure this is something simple I’m missing.
Thanks for the help. I’m still new to Freeway.
Argh! No luck yet, but thanks for helping.
After getting the images into the frame, when I preview it, I’ll only see as many images horizontally as will fit in the browser window; any that are left are visible with a vertical scroll. I inserted 4 empty Graphic Item boxes into the 500px high stretchy frame. They lined up horizontally as I expected. I imported an image into each one (images are 500px high, but vary in width), and then once I used the Fit Box to Content command on the image boxes, each image broke to a separate line because the page width could only accommodate one image on a line.
The stretchy frame seems to be operating properly as far as staying centered in the window and only showing 500px worth of height, but the content keeps breaking based on the window width. I guess I need to find a way to prevent it from breaking onto separate lines?
Okay, figured it out. You need to create a nested layout in this order:
Outer HTML box, set to overflow:auto or overflow:scroll
Inner HTML box wide enough to hold all images
Inline Images
Without that middle part of the layer cake, your inline images
collapse to the width of their container. One other thing you could
try would be to create a style like this:
Tag: #yourBoxName p
Name: [blank]
Extended (two attributes added here):
Name: white-space
Value: nowrap
Name: width
Value: [your inner items’ collective width]px
You’ll find the correct name to plug into the Tag field (after a #
hash mark) by clicking once on your outer HTML box. You need to delete
whatever Freeway enters by default in the Name field, then tab out of
that field so it registers that you really want it to be blank.
I think the inner HTML box is going to be easier. Just realize that
Freeway won’t let you draw the inner box the full width initially, but
you can change its width so that it “hangs out” of its parent box
using the Inspector. The extra wide part will not show in preview, but
it will show in the design view.
Walter
On Oct 19, 2010, at 12:36 PM, FlipFriddle wrote:
Argh! No luck yet, but thanks for helping.
After getting the images into the frame, when I preview it, I’ll
only see as many images horizontally as will fit in the browser
window; any that are left are visible with a vertical scroll. I
inserted 4 empty Graphic Item boxes into the 500px high stretchy
frame. They lined up horizontally as I expected. I imported an image
into each one (images are 500px high, but vary in width), and then
once I used the Fit Box to Content command on the image boxes, each
image broke to a separate line because the page width could only
accommodate one image on a line.
The stretchy frame seems to be operating properly as far as staying
centered in the window and only showing 500px worth of height, but
the content keeps breaking based on the window width. I guess I need
to find a way to prevent it from breaking onto separate lines?
Yay! It looks like I got it to work: http://web.me.com/mosadciw/MOportfolio/illustration.html
Thanks for the help. I couldn’t really get it to work consistently. Something strange kept going on, and I had to keep copying and pasting the one HTML box that seemed to work. I also had to find some advice (on these forums again), for fixing the CSS menu so it stayed in the middle of the page, but I think I’m in business. I’ll post here when I get it complete.
Eh. I may have spoke too soon. Last night when I went to add another page with the same gallery type, I selected the html boxes holding everything, pasted them to another page, deleted the images and added new ones. After that, nothing worked properly. The page that had worked ceased to function (even though all I think I had done was select the items), and the new page didn’t work properly either. The only thing I though I had changed was the layering of the objects on the master page because I noticed my menu was appearing behind the images, so I moved it to the front. Reopening the Freeway document, not doing anything, and previewing the page showed that it worked fine. It seems quite a bit touchy. I wonder if there is something else I am not doing right.
Post links to the working page and the non-working page. I can’t
imagine that anything would be affected by the layer order if the
elements were inlined the way they should be.
Walter
On Oct 22, 2010, at 9:42 AM, FlipFriddle wrote:
Eh. I may have spoke too soon. Last night when I went to add another
page with the same gallery type, I selected the html boxes holding
everything, pasted them to another page, deleted the images and
added new ones. After that, nothing worked properly. The page that
had worked ceased to function (even though all I think I had done
was select the items), and the new page didn’t work properly either.
The only thing I though I had changed was the layering of the
objects on the master page because I noticed my menu was appearing
behind the images, so I moved it to the front. Reopening the Freeway
document, not doing anything, and previewing the page showed that it
worked fine. It seems quite a bit touchy. I wonder if there is
something else I am not doing right.