Questions and Answers

##jQuery create undefined error

I am getting an error that says "Cannot call method 'create' of undefined"

Unfortunately, jCoverflip does not currently function with the latest stable jQuery release. In order to work with jCoverflip, you will need to use the jQuery 1.7.2 UI. You can get this version of the jQuery UI HERE.

Starting on a specific 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>

Dynamic addition and removal of items

Why does jCoverflip break when I add or remove an item?

Sadly, jCoverfip cannot currently account for the dynamic addition and removal of items. The current work-around is to take down and put back in place jCoverflip. You can take down jCoverflip by calling the 'destroy' method:

$('#flip').jcoverflip(); //Build it
    $('#flip').jcoverflip('destroy'); //All the elements are there but jCoverflip is gone
    //Add and remove elements
$('#flip').jcoverflip(); //Build again

Next button

How do I make a next button for my jCoverflip object?

There is not a built-in next button in jCoverflip; but you can make your own next button using the jCoverflip API. Documentation

$('#flip').jcoverflip();
$('#next-button').click(function() {
    $('#flip').jcoverflip('next');
});

Object reflection

jCoverflip does not add the reflection for images. But, you can still get the reflection by using Reflection.js, a jQuery plugin. Put all the images in their individual list items, apply the the reflection to the images, and then turn the list elements into the jCoverflip items.

Vertical jCoverflip

Can jCoverflip be displayed vertically?

Yes you can display the items vertically although you will have to customize the settings to do so. jCoverflip tracks the items position as either being current, after the current item, or before the current item. In the settings, you can set the styles for each item based on its position. You would just have to change the styles to display the before items as above and the after items as below the current. The default settings for the styles are:

/* Controls the CSS/Animation for items before the current
* @param el jQuery element - the item element
* @param container jQuery element - the container element
* @param offset int - the offset of the item from the current starting with zero
*/
beforeCss: function( el, container, offset ){
    return [
        $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset )+'px', bottom: '20px' }, { } ),
        $.jcoverflip.animationElement( el.find( 'img' ), { opacity: 0.5, width: '100px' }, {} )
    ];
},

/* Controls the CSS/Animation for items after the current
* @param el jQuery element - the item element
* @param container jQuery element - the container element
* @param offset int - the offset of the item from the current starting with zero
*/
afterCss: function( el, container, offset ){
    return [
         $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '20px' }, { } ),
         $.jcoverflip.animationElement( el.find( 'img' ), { opacity: 0.5, width: '100px' }, {} )
    ];
},

/* Controls the CSS/Animation for item that is the current
* @param el jQuery element - the item element
* @param container jQuery element - the container element
* @param isFinal boolean - a flag if the item is going to stop as the current or if it is passing through the current place to its final location
*/
currentCss: function( el, container, isFinal ){
    if( isFinal ){
        return [
            $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
            $.jcoverflip.animationElement( el.find( 'img' ), { opacity: 1, width: '200px' }, { } )
        ];
    } else {
        return [
            $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 50 )+'px', bottom: '20px' }, { } ),
            $.jcoverflip.animationElement( el.find( 'img' ), { opacity: 0.5, width: '100px' }, { } )
        ];
    }
}

Instead of using 'left' to position it a horizontal stacked, you would want to use 'top' to position it as a vertical stack.

---

Previous: Customizing jCoverflip's Titles

Next: The Team