Rollovers and carousel

Hi
Just been having an experiment on some ideas and I wanted to create a site based on the carousel action and carousel tabs (inspired by Hbo-opleidingen en onderzoek in Almere en Zwolle | Windesheim) but I also wanted to apply a rollover action to the same box that also had the carousel tabs action.
Sadly I’m not able to achieve this combination - is this an outright impossibility or am I simply applying them incorrectly?
David B


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

I believe that Walt has a new version that addresses that.

http://www.freewaytalk.net/thread/view/45971


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

Please download the latest version of the Action from ActionsForge –
I fixed that last week.

Walter

On Jan 24, 2009, at 3:57 PM, David B wrote:

Hi
Just been having an experiment on some ideas and I wanted to create
a site based on the carousel action and carousel tabs (inspired by Hbo-opleidingen en onderzoek in Almere en Zwolle | Windesheim)
but I also wanted to apply a rollover action to the same box that
also had the carousel tabs action.
Sadly I’m not able to achieve this combination - is this an outright
impossibility or am I simply applying them incorrectly?
David B


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


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

Hi Walt,

Great action but I was wondering if I can ask you some queries:

  1. How may tabs can your Action have or is it fixed?

  2. Is it possible to use your Action but have no tabs showing, just the carousel?

  3. With your action, I am after a carousel where I plan to have several screen shots on each tab, where these maybe like thumbnails, by where the user clicks on the thumbnail and zooms out to a reasonable size - would this possible, using your Action and do you know of any Action that can do the zoom?

Thanks.

T.


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

There is no limit to the number of tabs or panes. It’s a good idea to watch the overall file size of your page, though.

Carousel can be controlled by previous/next buttons, or simply a timer, you don’t need tabs.

As far as a zoom, you could try using a Show/Hide Target Layer Action for this

Walter


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

Thanks for the info Walt.

Would appreciate the URL to check-out the Show/Hide Target Layer Action, please.

Thanks.


T.


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

It’s a core (built-in) Action. Look in your Item / Actions menu when
you have a layer selected on your page.

Walter

On Jan 26, 2009, at 7:37 AM, Tonsils wrote:

Would appreciate the URL to check-out the Show/Hide Target Layer
Action, please.


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

Hi,

Tried Walt’s Carousel action and I think I followed all necessary steps from Walt’s example - I created two panes - HTML items, that I populated from two separate HTML files, that were imported.

Grouped them applied Carousel action.

Drew two separate graphic items that I populated with both left and tight buttons and applied Carousel Button action.

I then went straight to Step 9 from Walter’s instructions and grouped the two panes and forward and back buttons.

Saved project and previewed in FFox - click on the forward button and nothing happens.

Did a View Page Source and it includes the js files, i.e:

I have also set the glide interval to 0.5.

Would really appreciate some help with the steps. Unsure what I have missed out?

Thanks.

Tony.

ps Running Freeway 5 Pro.


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

If you’ll post a link to your example on line, so we can see what it’s
doing or not doing, that would be useful.

Walter

On Jan 28, 2009, at 9:33 AM, Tonsils wrote:

Would really appreciate some help with the steps. Unsure what I have
missed out?

Thanks.

Tony.

ps Running Freeway 5 Pro.


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

Hi Walt,

Unfortunately I don’t have my example on-line but I can describe what I have done in more details and perhaps that might trigger something that I have done wrong.

  1. I created a new page in FWPro 5
  2. I created a HTML item (box) - stretched it out to like a rectangle and imported a an external HTML file into it.
  3. Duplicated this HTML item and replaced new external content from a different HTML file.
  4. Grouped both of these panes together and applied the Crousel action to it. Set glide interval to 0.5
  5. Drew a graphic item, duplicated and imported previous and forward image into each one.
  6. Placed the previous graphic item to the left of the twp grouped HTML item panes and the forward graphic item to the right.
  7. Both of these buttons are not part of the two panes but sitting on the actual page alongside the two grouped panes.
  8. Selected the previous button and applied the Carousel Button actions - set action to “previous”
  9. Selected the forward button and applied the Carousel Button actions - set action to “forward”
  10. Selected both panes and two graphic buttons and grouped them together.
  11. Saved and previwed in FireFox and pressed the forward button and nothing happened.

Just have some queries based on the above:

A) What is the link between the panes and the forward and previous buttons?

B) Is there something I have missed with regards to linking the buttons with the two panes?

C) Is there a freeway moment or a more thourough “how-to” on using this Carousel action?

Thanks.

Tony.


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

I think this is where the whole thing starts to come apart. Tell me
this: if you do this to a single HTML box on the page, and preview,
what do you see?

Walter

On Jan 28, 2009, at 4:58 PM, Tonsils wrote:

  1. I created a HTML item (box) - stretched it out to like a
    rectangle and imported a an external HTML file into it.

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

There is an example document available for download at the example page:

http://scripty.walterdavisstudio.com/carousel/coda.freeway.zip

Walter

On Jan 28, 2009, at 4:58 PM, Tonsils wrote:

C) Is there a freeway moment or a more thourough “how-to” on using
this Carousel action?


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

Thanks Walter for the example document.

Unfortunately I am at work now and cannot get to my carousel attempt.

So in your instructions, step 2

  1. Draw an HTML box the size of your carousel area. Style it how you like, borders, background color, whatever you want.

So what exactly am I suppose to do here, b/c it was at this step, I assumed I had to draw a HTML item.

Yes/No ?

Thanks.

Tony.


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

You mentioned inserting an external HTML page into an HTML item on the
page (at least that’s what it sounded like to me). This is almost
never the correct thing to do in Freeway, and if that’s precisely what
you did, this likely made the page invalid and thus the effect would
not work.

