Loading Form...
Apr 13, 2010 | 5 minute read
written by Armando
The primary benefit of using a JavaScript library like jQuery is speed of development.
jQuery plugins take development speed a step further, creating complete widgets or effects that can be integrated into nearly any site design in a matter of minutes.
You can think of it this way. The library essentially creates a number of short cuts that solve common JavaScript challenges. And a plugin uses the library not to address a task, like adding an event listener, but rather to create an entire solution like a content slider.
Recently, I came across a compact jQuery plugin, Flip!, which can be used to solve a common design task, namely creating an interactive content slider/manipulator that provides some level of site interactivity.
Flip! is compatible with most web browsers including Microsoft's Internet Explorer versions 6 and above, Google Chrome, Mozilla Firefox, Opera, and Apple Safari. The plugin is available under an MIT/GPL license, so you may use it in commercial projects, including online stores.
I should also mention that Flip! is the work of Lugano, Switzerland-based front-end developer Luca Manno. Bravo Luca.
Flip! Dependencies
Flip!, of course, depends on the jQuery Library and on a custom build of jQuery UI, which you can download with the plugin.
You'll also need to create your own bit of jQuery-flavored JavaScript to invoke Flip!.
The Mark Up
Flip! requires very little mark up. In fact, you don't even need to use CSS classes or ids if you don't mind selecting the effected page elements by tag name. But for my demonstration, I did use id attributes for all of the page elements that I would be manipulating or using as a trigger.
Notice also that I added the required JavaScript files at the end of the mark up just before the closing body tag. And I called jQuery from the Google Code content delivery network (CDN) to save on bandwidth.
I found that Flip! worked better when the elements triggering the transition event were external to the section that was being animated, so my mark up includes four links in an unordered list.
Finally, I am loading four JavaScript files. These files are pretty light, so I shouldn't see too much of a performance hit. But if I were going into a production environment, I might consider using LABjs to speed up my page load times.
<!doctype html>
<html lang="en">
<head>
<title>jQuery Flip! Plugin Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="flipbox" >
<div id="menu">
<ul>
<li id="one"><a href="#">Free Shipping*</a></li>
<li id="two"><a href="#">Deal of The Day</a></li>
<li id="three"><a href="#">Top Rated</a></li>
<li id="four"><a href="#">Coupons</a></li>
</ul>
</div><!--end menu-->
<div id="flipped">
<a href="#"><img src="start.png" alt="Flip Image" /></a>
</div><!--end flipped-->
</div><!--end flipbox-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="jquery-ui-1.7.2-custom.min.js"></script>
<script src="jquery.flip.js"></script>
<script src="js.js"></script>
</body>
</html>
Images and CSS
Next, I am going to add some page style. Since I am going to be demonstrating how to use Flip! in a marquee or hero position on a page, I will actually do quite of bit of styling and positioning. I also created five images—one that is initially loaded with the page mark up and four that represent new Flip! content.
body {width: 50%; margin: 50px auto;}
#flipbox{width: 600px; height: 250px; border: #000 solid 5px;}
#menu {background: #962323; width: 200px;}
#menu ul{margin: 0px; padding: 0px; }
#menu li{list-style: none; padding: 20px 0px 0px 15px; height: 42.5px; vertical-align: middle;}
#menu li:hover {background: #DB4F30;}
#menu li a {text-decoration: none; color: #FCFF68; font-family: Rockwell; text-transform: uppercase; font-weight: 900;}
#flipped {position: relative; top: -250px; left: 200px; background: #FF8D2C; width: 400px; height: 250px;}
#flipped img {border: none;}
If you loaded the page now, without having added anything to the js.js file, you'd see something like this:
Invoking Flip!
Flip! is very flexible and can used in several ways. After playing around with the plugin for a while, I decided to use a very basic implementation. For demonstration purposes, I created four separate event listeners.
$('#one').click(function()
{
$("#flipped").flip({
direction:'rl',
color: '#FF8D2C',
content: '<a href="#"><img src="shipping.png" alt="free shipping" /></a>',
})
}
)
$('#two').click(function()
content: '<a href="#"><img src="deal.png" alt="Deal of the day" /></a>',
$('#three').click(function()
content: '<a href="#"><img src="top.png" alt="Top Rated" /></a>',
$('#four').click(function()
content: '<a href="#"><img src="coupons.png" alt="Coupons" /></a>',
Let's focus on one of the listeners and I'll explain how to use Flip!.
First we use the jQuery selector to get the list item with an id of "one." We specify that when this list item is clicked, a function should run.
The function selects the page element with the id of "flipped" and calls the function flip() which is part of the Flip! plugin.
Next, three of Flip!'s seven options are used.
By default Flip! will animate an element from top to bottom (tb), but here I used "direction" to specify that the image flip from right to left (rl). I could also have selected left to right (lr) or bottom to top (bt).
The "color" option sets the background color for the element. For this demonstration, I am using a color scheme that I found on Adobe Kuler called Mexican Spice. The background color will be displayed as the element transitions, so be sure to pick something.
The "content" option determines what text or HTML will replace the effected element's current content. As is, only the content listed in the mark up is really search engine friendly. The additional content specified in the JavaScript file will probably not be indexed by Bing or Google for example. But in this demonstration all of the content is imagery, and the links in the "menu" div include the relevant keywords. It may be possible to extend Flip! to use on content from the mark up.
Additional Options
Flip! has four other or additional options which I did not use in this example. These options include "speed," which determines how fast the animation runs; "onBefore," which executes a synchronous function before the animation starts; "onAnimation," executes a synchronous function at the animation's midpoint; and "onEnd," executes a synchronous function after the animation is complete.
Flip! Takes Just Minutes
As you can see from this post, it only takes a matter of minutes to get Flip! up and running. In fact, it took me more time to create the images (some of which I didn't even use for screen captures) than it took to actually implement the plugin. It really does speed up development time.
This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.