Submit your widget

Beautiful Coverflip with jQuery

Created 4 years ago   Views 35102   downloads 4576    Author newsignature
Beautiful Coverflip with jQuery
View DemoDownload 377.1 KB
193
Share |

jCoverflip depends upon:

  • jQuery version 1.3 or later
  • jQuery UI 1.7.2 (only the core of jQuery UI is required and the themes are not used)

Add the styles to your site:

.ui-jcoverflip {
        position: relative;
      }
     
      .ui-jcoverflip--item {
        position: absolute;
        display: block;
      }

Include jCoverflip script after jQuery and jQuery UI in the <head> of your HTML

document:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<script type="text/javascript" src="jquery.jcoverflip.js"></script>

 

Now you can use it like other jQuery UI widgets. After installing jQuery, jQuery UI, and jCoverflip, just call .jcoverflip() on the parent element to create it.

<script>
  $(function(){
    $('#flip').jcoverflip();
 
  });
</script>
</head>...
<body>...
   
<ul id="flip">
    <li><a href="..."><img ...><span class="title">My title</span></a></li>
    <li><a href="..."><img ...><span  class="title">Another title</span></a></li>
    ...
  </ul>

 

jCoverflip provides a robust API to customize the animation and methods to use in creating your own controls.

Options

Name Description
items The jQuery element selector: string, jQuery, DOM Element, [DOM Element]
beforeCSS A function to customize the styling and animation for items to the left of the current.
afterCSS A function to customize the styling and animation for items to the right of the current.
currentCSS A function to customize the styling and animation for the current item.
current

The item to be current.

time

The time, in milliseconds, to animate when switching from item to item.

titles.create

A function to generate a title element for the items. (Paired with titles.destroy)

titles.destroy A function to remove the title element for the items when the object is being destroyed. (Paired with titles.create)
titleAnimationIn

A callback function to animate the title in.

TitleAnimationOut

A callback function to animate the title out.

controls.create

A callback to add controls, such as a scrollbar, to the jCoverflip widget. (Paired with controls.destroy)

controls.destroy A callback to remove the controls when the object is destroyed. (Paired with controls.create)

Methods

Call Description
next( [by=1], [wrapAround=true], [callback], [originalEvent={}])

Move to the next item.

  • by: the number to move ahead by
  • wrapAround: wraps back around to the start if exceeds the number
  • callback: a function to get called
  • originalEvent: the originating event object
previous( [by=1], [wrapAround=true], [callback], [originalEvent={}])

Move to the previous item.

  • by: the number to move back by
  • wrapAround: wraps back around to the end if exceeds the number
  • callback: a function to get called
  • originalEvent: the originating event object
last([callback], [originalEvent={}])

Move the current to the end.

  • callback: a function to get called
  • originalEvent: the originating event object
first([callback], [originalEvent={}])

Move the current to the start.

  • callback: a function to get called
  • originalEvent: the originating event object
current([newCurrent, [originalEvent]])

Get the current item index if no parameters are passed. If newCurrent is passed, then it will move the current item to the index.

length

Get the length of the number of items.

Events

Name Description
change

Triggers when the current item changes.

start

Triggers when starting to change the current item.

stop

Triggers when stopping to change the current item.

next Triggers when the next method is called.
previous Triggers when the previous method is called.
first Triggers when the first method is called.
last Triggers when the last method is called.

Starting item

Is there a way to start on an item other than the first item?

If you would like jCoverflip to start on an item that is not the first item, you can use the current option. For example, if you want to start on the third item, passing in the option current set to 3 when calling jcoverflip:

<script>
  $(function(){
    $('#flip').jcoverflip({current: 3});
  });
</script>