Beautiful Coverflip with jQuery

Home Slideshow & ScrollerBeautiful Coverflip with jQuery

Beautiful Coverflip with jQuery

13 years ago Views

29992

4079

newsignature

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>

Tag: image scroller