jQuery UI Coverflow

Ever since iTunes popularized the coverflow interface, it has been adapting versions of it for the web. When we wanted one to use nothing on the net would fit the bill, so we built our own. We ended up creating with the smoothest, most versatile, and easy to use jQuery coverflow module available.

We started with a robust, JavaScript-based linear algebra solution for perspective transformations. Some coverflows “fake” it and transform each square into a parallelogram- a visual approximation. Our JavaScript approach provides limitless perpective potential and supports the largest selection of browsers possible. Since the transformations do leverage the HTML5 canvas element, older “downlevel” browsers cannot see the perspective effect. The plugin does “gracefully” degrade- older browsers still see a working coverflow, just without the perspective transformation.

After perfecting the perspective, reflection, and animation algorithms, we then proceeded to add a ton of options to make this coverflow truly robust and adaptable to many applications. With both the ability to create categories as well as full API access, this coverflow could be used in a variety of commercial contents. Combined with AJAX calls, it could even be “infinitely” long!

Requirements

  • jQuery 1.3.2+
  • jQueryUI 1.8+ (Core, Widget, Effects Core)
    • Add the "Slider" widget if you want to see that feature on your site.

Features

  • Very simple setup requiring miminal markup.
  • Cross-browser compatible with graceful degredation.
    • Chrome, Safari, Firefox 3.6+, Opera, IE7+
  • Highly customizable via configuration, method API, and triggered events.
  • Images added from the DOM or by JSON configuration or both.
  • Image reflection and perspective are configurable and optional.
  • Image categories and an optional menu that is fully CSS stylable.
  • A slider with a handle that sizes according to the number of images.
  • Autoplay mode and the ability to pause during mouse over.
  • Extensive inline and accompanying documentation.
  • Free and open source.
  • Quick Start

    Note: jQuery Coverflow must be loaded through a web server such as Apache or IIS due to security requirements of the HTML5 Canvas.
    Step 1

    Include jQuery, jQuery UI, and jQuery UI CSS in your HTML.

    /* tabs */
    div.highlight ul.tabs {
        overflow: hidden;
        padding: 5px 0 5px 0;
        margin: 0;
        list-style: none;
        border-bottom: 1px solid #E0E0E0;
        width: 100%;
    }
    div.highlight ul.tabs li {
        padding: 0;
        margin: 0 5px;
        float: left;
        background: none;
        border-bottom: 1px dashed #CCC;
        line-height:1.0em;
        color: #CCC;
        cursor: pointer;
    }
    Step 2

    Create your HTML structure with a wrapper element that has the class "coverflow". Add some images to your container including the title and subtitle as data attributes if you want those to be displayed.

    <div id="coverflow" class="coverflow">
        <!-- (Optional) Add additional controls. PT Coverflow leaves non-img tags in the container untouched, so you can absolute position them relative to the container. -->
        <div class="controls">
            <a id="previous" title="Previous Cover">&lsaquo;</a>
            <a id="next" title="Next Cover">&rsaquo;</a>
        </div>
        <!-- PT Coverflow uses all img tags in the container not nested in other elements. The alt tags are not used by coverflow, but should be rendered to be standards compliant and accessible. -->
        <img src="img/muse-the-resistance.jpg" alt="Muse, The Resistance" data-subtitle="Muse" data-title="The Resistance" />
        <img src="img/albertacross-thebrokensideoftime.jpg" alt="Alberta Cross, Broken Side of Time" data-subtitle="Alberta Cross" data-title="Broken Side of Time" />
        <img src="img/batforlashes-twosuns.jpg" alt="Bat For Lashes, Two Suns" data-subtitle="Bat For Lashes" data-title="Two Suns" />
        <img src="img/bjork-post.jpg" alt="Bjork, Post" data-subtitle="Bjork" data-title="Post" />
    </div>
    
    Step 3

    Add the JavaScript to your page to hook up the jQuery Coverflow to your container.

    <script type="text/javascript">
        $(function () {
            // Instantiate PT Coverflow
            var $demo = $("#coverflow").coverflow();
    
            // (Optional) Attach control click events to the PT Coverflow API
            $("#previous").click(function () {
                $demo.coverflow("prevCover");
            });
            $("#next").click(function () {
                $demo.coverflow("nextCover");
            });
        });
    </script>
    

    See the accompanying demos for more examples.

  • Options

    width
    Number null

    The width of the coverflow in pixels. If not set this value will be inferred from the coverflow's container.

    Initialize a coverflow specifying its width using options.

    var myCoverflow = $(".selector").coverflow({ width: 400 });

    Get the coverflow width option after initialization.

    var coverflowWidth = myCoverflow.coverflow("option", "width");
    height
    Number null

    The height of the coverflow in pixels. If not set this value will be inferred from the coverflow's container.

    Initialize a coverflow specifying its height using options.

    var myCoverflow = $(".selector").coverflow({ height: 400 });

    Get the coverflow height option after initialization.

    var coverflowHeight = myCoverflow.coverflow("option", "height");
    selectedIndex
    Number 0

    A coverflow contains a zero based array of covers. When the coverflow loads the selected index is the value in this array that is positioned in the center. For example if you had ten covers and set selected value to 4, the fifth cover in the set will be in the center with covers 0-3 to its left, and 5-9 to its right.

    Initialize a coverflow specifying its selected index using options.

    var myCoverflow = $(".selector").coverflow({ selectedIndex: 4 });

    Get the coverflow selected index after initialization.

    var selectedIndex = myCoverflow.coverflow("option", "selectedIndex");
    images
    Array<Object> []

    An alternate way to specify the coverflow images. In the case that images are both in the DOM and specified here, Coverflow will use the union of both sets. Each object in this array must have an "src" property specifying the image source, and can optionally include "title", "subtitle", and "category" properties.

    Initialize a coverflow specifying images using options.

    var myCoverflow = $(".selector").coverflow({
        images: [
            { src: "#1", title: "Cover #1", subtitle: "", category: "" },
            { src: "#2", title: "Cover #2", subtitle: "", category: "" },
            { src: "#3", title: "Cover #3", subtitle: "", category: "" }
        ]
    });

    Get the images after initialization.

    var images = myCoverflow.coverflow("option", "images");

    Cover

    width
    Number 300

    The width of the center "selected" cover in pixels.

    Initialize a coverflow specifying the cover width using options.

    var myCoverflow = $(".selector").coverflow({ cover: { width: 300 } });

    Get the cover width option after initialization.

    var coverWidth = myCoverflow.coverflow("option", "cover").width;
    height
    Number 300

    The height of the center "selected" cover in pixels.

    Initialize a coverflow specifying the cover height using options.

    var myCoverflow = $(".selector").coverflow({ cover: { height: 300 } });

    Get the cover height option after initialization.

    var coverHeight = myCoverflow.coverflow("option", "cover").height;

    Cover Animation

    radius
    Number 20

    The number of covers that animate on each side of the selected cover each time the select cover changes. For best performance make this just slightly larger than the number of covers visible at any one time.

    Initialize a coverflow specifying the cover animation radius using options.

    var myCoverflow = $(".selector").coverflow({ cover: { animation: { radius: 20 } } });

    Get the cover animation radius option after initialization.

    var coverAnimationRadius = myCoverflow.coverflow("option", "cover").animation.radius;

    Cover Perspective Animation

    duration
    Number 80

    The number of milliseconds it takes to animate from a perspective skew to the frontal view. This happens whenever a cover is flipped either to or from the center "selected" area.

    Initialize a coverflow specifying the covers' perspective animation duration using options.

    var myCoverflow = $(".selector").coverflow({ cover: { animation: { perspective: { duration: 500 } } } });

    Get the covers' perspective animation duration option after initialization.

    var coverPerspectiveAnimationDuration = myCoverflow.coverflow("option", "cover").animation.perspective.duration;
    inner
    Number 120

    This value is a percentage of the duration. The two covers to the immediate left and right of the center "selected" cover are deemed the "inner" background covers. When performing the skew animation it is visually appealing to animate these slightly slower than the time it takes an "outer" background cover to animate to center perspective. Remember, the longer the duration, the slower the animation appears. So an inner value of 100 would animate the same speed as specified by the duration option. 120 will make it slower, and 80 would make it faster.

    Initialize a coverflow specifying the covers' perspective animation duration using options.

    var myCoverflow = $(".selector").coverflow({ cover: { animation: { perspective: { inner: 200 } } } });

    Get the covers' perspective animation duration option after initialization.

    var innerCoverAnimationDurationOffset = myCoverflow.coverflow("option", "cover").animation.perspective.inner;

    Cover Background

    size
    Number 90

    All the covers in the set that are not the center "selected" cover are referred to as "background" covers. To give the illusion that they are behind the selected cover, they should be smaller. This value is a percentage of the selected cover's size as determined by the cover width and cover height properties.

    Initialize a coverflow specifying the background cover size using options.

    var myCoverflow = $(".selector").coverflow({ cover: { background: { size: 90 } } });

    Get the background cover size option after initialization.

    var coverBackgroundSize = myCoverflow.coverflow("option", "cover").background.size;
    style
    String Inherits from container

    Sets the CSS style of the background, which could be a color or the URL of a background image. If not set, the style of the container will be used for a background. This property is especially important when using reflections, since each reflected cover needs a background to mask other covers' reflections.

    Initialize a coverflow specifying the background style of each cover using options.

    var myCoverflow = $(".selector").coverflow({ cover: { background: { style: "url(Path/To/My/Image.png)" } } });

    Get the background style option after initialization.

    var coverBackgroundStyle = myCoverflow.coverflow("option", "cover").background.style;

    Cover Background Overlap

    inner
    Number 20

    The two covers to the immediate left and right of the center "selected" cover are the "inner" background covers. This number specifies the percentage that they overlap the selected cover. A value of 100 hides them completely since they are 100% covered. A negative value can create space between the selected cover and the inner background covers.

    Initialize a coverflow specifying the inner background cover overlap percentage using options.

    var myCoverflow = $(".selector").coverflow({ cover: { background: { overlap: { inner: 20 } } } });

    Get the inner background cover overlap percentage option after initialization.

    var coverBackgroundOverlapInner = myCoverflow.coverflow("option", "cover").background.overlap.inner;
    outer
    Number 80

    All the covers that are not the center "selected" cover or the two covers to the immediate left and right of it are referred to as the "outer" background covers. This number specifies the percentage they are overlapped by an adjoining cover. A value of 100 hides them completely, since they are 100% covered. A negative value can create space between them and adjoining background covers.

    Initialize a coverflow specifying the outer background cover overlap percentage using options.

    var myCoverflow = $(".selector").coverflow({ cover: { background: { overlap: { outer: 80 } } } });

    Get the outer background cover overlap percentage option after initialization.

    var coverBackgroundOverlapOuter = myCoverflow.coverflow("option", "cover").background.overlap.outer;

    Cover Perspective

    enabled
    Boolean true

    Turns the perspective transformations on and off. The covers' perspectives depend on the HTML5 canvas element. Browsers that don't support this, like Internet Explorer 7 and 8, will never show perspective transformations regardless of this value.

    Initialize a coverflow specifying whether to use perspective transformations using options.

    var myCoverflow = $(".selector").coverflow({ cover: { perspective: { enabled: false } } });

    Get whether to use perspective transformations after initialization.

    var coverPerspectiveEnabled = myCoverflow.coverflow("option", "cover").perspective.enabled;
    angle
    Number 12

    The angle, in degrees, that defines the perspective skew. These degrees are measured two dimensionally from the top plane defined by the cover's top. A value of 45 degrees will create triangles of the perspective covers, while values over this cause the perspective to "fold in" on itself- not good for realism, but can create some psychedelic effects.

    Initialize a coverflow specifying the perspective transformation angle using options.

    var myCoverflow = $(".selector").coverflow({ cover: { perspective: { angle: 80 } } });

    Get the perspective transformation angle after initialization.

    var coverPerspectiveAngle = myCoverflow.coverflow("option", "cover").perspective.angle;

    Cover Reflection

    enabled
    Boolean true

    Turns the cover reflections on and off. The covers' perspectives depend on the HTML5 canvas element. Browsers that don't support this, like Internet Explorer 7 and 8, will never show cover reflections regardless of this value.

    Initialize a coverflow specifying whether to use cover reflections using options.

    var myCoverflow = $(".selector").coverflow({ cover: { reflection: { enabled: false } } });

    Get whether to use cover reflections after initialization.

    var coverReflectionEnabled = myCoverflow.coverflow("option", "cover").reflection.enabled;
    length
    Number 80

    The length of the reflection as a percentage of the cover. All reflections fade to 100% transparency, this value specifies how much of the image is displayed before that happens. A reflection value of 100 will show nearly the whole cover, while a value of 0 will hide the reflection completely.

    Initialize a coverflow specifying reflection length using options.

    var myCoverflow = $(".selector").coverflow({ cover: { reflection: { length: 20 } } });

    Get reflection length option after initialization.

    var coverReflectionLength = myCoverflow.coverflow("option", "cover").reflection.length;
    initialOpacity
    Number 30

    A number between 0 and 100 specifying the initial opacity of a cover's reflection (i.e. the part closest to the cover). A value of 0 is completely transparent, while a value of 100 is completely opaque.

    Initialize a coverflow specifying reflection initial opacity using options.

    var myCoverflow = $(".selector").coverflow({ cover: { reflection: { initialOpacity: 90 } } });

    Get reflection initial opacity option after initialization.

    var coverReflectionInitialOpacity = myCoverflow.coverflow("option", "cover").reflection.initialOpacity;

    Cover Title

    enabled
    Boolean true

    Turns the cover titles (title and subtitle) on and off.

    Initialize a coverflow specifying whether to use cover titles using options.

    var myCoverflow = $(".selector").coverflow({ cover: { title: { enabled: false } } });

    Get whether to use cover titles after initialization.

    var coverTitleEnabled = myCoverflow.coverflow("option", "cover").title.enabled;

    Categories

    enabled
    Boolean false

    Turns categories on and off. Categories can be specified for an image in the DOM by adding the "data-category" attribute to a source image. If setting programatically using the "images" option, the source object should have a "category" property. Categories are ordered in the same order they appear in the DOM.

    Initialize a coverflow specifying whether to use categories using options.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true } });

    Get whether to use categories after initialization.

    var categoriesEnabled = myCoverflow.coverflow("option", "categories").enabled;
    defaultCategory
    String 'Unknown'

    The default category to assign covers to if not specified by the data source.

    Initialize a coverflow specifying the default category using options.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true, defaultCategory: "Default Category" } });

    Get the default category option after initialization.

    var categoriesDefault = myCoverflow.coverflow("option", "categories").defaultCategory;
    selectedCategory
    String null

    Specifies the first category to display. If not specified, the first category defined in the DOM will be the first selected category.

    Initialize a coverflow specifying the selected category using options.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true, selectedCategory: "My Category" } });

    Get the selected category option after initialization.

    var categoriesSelected = myCoverflow.coverflow("option", "categories").selectedCategory;
    renderTitles
    Boolean true

    Specifies whether to render a list of category titles that can be used to navigate through the coverflow categories.

    Initialize a coverflow specifying whether to render a category menu using options.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true, renderTitles: false } });

    Get whether to render a category menu after initialization.

    var categoriesRenderTitles = myCoverflow.coverflow("option", "categories").renderTitles;
    rememberLastCover
    Boolean true

    When switching categories, the current set of covers is removed and the new ones are added. When switching back to a category that has been previously viewed, this value selects the same cover that was selected before navigating away from the category. If this value is false, the first cover in the set of covers for a category is always selected when switching categories.

    Initialize a coverflow specifying whether to "remember" the selected cover in each category using options.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true, rememberLastCover: false } });

    Get whether to "remember" the selected cover in each category after initialization.

    var categoriesRememberLastCover = myCoverflow.coverflow("option", "categories").rememberLastCover;
    delAnimationCount
    Number 4

    The number of covers that animate out when switching categories. The higher this number is, the greater the likelyhood for performance issues. However leaving it too low can be distracting as covers will change instantly in a flash.

    Initialize a coverflow specifying the number of covers that animate out when switching categories using options.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true, delAnimationCount: 10 } });

    Get the number of covers that animate out when switching categories after initialization.

    var categoriesDelAnimationCount = myCoverflow.coverflow("option", "categories").delAnimationCount;
    addAnimationCount
    Number 4

    The number of covers that animate in when switching categories. The higher this number is, the greater the likelyhood for performance issues. However leaving it too low can be distracting as covers will change instantly in a flash.

    Initialize a coverflow specifying the number of covers that animate in when switching categories using options.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true, addAnimationCount: 10 } });

    Get the number of covers that animate in when switching categories after initialization.

    var categoriesAddAnimationCount = myCoverflow.coverflow("option", "categories").addAnimationCount;

    Autoplay

    enabled
    Boolean false

    Turns autoplay on and off.

    Initialize a coverflow specifying whether to automatically play using options.

    var myCoverflow = $(".selector").coverflow({ autoplay: { enabled: true } });

    Get whether to automatically play after initialization.

    var autoplayEnabled = myCoverflow.coverflow("option", "autoplay").enabled;
    interval
    Number 3

    The number of seconds to wait before flipping to the next cover on autoplay.

    Initialize a coverflow specifying the autoplay flip interval using options.

    var myCoverflow = $(".selector").coverflow({ autoplay: { enabled: true, interval: 1 } });

    Get the autoplay flip interval option after initialization.

    var autoplayInterval = myCoverflow.coverflow("option", "autoplay").interval;
    pauseOnMouseenter
    Boolean true

    Pauses autoplay when the user positions the mouse over the coverflow. This prevents the autoplay from flipping away from a cover they might be interested in.

    Initialize a coverflow specifying whether to pause autoplay on mouse enter using options.

    var myCoverflow = $(".selector").coverflow({ autoplay: { enabled: true, pauseOnMouseenter: false } });

    Get whether to pause autoplay on mouse enter after initialization.

    var pauseAutoplayOnMouseenter = myCoverflow.coverflow("option", "autoplay").pauseOnMouseenter;
    playsPerCategory
    Number 3

    When both autoplay and categories are enabled, autoplay will cycle through them. This value determines how many cover flips will play before the next category is loaded. If the end of a set of covers in a category is reached before this value is met, the next category will be loaded after rewinding the set. This way you can set this value to an arbitrarily high number if you would like coverflow to flip through each cover in each category before changing catagories.

    Initialize a coverflow specifying the number autoplay flips before changing category using options.

    var myCoverflow = $(".selector").coverflow({ 
      autoplay: { 
        enabled: true, 
        playsPerCategory: 1 
      }, 
      categories: { 
        enabled: true 
      } 
    });

    Get the number autoplay flips before changing category after initialization.

    var autoplayPlaysPerCategory = myCoverflow.coverflow("option", "autoplay").playsPerCategory;

    Slider

    enabled
    Boolean true

    Turns the slider on and off.

    Initialize a coverflow specifying whether to show the slider using options.

    var myCoverflow = $(".selector").coverflow({ slider: { enabled: false } });

    Get whether to show the slider after initialization.

    var sliderEnabled = myCoverflow.coverflow("option", "slider").enabled;
    width
    Number 80

    The width of the slider as a percentage of the coverflow's width.

    Initialize a coverflow specifying the width of the slider using options.

    var myCoverflow = $(".selector").coverflow({ slider: { width: 50 } });

    Get the width of the slider after initialization.

    var sliderWidth = myCoverflow.coverflow("option", "slider").width;
  • Events

    pt.coverclick

    This event is triggered when any cover is clicked on.

    $(".selector").bind("pt.coverclick", function (event, data) { 
      // Runs when any cover is clicked. 
    });
    pt.covermouseenter

    This event is triggered when the mouse pointer is moved over any cover.

    $(".selector").bind("pt.covermouseenter", function (event, data) { 
      // Runs when the mouse pointer is moved over any cover. 
    });
    pt.covermouseleave

    This event is triggered when the mouse pointer is moved off of any cover.

    $(".selector").bind("pt.covermouseleave", function (event, data) { 
      // Runs when the mouse pointer is moved off of any cover. 
    });
    pt.coverflowselectedcoverclick

    This event is triggered when the center "selected" cover is clicked on.

    $(".selector").bind("pt.coverflowselectedcoverclick", function (event, data) { 
      // Runs when the center "selected" cover is clicked on. 
    });
    
    pt.coverflowbackgroundcoverclick

    This event is triggered when any cover other than the center "selected" cover is clicked on.

    $(".selector").bind("pt.coverflowbackgroundcoverclick", function (event, data) { 
      // Runs when any cover other than the center "selected" cover is clicked on. 
    });
    pt.coverflowmouseenter

    This event is triggered when the mouse pointer is moved over the coverflow or any cover.

    $(".selector").bind("pt.coverflowmouseenter", function (event, data) { 
      // Runs when the mouse pointer is moved over the coverflow or any cover. 
    });
    pt.coverflowmouseleave

    This event is triggered when the mouse pointer is moved off of the coverflow or any cover.

    $(".selector").bind("pt.coverflowmouseleave", function (event, data) { 
      // Runs when the mouse pointer is moved off of the coverflow or any cover. 
    });
    pt.coverflowimageadded

    This event is triggered when the "addImage" API method is called.

    var myCoverflow = $(".selector").coverflow();
    var imageToAdd = $("<img src="#" />");
    $(".selector").bind("pt.coverflowimageadded", function (event, data) { 
      // Runs when the "addImage" API method is called. 
    }); 
    // Invoke addImage on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("addImage", imageToAdd); 
    });
    pt.coverflowimageremoved

    This event is triggered when the "removeImage" API method is called.

    var myCoverflow = $(".selector").coverflow();
    $(".selector").bind("pt.coverflowimageremoved", function (event, data) { 
      // Runs when the "removeImage" API method is called. 
    }); 
    // Invoke removeImage on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("removeImage"); 
    });
    pt.coverflowplay

    This event is triggered when the "play" API method is called.

    var myCoverflow = $(".selector").coverflow(); 
    $(".selector").bind("pt.coverflowplay", function (event, data) { 
      // Runs when the "play" API method is called. 
    }); 
    // Invoke play on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("play"); 
    });
    pt.coverflowpause

    This event is triggered when the "pause" API method is called.

    var myCoverflow = $(".selector").coverflow({ autoplay: { enabled: true } }); 
    $(".selector").bind("pt.coverflowpause", function (event, data) { 
      // Runs when the "pause" API method is called. 
    }); 
    // Invoke pause on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("pause"); 
    });
    pt.coverflowtoggleplay

    This event is triggered when the "togglePlay" API method is called.

    var myCoverflow = $(".selector").coverflow(); 
    $(".selector").bind("pt.coverflowtoggleplay", function (event, data) { 
      // Runs when the "togglePlay" API method is called. 
    }); 
    // Invoke togglePlay on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("togglePlay"); 
    });
    pt.coverflownextcategory

    This event is triggered when the "nextCategory" API method is called.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true } }); 
    $(".selector").bind("pt.coverflownextcategory", function (event, data) { 
      // Runs when the "nextCategory" API method is called. 
    }); 
    // Invoke nextCategory on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("nextCategory"); 
    });
    pt.coverflowprevcategory

    This event is triggered when the "prevCover" API method is called.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true } }); 
    $(".selector").bind("pt.coverflowprevcategory", function (event, data) { 
      // Runs when the "prevCover" API method is called. 
    }); 
    // Invoke prevCover on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("prevCover"); 
    });
    pt.coverflowgotocategory

    This event is triggered when the "gotoCategory" API method is called. The menu rendered by the "renderTitles" option calls gotoCategory.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true } }); 
    $(".selector").bind("pt.coverflowgotocategory", function (event, data) { 
      // Runs when the "gotoCategory" API method is called. 
    }); 
    // Invoke gotoCategory on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("gotoCategory", "Category Name"); 
    });
    pt.coverflownextcover

    This event is triggered when the "nextCover" API method is called.

    var myCoverflow = $(".selector").coverflow(); 
    $(".selector").bind("pt.coverflownextcover", function (event, data) { 
      // Runs when the "nextCover" API method is called. 
    }); 
    // Invoke nextCover on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("nextCover"); 
    });
    pt.coverflowprevcover

    This event is triggered when the "prevCover" API method is called.

    var myCoverflow = $(".selector").coverflow(); 
    $(".selector").bind("pt.coverflowprevcover", function (event, data) { 
      // Runs when the "prevCover" API method is called. 
    }); 
    // Invoke prevCover on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("prevCover"); 
    });
    pt.coverflowgotocover

    This event is triggered when the "gotoCover" API method is called.

    var myCoverflow = $(".selector").coverflow(); 
    $(".selector").bind("pt.coverflowgotocover", function (event, data) { 
      // Runs when the "gotoCover" API method is called. 
    }); 
    // Invoke gotoCover on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("gotoCover", 5); 
    });
    pt.coverflowslide

    This event is triggered when the slider is used.

    $(".selector").bind("pt.coverflowslide", function (event, data) { // Runs when the slider is used. });
  • Methods

    destroy
    .coverflow("destroy")

    Remove the coverflow completely and return the element back to its previous state.

    var myCoverflow = $(".selector").coverflow(); 
    // Invoke destroy on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("destroy"); 
    });
    play
    .coverflow("play")

    Begin autoplay.

    var myCoverflow = $(".selector").coverflow(); 
    // Invoke play on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("play"); 
    });
    pause
    .coverflow("pause")

    Pause autoplay.

    var myCoverflow = $(".selector").coverflow({ autoplay: { enabled: true } }); 
    // Invoke pause on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("pause"); 
    });
    togglePlay
    .coverflow("togglePlay")

    Pauses autoplay if playing; begins autoplay if paused.

    var myCoverflow = $(".selector").coverflow(); 
    // Invoke togglePlay on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("togglePlay"); 
    });
    isPlaying
    .coverflow("isPlaying")

    Detects if autoplay is running.

    var myCoverflow = $(".selector").coverflow(); 
    // Invoke isPlaying on element click. 
    $(".selector2").click(function () { 
      var isPlaying = myCoverflow.coverflow("isPlaying"); 
      if (isPlaying) { 
        // This code is executed only if autoplay is running. 
      } 
    });
    nextCover
    .coverflow("nextCover")

    Advances the coverflow to the next cover.

    var myCoverflow = $(".selector").coverflow(); 
    // Invoke nextCover on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("nextCover"); 
    });
    prevCover
    .coverflow("prevCover")

    Moves the coverflow back to the previous cover.

    var myCoverflow = $(".selector").coverflow(); 
    // Invoke prevCover on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("prevCover"); 
    });
    gotoCover
    .coverflow("gotoCover", index)

    Moves the coverflow back to the previous cover.

    var myCoverflow = $(".selector").coverflow(); 
    // Invoke gotoCover on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("gotoCover", 5); 
    });
    nextCategory
    .coverflow("nextCategory")

    Switches to the next category.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true } }); 
    // Invoke nextCategory on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("nextCategory"); 
    });
    prevCategory
    .coverflow("prevCategory")

    Switches to the previous category.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true } }); 
    // Invoke prevCategory on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("prevCategory"); 
    });
    gotoCategory
    .coverflow("gotoCategory", categoryName)

    Switches to the selected category.

    var myCoverflow = $(".selector").coverflow({ categories: { enabled: true } }); 
    // Invoke gotoCategory on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("gotoCategory", "My Category"); 
    });
    addImage
    .coverflow("addImage", image, [animated])

    Adds an image from the end of a cover set. The optional 'animated' parameter defaults to true.

    var myCoverflow = $(".selector").coverflow(); 
    var imageToAdd = $("<img src="#" />"); 
    // Invoke addImage on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("addImage", imageToAdd); 
    });
    removeImage
    .coverflow("removeImage", [animated])

    Removes an image from the front of a cover set. The optional 'animated' parameter defaults to true.

    var myCoverflow = $(".selector").coverflow(); 
    // Invoke removeImage on element click. 
    $(".selector2").click(function () { 
      myCoverflow.coverflow("removeImage"); 
    });
  • License

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

    Copyright Planet Telex, Inc.