Draw an HTML box on the page. Color it white. Draw a small graphic box
entirely within it (so it becomes a child of the HTML box). Color that
box green or something. Draw another HTML box within the main HTML
box, double-click to get a text cursor within it, and add some text.
At this point, your layout should look like this:

If you look at the left side of the screen in that shot, you’ll see
that the HTML box item3 is indented below item1, as is item2. That
means that these are child elements of item1. (If your Freeway design
window doesn’t look like mine, click on the header above the Site pane
until it toggles to this view.)

Now, click on the outer HTML box (item1) and select Item / Duplicate
from the main menu. Enter 3 for the number of copies, and 0,0 for the
offsets. Okay the dialog, and you will have four elements positioned
precisely above one another, three of which will be selected.

Drag a selection rectangle around one corner of this stack, so all
four HTML boxes are selected. From the main menu, choose Item / Group.

With this grouped item selected, select Item / Actions / Carousel from
the main menu. Set the Auto-glide interval to 2 and preview.

If you don’t see the boxes animating from right to left at two second
intervals, go back over these steps again and try to see what step you
left out.

Once you have a working Carousel with auto-glide, then try adding the
previous/next buttons. The Carousel must be grouped, and the Action
must be applied to the group, not to any of its members. Surrounding
that grouped element can be any number of tabs and any number of
previous/next buttons. All controls that relate to a particular
Carousel must be grouped to that Carousel by one additional layer of
grouping. This outer group does not need any Actions applied to it. If
you were looking at this as an outline, it would appear like this:

Group
	Group (with Carousel Action applied to it)
		Pane 1
		Pane 2
		Pane 3
		Pane 4
	Tab 1 (with Carousel Tab applied to it)
	Tab 2 "
	Tab 3 "
	Tab 4 "
	Previous (with Carousel Button applied to it)
	Next "

Does that help?

Walter

On Jan 28, 2009, at 6:17 PM, Tonsils wrote:

Thanks Walter for the example document.

Unfortunately I am at work now and cannot get to my carousel attempt.

So in your instructions, step 2

  1. Draw an HTML box the size of your carousel area. Style it how you
    like, borders, background color, whatever you want.

So what exactly am I suppose to do here, b/c it was at this step, I
assumed I had to draw a HTML item.

Yes/No ?

Thanks.

Tony.


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

Really appreciate your detailed reply - that’s great Walter.

I will try it and let you know how I get on.

Tony.


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

"Does that help?

Walter"

Hi Walter,

Just want to say a HUGE thank you for explaining the carousel set-up. Your description was perfect.

Got it all going running through your example.

Just one other question I do want to ask and that is relating to styling the tab buttons, you mention as your Step 8.

(Even more optional) Create a single CSS style named ‘active’ and add a border or some other bit of style to set off the currently selected tab from the others. Apply this style to a non-layered element on the pasteboard so that Freeway will publish it.

Not too sure what you mean here - are you able to expand on this?

Thanks.

Tony.


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

Sure. In the Styles palette, create a new style. In the name field,
enter ‘active’ (without the quotes) and then press the Extended button.

Press New, and in the sub-dialog that appears, enter ‘border’ in the
Name field, and ‘1px solid #ccc’ in the Value field (again, without
the quotes).

Okay that dialog, press New again, then enter ‘margin’ and ‘-1px 0 0
-1px’ in the fields as before.

Okay out of the stack of dialogs.

Draw a non-layered box on the pasteboard (off the page). Click on the
style name ‘active’ in the list in the Styles palette so it applies to
the box.

Preview or publish. Whichever tab is selected will have a gray border
around it. Now you can go to town with that style, make it do anything
you like within the realms of CSS. If your tab image has a transparent
background, you can set a background-color to the active tab and it
will shine through the image, changing its color.

Note that the margin trick is to keep the tab from moving when it
becomes active – the border takes up space and would cause it to jog
down and to the right when it appears. If your active style doesn’t
use that element, you can ignore the margin property.

Walter

On Jan 29, 2009, at 7:40 AM, Tonsils wrote:

(Even more optional) Create a single CSS style named ‘active’ and
add a border or some other bit of style to set off the currently
selected tab from the others. Apply this style to a non-layered
element on the pasteboard so that Freeway will publish it.

Not too sure what you mean here - are you able to expand on this?


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

Thanks again Walter - will try it.

Tony.


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

Hi Walter,

With your carousel action, I just wanted to run another question by you and see whether the following is possible or if not, would appreciate any ideas on how to achieve this.

Basically want to see if I can use the carousel action to hold any number of thumbnails (total number unknown as it will be dynamic) but only say display 5 thumbnails at a time and then press the forward button, which will then glide across and present the user with the next 5 photos and then press the forward button again, which will only present the user with the remaining 2 photos.

So in this scenario, there were a total of 12 thumbnails available but this could be 20 or more.

Could this be achieved using the carousel action even though the total number of thumbnails is unknown, where it only displays 5 photos of x total amount of photos at a time?

If not, could you please suggest another way or ways.

Thanks.

Tony.


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

I don’t think you can do this sort of thing with this Carousel.

If I were doing what you describe, I would probably be using the
server to build the finished page, and have the server adjust the
JavaScript to accommodate N number of thumbnails.

I have seen carousel scripts out there that allow you to use Ajax (out-
of-band server communication) to dynamically load the next pane. This
is useful in getting the total page weight down, since you load new
panes as you go, rather than all at once. This sort of scheme could
also be used to make the layout you describe.

Walter

On Jan 29, 2009, at 11:50 PM, Tonsils wrote:

Could this be achieved using the carousel action even though the
total number of thumbnails is unknown, where it only displays 5
photos of x total amount of photos at a time?


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