QuickFlip Stacks Plug-in for RapidWeaver

Price

Add To Cart

The QuickFlip Stack utilizes QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back.

QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). This shortcut improves performance while allowing the flip effect to work smoothly with any piece of markup regardless of images, backgrounds or CSS.

It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. However if you want a smoother option with a depth effect try jQuery Flip!, although this only works with background colors (not images) and hides the panel content before flipping.

Editing Your QuickFlip Stack

When you first load your QuickFlip stack onto your page, you are going to want to make sure that your turn Render HTML in Edit Mode OFF. This can be done inside the page inspector. The reason you have to do this is so you have access to edit all four text areas. See the illustration to the right for what it should look like (without the red & green outlines.)

Adding Text

As you can see from the image on the right, there are four text areas. There are two different purposes for these text areas. There are two for the front and two for the back.

The Green Highlighted boxes are for the main content areas on the front and back sides.

The Red Highlighted boxes are for the text area where the link resides.

Adding Images

In order to use your own custom images, you will need to add them into the Page Assets section within your Page Inspector (see image at right.)

Now once you add your images, one for the front and another for the back, you will need to edit the stack configs (see below section) and configure the path to the images.

Here is a sample of what the path should look like: myPageName_assets/my_image.jpg

Customizing Your QuickFlip Stack

Height: The height of the block. (Probably the same height as your image.)

Width: The width of the block. (Probably the same width as your image.)

Top Padding: The content padding for the top of the block.

Side Padding: The content padding for the sides of the block.

Bottom Padding: The content padding for the bottom of the block.

Front Image: The location of your image for the front side of the block.

Back Image: The location of your image for the back side of the block.

Open Speed: The speed of the open flip in milliseconds.

Close Speed: The speed of the close flip in milliseconds.

Easing: There are also two easing methods built into jQuery, linear and swing. You can also pass the string of the jQuery easing plugin method you want to use.

**While I have added the easing feature, I have not been successful at using the easing plugin. If you happen to figure out the syntax of passing the method, please let me know.

Adding Multiple Quickflip Stacks

It is now possible to add multiple Quickflip stacks onto your webpage. You will need to have the "Quickflip Add Duplicate" stack however. Here are the steps that you need to follow to use the "Quickflip Add Duplicate" stack.

Add the original Quickflip stack to your webpage and configure it how you like.
Add as many Quickflip duplicate stacks as you like on the page and configure their background images.

The Quickflip duplicate stacks fully support having different content as well as different backgrounds. However, all of the size and margin settings will be inherited from the original Quickflip stack on the page.

**Important Note: There are known issues with this stack and Safari 3. However, every thing work properly with Safari 4. I have contacted the developer of the JQuery Quickflip library and there are no plans to repair functionality with Safari 3. Everything should work fine with the following browsers: Internet Explorer 6, 7 & 8, Firefox 3 & 3.5, Google Chrome, OmniWeb and Opera.