Create jQuery Coverflow with CSS 3 transitions: 2 Demos

jQuery coverflow plug-in

The coverflow plug-in, which is based on jQuery, is an easy way to create coverflow in your website for photographs, professional work presentations like web design, or other documents that can be viewed by using keyboard navigation, mouse click, or mouse wheel, and swipe/tap.

FYI, the coverflow is a concept implemented on iTunes, as a third-party add-on and later purchased by Apple. This appeared not only in iTunes but in other Apple products like Max OS as well. The contents of a folder are displayed as large thumbnails that float on a background.

See the section below for creating the coverflow for your website by using the jQuery plug-in. Later, I will explain how you may set up this plug-in along with different options.

A demo of coverflow with photographs

In this example, a few images are used on the coverflow. You may navigate by using the keyboard’s left/right, up/down, and home/end keys. You may also use the mouse click or wheel and if you are using a smartphone/mobile, try tapping to navigate:

jquery coverflow

The script/markup and CSS:

<!DOCTYPE html>
<html>
    <head>
        <!-- jQuery/jQueryUI (hosted) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js"></script>

        <!-- Optional: Reflection -->
        <script type="text/javascript" src="js/coverflow/reflection.js"></script>

        <!-- interpolate, depends on jQ 1.8.0+ -->
        <script src="js/coverflow/jquery.interpolate.min.js"></script>

        <!-- Coverflow -->
        <script src="js/coverflow/jquery.coverflow.js"></script>

        <style>
            body {
                font-family: "Segoe UI", Verdana, Helvetica, Arial, sans-serif;
                font-size: 11px;
            }

            .coverflow {
                height: 100px;
                border-bottom: solid 2px black;
            }

            .coverflow .cover {
                width: 100px;
                height: 100px;
                cursor: pointer;
                font-size: 500%;
                border: solid 2px black;
                text-align: center;

                background: #e2e2e2; /* Old browsers */
                /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2QxZDFkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWZlZmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
                background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-8 */
            }

            .coverflow .cover.current {
                opacity: 1;
                border-bottom: none;

                box-shadow:	0 0 16px rgba(0,0,0,.5);

                background: #ffffff; /* Old browsers */
                /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
                background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
            }
            .coverflow .cover.current:after {
                content:			' ';
                background-color:	white;
                display:			block;
                position:			absolute;
                width:				132px;
                height:				16px;
                left:				-16px;
                bottom:				-16px;
            }

            /* Images coverflow*/
            .image-coverflow .cover {
                cursor: pointer;
                /*-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255, 255, 255, .5)));*/
            }

            #photos-info {
                position:		relative;
                text-align:		center;
                z-index:		1000;
                text-shadow:	0 0 8px white;
            }

            #image-title {
                font-size: 200%;
                font-weight: bold;
            }

            .clearfix {
                clear: both;
            }
        </style>
        
        <script>
            $(function() {
                /* CD covers */

                if ($.fn.reflect) {
                    $('.image-coverflow .cover').reflect();
                }

                $('.image-coverflow').coverflow({
                    easing:			'easeInQuad',
                    duration:		600,
                    index:			3,
                    width:			320,
                    height:			240,
                    visible:		'density',
                    selectedCss:	{	opacity: 0.8	},
                    outerCss:		{	opacity: .1	},
                    change:			function(event, cover) {
                        var img = $(cover).children().andSelf().filter('img').last();
                        $('#image-title').text(img.data('name') || 'unknown');
                    }
                    
                });	

            });
        </script>
    </head>
 <body>

        <h1>Coverflow</h1>
        A demo of coverflow by using jQuery using CSS 3 transformations!
        <h3>Photographs</h3>
        <div class="image-coverflow" autofocus>
            <img class="cover" data-name="Mango" src="images/mango-2.jpg"/>
            <img class="cover" data-name="Banana" src="images/banana-2.jpg"/>
            <img class="cover" data-name="Aurora Borealis" src="images/aurora.jpg"/>
            <img class="cover" data-name="Barbecued steak" src="images/barbecue.jpg"/>
            <img class="cover" data-name="Black swan" src="images/strawberries-2.jpg"/>
            <img class="cover" data-name="Fire" src="images/fire.jpg"/>
            <img class="cover" data-name="Keyboard" src="images/keyboard.jpg"/>
            <img class="cover" data-name="Rose" src="images/rose.jpg"/>
            <img class="cover" data-name="Currant" src="images/currant-2.jpg"/>
        </div>
        <div id="photos-info">
            <div id="image-title"></div>
        </div>

