Advanced Slideshow

Freeway
1

Hello there everyone,

since some weeks now I’m testing freeway pro and express. Everything works great so far, but I need help with this topic:

I want to have a slideshow for my website like that:

…with focus on that little menue to select the slides, go back and forward…you know what I mean. How do I do that?

Sorry if this is in the wrong section or already posted, but I didn’t find anything similar.

Thanks for your help.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

You can use the the Carousel action. Make each of the small navigation boxes a Carousel Tab Link each box to the relevant image.

http://freewaytalk.net/thread/view/63250

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Wow! Thanx man, worked great so far.

Only one thing I couldn’t figure out: In my example, with every new (automatic) upcoming image, the assigned Tab Button does kind of an automatic rollover you know what I mean? Any Idea how to combine this in Carousel?

The Tabs and everything work fine, thanks for the help!

Greetings

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

You can use the regular Freeway rollover to make that effect on your tabs.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Hi All,

Very helpful thread and Dan your tutorials are also so helpful.

  1. I see that the carousel action has a auto glide feature. Will this enable the panes to move on their own and pause for a given time?

  2. If the user clicks a tab will it stop the auto glide feature like the example provided by Johannes?

Thanks
Team SDA_Dave

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Yes and yes. The time is in seconds, and you can use decimal seconds for mote precision. And the moment you interact with either the tabs or the previous next buttons, the auto timer stops for the rest of that page load.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Hi Walt,

Thank you for the information.

TeamSDA_Dave

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Hi Walt,

Sorry to bother again but it didn’t work out, probably because I didn’t made the problem clear: In my example, come a new picture, the assigned tab automaticly starts “glowing” (Sorry, german, can’t describe it better). I already used rollover so that when I “mouseover” the tabs, they change color like in the example. But I can’t figure out how to use rollover to let them change color automaticly when assigned picture glides in…I checked parameters, but there is no such feature, or I didn’t find it. Please tell me how to do it.

Thanks Dude,

Hannes

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Sure. You need to create a CSS style that has the requisite glow, and
give that style the classname .active. The easiest thing to change is
the border of the tab.

Add this style to your page:

.controls a img.active {
	border:1px solid #ffc;
	margin-top:-1px;
	margin-left:-1px;
}

That will put a 1px yellow rule around your currently active tab.

Walter

On Sep 14, 2010, at 4:19 PM, Johannes Bremicker wrote:

Hi Walt,

Sorry to bother again but it didn’t work out, probably because I
didn’t made the problem clear: In my example, come a new picture,
the assigned tab automaticly starts “glowing” (Sorry, german, can’t
describe it better). I already used rollover so that when I
“mouseover” the tabs, they change color like in the example. But I
can’t figure out how to use rollover to let them change color
automaticly when assigned picture glides in…I checked parameters,
but there is no such feature, or I didn’t find it. Please tell me
how to do it.

Thanks Dude,

Hannes

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Okay, I think the freewaynoob gets closer.

I created a new style, named it .active and added “Glow” , chose my needed color.

Now what? I have a rolloverbutton, that has also the action “Carousel Tab” and is assigned to my first slide. How do I “add a style to my page”, why the page? How do I put that code into what?

Sorry, total beginner, I tried two hours to figure everything out, but I think I’m just not understanding freeway language so good yet. Have patience please.

H

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Oh and by the way: I so appreciate your help so far. I love this community, couldn’t imagine to figure that all out on my own!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

If you created a style in the Freeway Styles palette, then the name
you need to use is active (without the leading dot). And then you need
to draw an item on the pasteboard above the visible page and while it
is selected, click once on your new ‘active’ style. This will force
the style to be published into the page.

