Carousel 2

Versions

Author: Walter Davis

developer javascript css effects prototype coda animation scriptaculous

Update March 2018

This action now creates HTTPS links (for secure hosting) exclusively. This should not cause any side-effects in non-secure hosted pages, and will alleviate the need to use the HTTPS CDN Helper Action to create secure links to the external JavaScript libraries.

---

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:
   • 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.
   • 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