</body>
</html>

In the script section, the following options are used for specifying the behavior of coverflow:

  • The easing option is used that can be any value available from jQuery-ui here e.g. linear, swing, easeIn, easeOut, etc..
  • The duration specifies the speed of the animation. I have used a numeric value in milliseconds. You may use slow, normal or fast as well.
  • The index specifies the item in focus as the webpage with coverflow loads. The index starts at 0.
  • Similarly, a few other options like height and width are also given. You may read the full available options with details here. Also, you may download the plug-in from the given link.

A demo of using numbers in coverflow

For the demo purpose, you may use different content types in the coverflow, the numbers from 1 to 15 are used in this example.

Apart from that, a few buttons are given for certain actions like move first, last, and to a specific number by clicking the respective buttons. Have a look at the demo by clicking the link or image below:

jquery coverflow numbers

The markup:

<h3>Number selector</h3>
<div style="position:absolute;background:rgba(255,255,255,.75);z-index:1000;padding:10px">
 <button id="first" class="btn-primary btn-lg">Go to 1</button>
 <button id="goto5" class="btn-warning btn-lg">Go to #5</button>
 <button id="last" class="btn-primary btn-lg">Go to 15</button>
 <br/><label for="keyboard"><input type="checkbox" id="keyboard" checked/>Keyboard</label>
 <br/><label for="click"><input type="checkbox" id="click" checked/>Click/tap</label>
 <br/><label for="wheel"><input type="checkbox" id="wheel" checked/>Scroll wheel</label>
</div> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="coverflow">
 <div class="cover">1</div>
 <div class="cover">2</div>
 <div class="cover">3</div>
 <div class="cover">4</div>
 <div class="cover">5</div>
 <div class="cover">6</div>
 <div class="cover">7</div>
 <div class="cover">8</div>
 <div class="cover">9</div>
 <div class="cover">10</div>
 <div class="cover">11</div>
 <div class="cover">12</div>
 <div class="cover">13</div>
 <div class="cover">14</div>
 <div class="cover">15</div>
</div>

The script:

 <script>
 $(function() {

 // Numbers

 $('.coverflow').coverflow();

 $('#first').click(function() {
 $('.coverflow').coverflow('index', 0);
 });

 $('#last').click(function() {
 $('.coverflow').coverflow('index', -1);
 });

 $('#goto5').click(function() {
 $('.coverflow').coverflow('index', 5-1); // zero-based index!
 });
 
 $('#keyboard').click(function() {
 $('.coverflow').coverflow('option', 'enableKeyboard', $(this).is(':checked'));
 });
 
 $('#wheel').click(function() {
 $('.coverflow').coverflow('option', 'enableWheel', $(this).is(':checked'));
 });
 
 $('#click').click(function() {
 $('.coverflow').coverflow('option', 'enableClick', $(this).is(':checked'));
 });

 });
</script>

Setting up this coverflow jQuery plug-in

After downloading the plug-in from the Github website, include the reference files as shown in the demo pages.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js”></script>

<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js”></script>

<!– Optional: Reflection –>

<script type=”text/javascript” src=”js/coverflow/reflection.js”></script>

<!– interpolate, depends on jQ 1.8.0+ –>

<script src=”js/coverflow/jquery.interpolate.min.js”></script>

<!– Coverflow –>

<script src=”js/coverflow/jquery.coverflow.js”></script>

Specify the options in the script section as per requirement.

 

Credit: vanderlee