The other way to get the style into the page involves a little dance.
Normally, Freeway “prunes” any style that isn’t used in the current
page from the styles list. The only exception to this is any style
that has a Tag, but no Name. It’s slightly difficult to make one of
these, but this is a known work-around and Softpress supports this use-
case so you’re safe in using it. You’re effectively tricking Freeway
into publishing this style anyway. Read through these steps, and then
at the end I’ll explain how to adapt the style you already made so it
will work just like this (and so you won’t need to go through all this
a second time).

  1. Open the Text Style tab of the Styles palette. Click on the cog
    menu and choose New style…

  2. Ignore whatever name Freeway put in the Name field. Tab into the
    Tag field, and enter the real selector name for your style rule. For a
    class-based style like this, start the classname with a leading dot.
    For an ID based style, start with an octothorp (#). If it’s a compound
    selector, like #nav1 p a span.foo, then type all that in there in
    one whack.

  3. Assign all of your styles, using any combination of the regular UI
    or the Extended dialog to create the effect you’re looking for.

  4. Click into the Name field at the top-right of the dialog and erase
    whatever is there. Finally, VERY IMPORTANT, tab back out of that field
    so Freeway registers that you really don’t want there to be a Name
    attribute to this rule. And then Okay to save.

Now since you have already made your style, all you need to do is
add .active to the Tag field, delete whatever you entered in the Name
field, tab out of that field, and Okay to save.

The resulting style will appear in all pages of your site, and you
don’t need to apply it to your tabs, just trust that the Carousel
script will assign it and remove it as needed whenever your effect is
triggered. This works on the auto-glide as well as on the manually
triggered changes.

Walter

On Sep 15, 2010, at 1:43 PM, Johannes Bremicker wrote:

Okay, I think the freewaynoob gets closer.

I created a new style, named it .active and added “Glow” , chose my
needed color.

Now what? I have a rolloverbutton, that has also the action
“Carousel Tab” and is assigned to my first slide. How do I “add a
style to my page”, why the page? How do I put that code into what?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Hey Walter,

thanks again for replying.

  1. I created the textstyle: nameless, Tag: .active and assigned to it some Graphic changes that I want the Carousel Tab to do.

  2. I created an item on the pasteboard, but I’m not really sure what you mean by that because of the language: You mean just right above my site so that it will not actually apear on my site right?

  3. Problem now is: I can’t assign my style to anything but text. I can’t actually give an item my new style cause freeway keeps telling me: Only Text can have this style.

  4. When I mark some text and tab on active, nothing is happening not even when I give that style some effects.

I believe there are some major things I just don’t understand because I’m such a beginner. You can try one more time to explain but I don’t want to bug you with this. Is there some material, some stuff (screencasts etc) that deal with similar stuff so that I can understand this whole background more?

Well, maybe you’ll understand what the problem is after you read this.

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Add:

There is something strange as well: I played with the styles a little bit and there are styles: That can’t be put on Text or items. When I try putting it on Text it says: Can’t be put on Text. When I put it on an item it says: Can only be put on text. Whats up with that?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

If you make the Tag-only style, then it’s important to not apply it to
anything, ever. It will become a part of the styles in the page
automatically, and Carousel takes care of adding the classname to the
currently-active tab, so you don’t have to do anything on that end
either.

As to why some styles can’t be applied to some kinds of content, it’s
Freeway trying to be nice for you. If you have a style that includes a
tag in its definition, then Freeway will only allow you to apply that
style to that tag element. So if your Tag field said div, you would
not be able to apply that style to a paragraph of text, for example.

If you draw an HTML box while the CSS Positioned layout button is on
(blue), then every new HTML box you draw will be a DIV tag. If you
have the CSS button in Table Layout mode (gray), then every new HTML
box you draw will be a TD (table cell). So if there is a tag in your
style definition, then it would have to be one of those in order to
have the style apply to the box itself.

Now if you make a style that only has a name component, so it will
publish as a classname style like .foo { border: none } in the
stylesheet, then generally you can apply that to any type of element
on the page. Whether it appears to do anything depends on what the
actual body of the style is. Some of the CSS style attributes don’t
apply to some elements, either by design or by dint of that element
not showing that particular style attribute under any circumstances.

Walter

On Sep 19, 2010, at 7:39 AM, Johannes Bremicker wrote:

Add:

There is something strange as well: I played with the styles a
little bit and there are styles: That can’t be put on Text or items.
When I try putting it on Text it says: Can’t be put on Text. When I
put it on an item it says: Can only be put on text. Whats up with
that?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

Forgot to add this part: If you make a Name-only style, or even a Tag

  • Name style in the normal Freeway manner, then you must do one of the
    following to get your style into the page. Either switch on External
    Stylesheets in the Document Setup dialog, or apply that style to some
    element on the same page where you need to use it. If you make a text
    box above the page on the pasteboard, and put some text in there
    styled with the styles you will need elsewhere, then that style will
    be published into the page, and it will be available for your use in
    hand-coded, Action-generated, or dynamically-assembled page elements.

Walter

On Sep 19, 2010, at 10:13 AM, Walter Lee Davis wrote:

Now if you make a style that only has a name component, so it will
publish as a classname style like .foo { border: none } in the
stylesheet, then generally you can apply that to any type of element
on the page. Whether it appears to do anything depends on what the
actual body of the style is. Some of the CSS style attributes don’t
apply to some elements, either by design or by dint of that element
not showing that particular style attribute under any circumstances.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

Hey Waltd,

its hopeless…:wink: Its just not working. I also read at this topic
http://www.freewaytalk.net/thread/view/73694#m_73970

where there is the same question asked. Again, here my situation:

I created a style with .active in the Tag, without a name. I set a background color (in this case white) on that.active tag and use transparent Tabs (PNG).
My Style seems to be in the page, I have a text item at the top that has this style. I also tried it with “Name only” style to apply it to the tab directly.

Still nothing is happening. I saw it work at mrworm’s example and I am so bummed that it doesn’t work at my mashine and that I don’t seem to get it.

Is there a way for you or the other guys that made it to send me a small “example.freeway” file like this one: http://www.edwardlawlor.co.uk/fw/carousel.html so that I can just look myself how you guys did it? That would be I think the simplest and most effective help. Maybe you can send it to me via email? email@hidden

I know this would mean work for you but it would be highly appreciated and the solving of the problem would be sure.

Thanks anyway man,

Hannes

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

Here’s an example: Untitled

FW5 file is here: http://scripty.walterdavisstudio.com/tabdemo2.zip

Walter

On Sep 21, 2010, at 4:45 PM, Johannes Bremicker wrote:

Hey Waltd,

its hopeless…:wink: Its just not working. I also read at this topic
http://www.freewaytalk.net/thread/view/73694#m_73970

where there is the same question asked. Again, here my situation:

I created a style with .active in the Tag, without a name. I set a
background color (in this case white) on that.active tag and use
transparent Tabs (PNG).
My Style seems to be in the page, I have a text item at the top that
has this style. I also tried it with “Name only” style to apply it
to the tab directly.

Still nothing is happening. I saw it work at mrworm’s example and I
am so bummed that it doesn’t work at my mashine and that I don’t
seem to get it.

Is there a way for you or the other guys that made it to send me a
small “example.freeway” file like this one: http://www.edwardlawlor.co.uk/fw/carousel.html
so that I can just look myself how you guys did it? That would be I
think the simplest and most effective help. Maybe you can send it to
me via email? email@hidden

I know this would mean work for you but it would be highly
appreciated and the solving of the problem would be sure.

Thanks anyway man,

Hannes

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

Walter, you are my hero! I can’t believe how patient you guys are. Did you create that action your self? It reads like it. Thanks so very much man.

God bless you!

Hannes

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options