Versions

Carousel2.fwaction (2013-03-02) (Downloaded 941 times)

Contains:

  • Carousel 2 (item-action) - v. 0.1.11
  • Carousel 2 Pane (item-action) - v. 0.1.11
  • Carousel 2 Button (item-action) - v. 0.1.11
  • Carousel 2 Tab (item-action) - v. 0.1.11
  • Carousel 2 Text Button (action) - v. 0.1.11
  • Carousel 2 Text Tab (action) - v. 0.1.11

Compatible: Pro 5, Pro 5.5, and Pro 6

Author: Walter Davis

developer javascript css effects prototype coda animation scriptaculous

This is a complete re-write of Carousel, designed to stand alone and cooperate with Protaculous 2. By popular demand, you can now create “infinite” carousel animations, which appear to wrap around rather than zipping back to the start.

Carousel2 and Freeway 7

If you have used Carousel2 in the past (pre Freeway 7) to animate in-flow (or inline) graphic boxes, then this construction will fail in Freeway 7 and above. The reason has to do with a fundamental change in Freeway (for the better) toward a simpler HTML construction. Unfortunately the solution to this is a little convoluted (until I update the Action to accommodate this).

For each Graphic Box in your carousel, follow these steps:

  1. Note the dimensions of the box. Draw a new HTML box exactly that size (draw it any size, then use the Inspector to set the dimensions – much easier!).
  2. Do one of the following:
    1. Drag the graphic box over the top of the HTML box, pressing the spacebar as you do. When the edges of the HTML box highlight blue, you may release the mouse button and let go of the spacebar. Then you may drag the image (which is now a nested child of the HTML box) into the top-left corner of the HTML box, or use the Inspector to do the same. Remove the Action from the image, and apply it to the HTML box, following the same settings as the Action on the graphic box.
    2. Draw a new HTML box the same size as the graphic box. Import the image from the graphic box as a background image on the HTML box. (You may want to export the original image to capture any cropping/sizing steps that you performed on the original before doing this.) Apply the Action to the HTML box, and delete the original graphic box. Ensure that the settings are the same as before.

Either of these approaches will work around the issue of Freeway 7’s improved HTML structure, and your page will behave the way you expect. Yes, these are more complex directions than you may be used to, but until the Action can be updated, please follow them to avoid frustration.

Offline use

This is a single-file Action, and all JavaScripts are externally hosted. As such, it will not work on a CD-ROM or in a development environment without a working Internet connection.

The following Actions are included in this one file:

  • Carousel 2
  • Carousel 2 Pane
  • Carousel 2 Button
  • Carousel 2 Tab
  • Carousel 2 Text Button
  • Carousel 2 Text Tab

Construction

Draw an HTML box where you want your effect to appear. Either double-click inside of it and build your first pane using inline layout techniques, or draw nested elements within the first pane (click once on the pane so its handles are showing before drawing each element within it). Duplicate this box, then apply the Carousel 2 Action to the original.

Apply Carousel 2 Pane to the duplicate box, and choose the first box in the Target picker. Modify the contents to become the second pane of your animation. Duplicate this second pane (and modify each copy) enough times to complete your effect.

You may position these additional panes anywhere on the page or the pasteboard – they will be hidden when the page loads. (Anyone visiting your page with JavaScript disabled will see them in their original location, though, so if that’s something you think will happen, take a moment to put them somewhere legible.)

Navigation

Carousel 2 Tab (and Carousel 2 Text Tab) may be used to create links to specific panes of the animation. When these are clicked, the (optional) auto-animation will stop and the carousel will turn to show the chosen pane.

Carousel 2 Button and Carousel 2 Text Button may be used to create “previous” and “next” buttons.

Options

  • Direction: choose horizontal or vertical animation
  • Effect duration: how long the effect takes to move from one frame to another (0.4 seconds default)
  • Wrap around: give the illusion of an infinite loop of panes, rather than a fixed film-strip.
  • Play automatically: start animating when the page loads (Interval sets the time in seconds between moves)
  • Move borders to outside: if your panes all have a border, check this to make the border stay still while the pane contents animate. (The first pane’s border will be used, and the other panes' borders will be removed.)

11 Comments

Hello, I hope you can help, I get a missing plug in message when viewed in a browser. The buttons work in that the image frames are sent forwards and backwards on command but the missing plug-in message is displayed in the main image frame. Howard

Oh, Walter. I am truly humbled by your brilliance with this new suite. The wrap around feature is pure web design ecstasy!

Thanks for the wrap around … implemented on my site already … http://www.howlingbasset.com/index.html

Hello, thank you for such an awesome updated action, but I had a question. Where did the "Carousel Tab Button" go to? I expected to find a "Carousel 2 Tab Button" also, but I must be missing something. Can anyone help me out? Thank you very much!

There is a Carousel 2 Tab (for images) and a Carousel 2 Text Tab, and the same for Button. There has never been a Carousel Tab Button Action (they are separate ideas – a tab navigates to a specific pane, and a button moves in a specific direction).

Hello. This Carousel 2 is excelent. Very smooth. Is it possible to implement a play/pause option? Can I suggest you this for your next version? That would be great. Thanks.

Can someone point me to some samples of the Carousel 2 Action in action? Thanks.

I remember theese action worked for me earlier back. But I have forgotten all. Can someone help a 76 old man whoo really want to make a photo gallery with my grand hildren. Anyplase for a manual for the Carroussel, pane and button? I am using the 6 ,0 version of Freeway Thanks in advance - Franj [email protected]

You may want to post a question at <http://freewaytalk.net> where there are lots of people who use this.

Hi Walter, I have use the Carousel actions with a lot of success over the last couple of years – does the action work in Freeway 7 for responsive sites?

Many thanks

Russell

Thanks Walter for the update!

I applied the new action to multiple pages and it works great for the individual page. However when i navigate from page to page there seems to be a glitch while loading the new page….the loading page 'jumps' before loading. In that split second of jumping all the images used with the action appear as they would in PAGE view. This only happens for a split second and only when previewing in safari. Any assistance would be greatly appreciated.

Thanks, Mike

Sign In or Sign Up to comment.